DevTools: Prevent browser behavior of shortcuts in extension panels

This patch calls preventDefault on all events that we forward from
extension panels into devtools. This would cancel too many events,
so a list of devtools global keyboard shortcuts are passed into the
extension.

Bug: 682068
Change-Id: Ide557dafed759e20dfc6698d8cdc33f932acbe83
Reviewed-on: https://chromium-review.googlesource.com/1159467Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580011}

third_party/WebKit/LayoutTests/http/tests/devtools/extensions/extensions-panel.js

@@ -294,7 +294,7 @@
         testPanel.onShown.removeListener(onPanelShown);
         output("Panel shown, now toggling console...");
         panelWindow.addEventListener("resize", onPanelResized);
-        dispatchKeydownEvent({ key: "Escape" });
+        dispatchKeydownEvent({ key: "Escape", keyCode: 27 });
       }
       function onPanelResized() {
         panelWindow.removeEventListener("resize", onPanelResized);

third_party/blink/renderer/devtools/front_end/extensions/ExtensionAPI.js

@@ -89,11 +89,13 @@ function defineCommonExtensionSymbols(apiPrivate) {
  * @param {!ExtensionDescriptor} extensionInfo
  * @param {string} inspectedTabId
  * @param {string} themeName
+ * @param {!Array<number>} keysToForward
  * @param {number} injectedScriptId
  * @param {function(!Object, !Object)} testHook
  * @suppressGlobalPropertiesCheck
  */
-function injectedExtensionAPI(extensionInfo, inspectedTabId, themeName, testHook, injectedScriptId) {
+function injectedExtensionAPI(extensionInfo, inspectedTabId, themeName, keysToForward, testHook, injectedScriptId) {
+  const keysToForwardSet = new Set(keysToForward);
   const chrome = window.chrome || {};
   const devtools_descriptor = Object.getOwnPropertyDescriptor(chrome, 'devtools');
   if (devtools_descriptor)
@@ -637,14 +639,26 @@ function injectedExtensionAPI(extensionInfo, inspectedTabId, themeName, testHook
   let forwardTimer = null;
 
   function forwardKeyboardEvent(event) {
+    let modifiers = 0;
+    if (event.shiftKey)
+      modifiers |= 1;
+    if (event.ctrlKey)
+      modifiers |= 2;
+    if (event.altKey)
+      modifiers |= 4;
+    if (event.metaKey)
+      modifiers |= 8;
+    const num = (event.keyCode & 255) | (modifiers << 8);
     // We only care about global hotkeys, not about random text
-    if (!event.ctrlKey && !event.altKey && !event.metaKey && !/^F\d+$/.test(event.key) && event.key !== 'Escape')
+    if (!keysToForwardSet.has(num))
       return;
+    event.preventDefault();
     const requestPayload = {
       eventType: event.type,
       ctrlKey: event.ctrlKey,
       altKey: event.altKey,
       metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
       keyIdentifier: event.keyIdentifier,
       key: event.key,
       code: event.code,
@@ -795,11 +809,12 @@ function injectedExtensionAPI(extensionInfo, inspectedTabId, themeName, testHook
  * @param {!ExtensionDescriptor} extensionInfo
  * @param {string} inspectedTabId
  * @param {string} themeName
+ * @param {!Array<number>} keysToForward
  * @param {function(!Object, !Object)|undefined} testHook
  * @return {string}
  */
-function buildExtensionAPIInjectedScript(extensionInfo, inspectedTabId, themeName, testHook) {
-  const argumentsJSON = [extensionInfo, inspectedTabId || null, themeName].map(_ => JSON.stringify(_)).join(',');
+function buildExtensionAPIInjectedScript(extensionInfo, inspectedTabId, themeName, keysToForward, testHook) {
+  const argumentsJSON = [extensionInfo, inspectedTabId || null, themeName, keysToForward].map(_ => JSON.stringify(_)).join(',');
   if (!testHook)
     testHook = () => {};
   return '(function(injectedScriptId){ ' + defineCommonExtensionSymbols.toString() + ';' +

third_party/blink/renderer/devtools/front_end/extensions/ExtensionServer.js

@@ -560,8 +560,6 @@ Extensions.ExtensionServer = class extends Common.Object {
      * @suppressGlobalPropertiesCheck
      */
     function handleEventEntry(entry) {
-      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.
       const event = new window.KeyboardEvent(entry.eventType, {
@@ -703,6 +701,7 @@ Extensions.ExtensionServer = class extends Common.Object {
         // See ExtensionAPI.js for details.
         const injectedAPI = buildExtensionAPIInjectedScript(
             extensionInfo, this._inspectedTabId, UI.themeSupport.themeName(),
+            UI.shortcutRegistry.globalShortcutKeys(),
             Extensions.extensionServer['_extensionAPITestHook']);
         InspectorFrontendHost.setInjectedScriptForOrigin(extensionOrigin, injectedAPI);
         this._registeredExtensions[extensionOrigin] = {name: name};

third_party/blink/renderer/devtools/front_end/main/module.json

@@ -40,7 +40,7 @@
             "type": "action",
             "category": "Drawer",
             "actionId": "main.toggle-drawer",
-            "className": "UI.InspectorView.DrawerToggleActionDelegate",
+            "className": "UI.InspectorView.ActionDelegate",
             "order": 101,
             "title": "Toggle drawer",
             "bindings": [
@@ -49,6 +49,36 @@
                 }
             ]
         },
+        {
+            "type": "action",
+            "actionId": "main.next-tab",
+            "className": "UI.InspectorView.ActionDelegate",
+            "bindings": [
+                {
+                    "platform": "windows,linux",
+                    "shortcut": "Ctrl+]"
+                },
+                {
+                    "platform": "mac",
+                    "shortcut": "Meta+]"
+                }
+            ]
+        },
+        {
+            "type": "action",
+            "actionId": "main.previous-tab",
+            "className": "UI.InspectorView.ActionDelegate",
+            "bindings": [
+                {
+                    "platform": "windows,linux",
+                    "shortcut": "Ctrl+["
+                },
+                {
+                    "platform": "mac",
+                    "shortcut": "Meta+["
+                }
+            ]
+        },
         {
             "type": "action",
             "actionId": "main.debug-reload",

third_party/blink/renderer/devtools/front_end/ui/InspectorView.js

@@ -284,16 +284,6 @@ UI.InspectorView = class extends UI.VBox {
         }
       }
     }
-
-    if (event.key === '[') {
-      this._tabbedPane.selectPrevTab();
-      event.consume(true);
-    }
-
-    if (event.key === ']') {
-      this._tabbedPane.selectNextTab();
-      event.consume(true);
-    }
   }
 
   /**
@@ -358,7 +348,7 @@ UI.inspectorView;
  * @implements {UI.ActionDelegate}
  * @unrestricted
  */
-UI.InspectorView.DrawerToggleActionDelegate = class {
+UI.InspectorView.ActionDelegate = class {
   /**
    * @override
    * @param {!UI.Context} context
@@ -366,10 +356,20 @@ UI.InspectorView.DrawerToggleActionDelegate = class {
    * @return {boolean}
    */
   handleAction(context, actionId) {
-    if (UI.inspectorView.drawerVisible())
-      UI.inspectorView._closeDrawer();
-    else
-      UI.inspectorView._showDrawer(true);
-    return true;
+    switch (actionId) {
+      case 'main.toggle-drawer':
+        if (UI.inspectorView.drawerVisible())
+          UI.inspectorView._closeDrawer();
+        else
+          UI.inspectorView._showDrawer(true);
+        return true;
+      case 'main.next-tab':
+        UI.inspectorView._tabbedPane.selectNextTab();
+        return true;
+      case 'main.previous-tab':
+        UI.inspectorView._tabbedPane.selectPrevTab();
+        return true;
+    }
+    return false;
   }
 };

third_party/blink/renderer/devtools/front_end/ui/ShortcutRegistry.js

@@ -34,6 +34,20 @@ UI.ShortcutRegistry = class {
     return this._defaultKeyToActions.get(String(key));
   }
 
+  /**
+   * @return {!Array<number>}
+   */
+  globalShortcutKeys() {
+    const keys = [];
+    for (const key of this._defaultKeyToActions.keysArray()) {
+      const actions = this._defaultKeyToActions.get(key).valuesArray();
+      const applicableActions = this._actionRegistry.applicableActions(actions, new UI.Context());
+      if (applicableActions.length)
+        keys.push(Number(key));
+    }
+    return keys;
+  }
+
   /**
    * @param {string} actionId
    * @return {!Array.<!UI.KeyboardShortcut.Descriptor>}