Add keyboard overlay help for the Search key as a Function key extended keyboard shortcuts.

chrome/browser/resources/chromeos/keyboard_overlay.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 <include src="keyboard_overlay_data.js"/>
 <include src="keyboard_overlay_accessibility_helper.js"/>
 
 var BASE_KEYBOARD = {
   top: 0,
   left: 0,
   width: 1237,
   height: 514
 };
 
 var BASE_INSTRUCTIONS = {
   top: 194,
   left: 370,
   width: 498,
   height: 142
 };
 
 var MODIFIER_TO_CLASS = {
   'SHIFT': 'modifier-shift',
   'CTRL': 'modifier-ctrl',
-  'ALT': 'modifier-alt'
+  'ALT': 'modifier-alt',
+  'SEARCH': 'modifier-search'
 };
 
 var IDENTIFIER_TO_CLASS = {
   '2A': 'is-shift',
   '1D': 'is-ctrl',
-  '38': 'is-alt'
+  '38': 'is-alt',
+  'E0 5B': 'is-search'
 };
 
 var LABEL_TO_IDENTIFIER = {
   'search': 'E0 5B',
   'ctrl': '1D',
   'alt': '38',
   'caps lock': '3A',
   'disabled': 'DISABLED'
 };
 
@@ skipping 72 matching lines @@
  */
 function getLayouts() {
   return keyboardOverlayData['layouts'];
 }
 
 /**
  * Returns shortcut data.
  * @return {Object} Keyboard shortcut data.
  */
 function getShortcutData() {
-  return keyboardOverlayData['shortcut'];
+  var data = keyboardOverlayData['shortcut'];
+
+  var searchKeyIsModifier =
+      loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true';
+  if (searchKeyIsModifier) {
+    // TODO(mazda): Clean this up and move these out to the data js.
+    var searchModifierRemoveShortcuts = {
+      'backspace<>ALT': 'keyboardOverlayDelete',
+      'down<>ALT': 'keyboardOverlayPageDown',
+      'down<>ALT<>CTRL': 'keyboardOverlayEnd',
+      'up<>ALT': 'keyboardOverlayPageUp',
+      'up<>ALT<>CTRL': 'keyboardOverlayHome'
+    };
+    var searchModifierAddShortcuts = {
+      '1<>SEARCH': 'keyboardOverlayF1',
+      '2<>SEARCH': 'keyboardOverlayF2',
+      '3<>SEARCH': 'keyboardOverlayF3',
+      '4<>SEARCH': 'keyboardOverlayF4',
+      '5<>SEARCH': 'keyboardOverlayF5',
+      '6<>SEARCH': 'keyboardOverlayF6',
+      '7<>SEARCH': 'keyboardOverlayF7',
+      '8<>SEARCH': 'keyboardOverlayF8',
+      '9<>SEARCH': 'keyboardOverlayF9',
+      '0<>SEARCH': 'keyboardOverlayF10',
+      '-<>SEARCH': 'keyboardOverlayF11',
+      '=<>SEARCH': 'keyboardOverlayF12',
+      'backspace<>SEARCH': 'keyboardOverlayDelete',
+      'down<>SEARCH': 'keyboardOverlayPageDown',
+      'right<>SEARCH': 'keyboardOverlayEnd',
+      'up<>SEARCH': 'keyboardOverlayPageUp',
+      'left<>SEARCH': 'keyboardOverlayHome'
+    };
+
+    for (var key in searchModifierRemoveShortcuts)
+      delete data[key];
+    for (var key in searchModifierAddShortcuts)
+      data[key] = searchModifierAddShortcuts[key];
+  }
+
+  return data;

[mazda, 2012/11/28 21:23:09]

I think it's better to cache the result because getShortcutData is used in
getKeyLabel.

[danakj, 2012/11/28 21:30:38]

Ah, okay. Done!

 }
 
 /**
  * Returns the keyboard overlay ID.
  * @return {string} Keyboard overlay ID.
  */
 function getKeyboardOverlayId() {
   return keyboardOverlayId;
 }
 
@@ skipping 21 matching lines @@
   } else if (n <= 0x10FFFF) {
     n -= 0x10000;
     result += (String.fromCharCode(0xD800 | (n >> 10)) +
                String.fromCharCode(0xDC00 | (n & 0x3FF)));
   } else {
     console.error('hex2Char error: Code point out of range :' + hex);
   }
   return result;
 }
 
