Bug 1781034 - Add a shortcut to open the browser toolbox to the layout debugger. r=layout-reviewers,devtools-reviewers,nchevobbe,dshin

Depends on D152628

Differential Revision: https://phabricator.services.mozilla.com/D152629

layout/tools/layout-debug/ui/content/layoutdebug.js

@@ -20,6 +20,16 @@ const { Preferences } = ChromeUtils.import(
   "resource://gre/modules/Preferences.jsm"
 );
 
+var { loader } = ChromeUtils.import(
+  "resource://devtools/shared/loader/Loader.jsm"
+);
+
+loader.lazyImporter(
+  this,
+  "BrowserToolboxLauncher",
+  "resource://devtools/client/framework/browser-toolbox/Launcher.jsm"
+);
+
 const FEATURES = {
   paintDumping: "nglayout.debug.paint_dumping",
   invalidateDumping: "nglayout.debug.invalidate_dumping",
@@ -101,6 +111,10 @@ class Debugger {
     this._sendMessage("setPagedMode", v);
   }
 
+  openDevTools() {
+    BrowserToolboxLauncher.init();
+  }
+
   async _sendMessage(name, arg) {
     await this._sendMessageTo(gBrowser.browsingContext, name, arg);
   }

layout/tools/layout-debug/ui/content/layoutdebug.xhtml

@@ -45,6 +45,7 @@
     <command id="cmd_dumpFrames" oncommand="gDebugger.dumpFrames();"/>
     <command id="cmd_dumpFramesInCSSPixels" oncommand="gDebugger.dumpFramesInCSSPixels();"/>
     <command id="cmd_dumpTextRuns" oncommand="gDebugger.dumpTextRuns();"/>
+    <command id="cmd_openDevTools" oncommand="gDebugger.openDevTools();"/>
   </commandset>
 
   <keyset id="tasksKeys">
@@ -56,6 +57,7 @@
     <key id="key_dumpFrames" key="F" modifiers="accel" command="cmd_dumpFrames"/>
     <key id="key_dumpFramesInCSSPixels" key="P" modifiers="accel" command="cmd_dumpFramesInCSSPixels"/>
     <key id="key_dumpTextRuns" key="T" modifiers="accel" command="cmd_dumpTextRuns"/>
+    <key id="key_devTools" keycode="VK_F12" command="cmd_openDevTools"/>
   </keyset>
 
   <vbox flex="1">