Eradicate keyIndentifier from devtools/*

keyIdentifier is going to be deprecated; we need to stop using it.

No functional changes intended. A few instances remain with respect
to extensions and keyIdentifier. Those need to be handled so that
we don't break existing extensions.

BUG=607349

Review-Url: https://codereview.chromium.org/2033403005
Cr-Commit-Position: refs/heads/master@{#401423}

front_end/Tests.js

@@ -1103,11 +1103,9 @@ TestSuite.prototype._waitForTargets = function(n, callback)
 /**
  * Key event with given key identifier.
  */
-TestSuite.createKeyEvent = function(keyIdentifier)
+TestSuite.createKeyEvent = function(key)
 {
-    var evt = document.createEvent("KeyboardEvent");
-    evt.initKeyboardEvent("keydown", true /* can bubble */, true /* can cancel */, null /* view */, keyIdentifier, "");
-    return evt;
+    return new KeyboardEvent("keydown", {bubbles: true, cancelable:true, key: key});
 };
 
 window.uiTests = new TestSuite(window.domAutomationController);

front_end/components/ObjectPropertiesSection.js

@@ -425,7 +425,7 @@ WebInspector.ObjectPropertyTreeElement.prototype = {
             this._editingCommitted(originalContent);
             return;
         }
-        if (event.keyIdentifier === "U+001B") { // Esc
+        if (event.key === "Escape") {
             event.consume();
             this._editingCancelled();
             return;

front_end/components_lazy/FilmStripView.js

@@ -264,15 +264,15 @@ WebInspector.FilmStripView.Dialog.prototype = {
      */
     _keyDown: function(event)
     {
-        switch (event.keyIdentifier) {
-        case "Left":
+        switch (event.key) {
+        case "ArrowLeft":
             if (WebInspector.isMac() && event.metaKey)
                 this._onFirstFrame();
             else
                 this._onPrevFrame();
             break;
 
-        case "Right":
+        case "ArrowRight":
             if (WebInspector.isMac() && event.metaKey)
                 this._onLastFrame();
             else

front_end/devices/DevicesView.js

@@ -520,7 +520,7 @@ WebInspector.DevicesView.DeviceView.prototype = {
          */
         function newTabKeyDown(event)
         {
-            if (event.keyIdentifier === "Enter") {
+            if (event.key === "Enter") {
                 event.consume(true);
                 openNewTab();
             }

front_end/devtools.js

@@ -229,10 +229,11 @@ DevToolsAPIImpl.prototype = {
     },
 
     /**
-     * @param {{type: string, keyIdentifier: string, keyCode: number, modifiers: number}} event
+     * @param {{type: string, key: string, code: string, keyCode: number, modifiers: number}} event
      */
     keyEventUnhandled: function(event)
     {
+        event.keyIdentifier = keyCodeToKeyIdentifier(event.keyCode);
         this._dispatchOnInspectorFrontendAPI("keyEventUnhandled", [event]);
     },
 
@@ -1002,6 +1003,78 @@ function sanitizeRemoteFrontendUrl()
     }
 }
 
+var staticKeyIdentifiers = new Map([
+    [0x12, "Alt"],
+    [0x11, "Control"],
+    [0x10, "Shift"],
+    [0x14, "CapsLock"],
+    [0x5b, "Win"],
+    [0x5c, "Win"],
+    [0x0c, "Clear"],
+    [0x28, "Down"],
+    [0x23, "End"],
+    [0x0a, "Enter"],
+    [0x0d, "Enter"],
+    [0x2b, "Execute"],
+    [0x70, "F1"],
+    [0x71, "F2"],
+    [0x72, "F3"],
+    [0x73, "F4"],
+    [0x74, "F5"],
+    [0x75, "F6"],
+    [0x76, "F7"],
+    [0x77, "F8"],
+    [0x78, "F9"],
+    [0x79, "F10"],
+    [0x7a, "F11"],
+    [0x7b, "F12"],
+    [0x7c, "F13"],
+    [0x7d, "F14"],
+    [0x7e, "F15"],
+    [0x7f, "F16"],
+    [0x80, "F17"],
+    [0x81, "F18"],
+    [0x82, "F19"],
+    [0x83, "F20"],
+    [0x84, "F21"],
+    [0x85, "F22"],
+    [0x86, "F23"],
+    [0x87, "F24"],
+    [0x2f, "Help"],
+    [0x24, "Home"],
+    [0x2d, "Insert"],
+    [0x25, "Left"],
+    [0x22, "PageDown"],
+    [0x21, "PageUp"],
+    [0x13, "Pause"],
+    [0x2c, "PrintScreen"],
+    [0x27, "Right"],
+    [0x91, "Scroll"],
+    [0x29, "Select"],
+    [0x26, "Up"],
+    [0x2e, "U+007F"], // Standard says that DEL becomes U+007F.
+    [0xb0, "MediaNextTrack"],
+    [0xb1, "MediaPreviousTrack"],
+    [0xb2, "MediaStop"],
+    [0xb3, "MediaPlayPause"],
+    [0xad, "VolumeMute"],
+    [0xae, "VolumeDown"],
+    [0xaf, "VolumeUp"],
+]);
+
+function keyCodeToKeyIdentifier(keyCode)
+{
+    var result = staticKeyIdentifiers.get(keyCode);
+    if (result !== undefined)
+        return result;
+    result = "U+";
+    var hexString = keyCode.toString(16).toUpperCase();
+    for (var i = hexString.length; i < 4; ++i)
+        result += "0";
+    result += hexString;
+    return result;
+}
+
 /**
  * @suppressGlobalPropertiesCheck
  */
@@ -1012,6 +1085,16 @@ function installBackwardsCompatibility()
     if (window.location.search.indexOf("remoteFrontend") === -1)
         return;
 
+    // Support for legacy (<M53) frontends.
+    if (!window.KeyboardEvent.prototype.hasOwnProperty("keyIdentifier")) {
+        Object.defineProperty(window.KeyboardEvent.prototype, "keyIdentifier", {
+            get: function()
+            {
+                return keyCodeToKeyIdentifier(this.keyCode);
+            }
+        });
+    }
+
     // Support for legacy (<M50) frontends.
     installObjectObserve();
 

front_end/elements/ElementsPanel.js

@@ -759,14 +759,14 @@ WebInspector.ElementsPanel.prototype = {
          */
         function handleUndoRedo(treeOutline)
         {
-            if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && event.keyIdentifier === "U+005A") { // Z key
+            if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && !event.shiftKey && (event.key === "Z" || event.key === "z")) { // Z key
                 treeOutline.domModel().undo();
                 event.handled = true;
                 return;
             }
 
-            var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && event.keyIdentifier === "U+005A" : // Z key
-                                                   event.ctrlKey && event.keyIdentifier === "U+0059"; // Y key
+            var isRedoKey = WebInspector.isMac() ? event.metaKey && event.shiftKey && (event.key === "Z" || event.key === "z") : // Z key
+                                                   event.ctrlKey && (event.key === "Y" || event.key === "y"); // Y key
             if (isRedoKey) {
                 treeOutline.domModel().redo();
                 event.handled = true;

front_end/elements/ElementsTreeOutline.js

@@ -884,12 +884,12 @@ WebInspector.ElementsTreeOutline.prototype = {
             return;
 
         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && node.parentNode) {
-            if (event.keyIdentifier === "Up" && node.previousSibling) {
+            if (event.key === "ArrowUp" && node.previousSibling) {
                 node.moveTo(node.parentNode, node.previousSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
                 event.handled = true;
                 return;
             }
-            if (event.keyIdentifier === "Down" && node.nextSibling) {
+            if (event.key === "ArrowDown" && node.nextSibling) {
                 node.moveTo(node.parentNode, node.nextSibling.nextSibling, this.selectNodeAfterEdit.bind(this, treeElement.expanded));
                 event.handled = true;
                 return;

front_end/elements/Spectrum.js

@@ -837,8 +837,8 @@ WebInspector.Spectrum.prototype = {
         }
 
         var inputElement = /** @type {!Element} */(event.currentTarget);
-        var arrowKeyOrMouseWheelEvent = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down" || event.type === "mousewheel");
-        var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
+        var arrowKeyOrMouseWheelEvent = (event.key === "ArrowUp" || event.key === "ArrowDown" || event.type === "mousewheel");
+        var pageKeyPressed = (event.key === "PageUp" || event.key === "PageDown");
         if (arrowKeyOrMouseWheelEvent || pageKeyPressed) {
             var newValue = WebInspector.createReplacementString(inputElement.value, event);
             if (newValue) {

front_end/elements/StylesPopoverHelper.js

@@ -119,12 +119,12 @@ WebInspector.StylesPopoverHelper.prototype = {
      */
     _onKeyDown: function(event)
     {
-        if (event.keyIdentifier === "Enter") {
+        if (event.key === "Enter") {
             this.hide(true);
             event.consume(true);
             return;
         }
-        if (event.keyIdentifier === "U+001B") { // Escape key
+        if (event.key === "Escape") {
             this.hide(false);
             event.consume(true);
         }

front_end/elements/StylesSidebarPane.js

@@ -631,8 +631,7 @@ WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholde
      */
     function keydownHandler(event)
     {
-        var Esc = "U+001B";
-        if (event.keyIdentifier !== Esc || !input.value)
+        if (event.key !== "Escape" || !input.value)
             return;
         event.consume(true);
         input.value = "";
@@ -2473,7 +2472,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (isEnterKey(event)) {
             event.preventDefault();
             result = "forward";
-        } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
+        } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.key === "Escape")
             result = "cancel";
         else if (!context.isEditingName && this._newProperty && event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) {
             // For a new property, when Backspace is pressed at the beginning of new property value, move back to the property name.
@@ -2482,7 +2481,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
                 event.preventDefault();
                 result = "backward";
             }
-        } else if (event.keyIdentifier === "U+0009") { // Tab key.
+        } else if (event.key === "Tab") {
             result = event.shiftKey ? "backward" : "forward";
             event.preventDefault();
         }
@@ -2887,9 +2886,9 @@ WebInspector.StylesSidebarPane.CSSPropertyPrompt.prototype = {
      */
     onKeyDown: function(event)
     {
-        switch (event.keyIdentifier) {
-        case "Up":
-        case "Down":
+        switch (event.key) {
+        case "ArrowUp":
+        case "ArrowDown":
         case "PageUp":
         case "PageDown":
             if (this._handleNameOrValueUpDown(event)) {

front_end/extensions/ExtensionAPI.js

@@ -813,16 +813,17 @@ var forwardTimer = null;
 
 function forwardKeyboardEvent(event)
 {
-    const Esc = "U+001B";
     // We only care about global hotkeys, not about random text
-    if (!event.ctrlKey && !event.altKey && !event.metaKey && !/^F\d+$/.test(event.keyIdentifier) && event.keyIdentifier !== Esc)
+    if (!event.ctrlKey && !event.altKey && !event.metaKey && !/^F\d+$/.test(event.key) && event.key !== "Escape")
         return;
     var requestPayload = {
         eventType: event.type,
         ctrlKey: event.ctrlKey,
         altKey: event.altKey,
         metaKey: event.metaKey,
         keyIdentifier: event.keyIdentifier,
+        key: event.key,
+        code: event.code,
         location: event.location,
         keyCode: event.keyCode
     };

front_end/extensions/ExtensionServer.js

@@ -621,7 +621,6 @@ WebInspector.ExtensionServer.prototype = {
 
     _onForwardKeyboardEvent: function(message)
     {
-        const Esc = "U+001B";
         message.entries.forEach(handleEventEntry);
 
         /**
@@ -630,12 +629,15 @@ WebInspector.ExtensionServer.prototype = {
          */
         function handleEventEntry(entry)
         {
-            if (!entry.ctrlKey && !entry.altKey && !entry.metaKey && !/^F\d+$/.test(entry.keyIdentifier) && entry.keyIdentifier !== Esc)
+            if (!entry.ctrlKey && !entry.altKey && !entry.metaKey && !/^F\d+$/.test(entry.key) && entry.key !== "Escape")
                 return;
             // Fool around closure compiler -- it has its own notion of both KeyboardEvent constructor
             // and initKeyboardEvent methods and overriding these in externs.js does not have effect.
             var event = new window.KeyboardEvent(entry.eventType, {
                 keyIdentifier: entry.keyIdentifier,
+                key: entry.key,
+                code: entry.code,
+                keyCode: entry.keyCode,
                 location: entry.location,
                 ctrlKey: entry.ctrlKey,
                 altKey: entry.altKey,

front_end/network/BlockedURLsPane.js

@@ -118,7 +118,7 @@ WebInspector.BlockedURLsPane.prototype = {
             if (isEnterKey(event)) {
                 event.consume();
                 commit.call(this);
-            } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B") {
+            } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.key === "Escape") {
                 event.consume();
                 finish.call(this);
                 this._update();

front_end/platform/DOMExtension.js

@@ -957,7 +957,7 @@ Document.prototype.deepElementFromPoint = function(x, y)
 function isEnterKey(event)
 {
     // Check if in IME.
-    return event.keyCode !== 229 && event.keyIdentifier === "Enter";
+    return event.keyCode !== 229 && event.key === "Enter";
 }
 
 /**

front_end/profiler/ProfilesPanel.js

@@ -505,9 +505,9 @@ WebInspector.ProfilesPanel.prototype = {
     _onKeyDown: function(event)
     {
         var handled = false;
-        if (event.keyIdentifier === "Down" && !event.altKey)
+        if (event.key === "ArrowDown" && !event.altKey)
             handled = this._sidebarTree.selectNext();
-        else if (event.keyIdentifier === "Up" && !event.altKey)
+        else if (event.key === "ArrowUp" && !event.altKey)
             handled = this._sidebarTree.selectPrevious();
         if (handled)
             event.consume(true);

front_end/screencast/ScreencastView.js

@@ -746,7 +746,7 @@ WebInspector.ScreencastView.prototype = {
 
     _navigationUrlKeyUp: function(event)
     {
-        if (event.keyIdentifier !== "Enter")
+        if (event.key !== "Enter")
             return;
         var url = this._navigationUrl.value;
         if (!url)

front_end/sources/CallStackSidebarPane.js

@@ -425,7 +425,7 @@ WebInspector.CallStackSidebarPane.prototype = {
     {
         if (event.altKey || event.shiftKey || event.metaKey || event.ctrlKey)
             return;
-        if (event.keyIdentifier === "Up" && this._selectPreviousCallFrameOnStack() || event.keyIdentifier === "Down" && this._selectNextCallFrameOnStack())
+        if (event.key === "ArrowUp" && this._selectPreviousCallFrameOnStack() || event.key === "ArrowDown" && this._selectNextCallFrameOnStack())
             event.consume(true);
     },
 

front_end/sources/JavaScriptSourceFrame.js

@@ -643,7 +643,7 @@ WebInspector.JavaScriptSourceFrame.prototype = {
 
     _onKeyDown: function(event)
     {
-        if (event.keyIdentifier === "U+001B") { // Escape key
+        if (event.key === "Escape") {
             if (this._popoverHelper.isPopoverVisible()) {
                 this._popoverHelper.hidePopover();
                 event.consume();

front_end/ui/FilterBar.js

@@ -417,13 +417,13 @@ WebInspector.TextFilterUI.prototype = {
     _onInputKeyDown: function(event)
     {
         var handled = false;
-        if (event.keyIdentifier === "U+0008") { // Backspace
+        if (event.key === "Backspace") {
             this._suppressSuggestion = true;
         } else if (this._suggestBox.visible()) {
-            if (event.keyIdentifier === "U+001B") { // Esc
+            if (event.key === "Escape") {
                 this._cancelSuggestion();
                 handled = true;
-            } else if (event.keyIdentifier === "U+0009") { // Tab
+            } else if (event.key === "Tab") {
                 this._suggestBox.acceptSuggestion();
                 this._valueChanged(true);
                 handled = true;

front_end/ui/ForwardedInputEventHandler.js

@@ -18,15 +18,15 @@ WebInspector.ForwardedInputEventHandler.prototype = {
     {
         var data = event.data;
         var type = /** @type {string} */ (data.type);
-        var keyIdentifier = /** @type {string} */ (data.keyIdentifier);
+        var key = /** @type {string} */ (data.key);
         var keyCode = /** @type {number} */ (data.keyCode);
         var modifiers =/** @type {number} */ (data.modifiers);
 
         if (type !== "keydown")
             return;
 
         WebInspector.context.setFlavor(WebInspector.ShortcutRegistry.ForwardedShortcut, WebInspector.ShortcutRegistry.ForwardedShortcut.instance);
-        WebInspector.shortcutRegistry.handleKey(WebInspector.KeyboardShortcut.makeKey(keyCode, modifiers), keyIdentifier);
+        WebInspector.shortcutRegistry.handleKey(WebInspector.KeyboardShortcut.makeKey(keyCode, modifiers), key);
         WebInspector.context.setFlavor(WebInspector.ShortcutRegistry.ForwardedShortcut, null);
     }
 }