+var searchIsPressed = false;
+
 /**
  * Returns a list of modifiers from the key event.
  * @param {Event} e The key event.
  * @return {Array} List of modifiers based on key event.
  */
 function getModifiers(e) {
   if (!e)
     return [];
 
   var isKeyDown = (e.type == 'keydown');
   var keyCodeToModifier = {
     16: 'SHIFT',
     17: 'CTRL',
     18: 'ALT',
+    91: 'SEARCH',
   };
   var modifierWithKeyCode = keyCodeToModifier[e.keyCode];
-  var isPressed = {'SHIFT': e.shiftKey, 'CTRL': e.ctrlKey, 'ALT': e.altKey};
-  // if e.keyCode is one of Shift, Ctrl and Alt, isPressed should
-  // be changed because the key currently pressed
-  // does not affect the values of e.shiftKey, e.ctrlKey and e.altKey
+  var isPressed = {
+      'SHIFT': e.shiftKey,
+      'CTRL': e.ctrlKey,
+      'ALT': e.altKey,
+      'SEARCH': searchIsPressed
+  };
   if (modifierWithKeyCode)
     isPressed[modifierWithKeyCode] = isKeyDown;
 
+  searchIsPressed = isPressed['SEARCH'];
+
   // make the result array
-  return ['SHIFT', 'CTRL', 'ALT'].filter(
+  return ['SHIFT', 'CTRL', 'ALT', 'SEARCH'].filter(
       function(modifier) {
         return isPressed[modifier];
       }).sort();
 }
 
 /**
  * Returns an ID of the key.
  * @param {string} identifier Key identifier.
  * @param {number} i Key number.
  * @return {string} Key ID.
@@ skipping 40 matching lines @@
  * @return {Array} List of class names corresponding to specified params.
  */
 function getKeyClasses(identifier, modifiers) {
   var classes = ['keyboard-overlay-key'];
   for (var i = 0; i < modifiers.length; ++i) {
     classes.push(MODIFIER_TO_CLASS[modifiers[i]]);
   }
 
   if ((identifier == '2A' && contains(modifiers, 'SHIFT')) ||
       (identifier == '1D' && contains(modifiers, 'CTRL')) ||
-      (identifier == '38' && contains(modifiers, 'ALT'))) {
+      (identifier == '38' && contains(modifiers, 'ALT')) ||
+      (identifier == 'E0 5B' && contains(modifiers, 'SEARCH'))) {
     classes.push('pressed');
     classes.push(IDENTIFIER_TO_CLASS[identifier]);
   }
   return classes;
 }
 
 /**
  * Returns true if a character is a ASCII character.
  * @param {string} c A character to be checked.
  * @return {boolean} True if the character is an ASCII character.
@@ skipping 246 matching lines @@
   instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) *
                             height / BASE_KEYBOARD.height + minY) + 'px';
   instructions.style.width = (width * BASE_INSTRUCTIONS.width /
                               BASE_KEYBOARD.width) + 'px';
   instructions.style.height = (height * BASE_INSTRUCTIONS.height /
                                BASE_KEYBOARD.height) + 'px';
 
   var instructionsText = document.createElement('div');
   instructionsText.id = 'instructions-text';
   instructionsText.className = 'keyboard-overlay-instructions-text';
-  instructionsText.innerHTML =
-      loadTimeData.getString('keyboardOverlayInstructions');
+  var searchKeyIsModifier =
+      loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true';
+  if (searchKeyIsModifier) {
+    instructionsText.innerHTML =
+        loadTimeData.getString('keyboardOverlayInstructionsWithSearch');
+  } else {
+    instructionsText.innerHTML =
+        loadTimeData.getString('keyboardOverlayInstructions');
+  }
   instructions.appendChild(instructionsText);
   var instructionsHideText = document.createElement('div');
   instructionsHideText.id = 'instructions-hide-text';
   instructionsHideText.className = 'keyboard-overlay-instructions-hide-text';
   instructionsHideText.innerHTML =
       loadTimeData.getString('keyboardOverlayInstructionsHide');
   instructions.appendChild(instructionsHideText);
   var learnMoreLinkText = document.createElement('div');
   learnMoreLinkText.id = 'learn-more-text';
   learnMoreLinkText.className = 'keyboard-overlay-learn-more-text';
@@ skipping 69 matching lines @@
  * Handles click events of the learn more link.
  * @param {Event} e Mouse click event.
  */
 function learnMoreClicked(e) {
   chrome.send('openLearnMorePage');
   chrome.send('DialogClose');
   e.preventDefault();
 }
 
 document.addEventListener('DOMContentLoaded', init);