devtools/client/definitions.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const osString = Services.appinfo.OS;
   8
   9 // Panels
  10 loader.lazyGetter(
  11   this,
  12   "OptionsPanel",
  13   () =>
  14     require("resource://devtools/client/framework/toolbox-options.js")
  15       .OptionsPanel
  16 );
  17 loader.lazyGetter(
  18   this,
  19   "InspectorPanel",
  20   () => require("resource://devtools/client/inspector/panel.js").InspectorPanel
  21 );
  22 loader.lazyGetter(
  23   this,
  24   "WebConsolePanel",
  25   () =>
  26     require("resource://devtools/client/webconsole/panel.js").WebConsolePanel
  27 );
  28 loader.lazyGetter(
  29   this,
  30   "DebuggerPanel",
  31   () => require("resource://devtools/client/debugger/panel.js").DebuggerPanel
  32 );
  33 loader.lazyGetter(
  34   this,
  35   "StyleEditorPanel",
  36   () =>
  37     require("resource://devtools/client/styleeditor/panel.js").StyleEditorPanel
  38 );
  39 loader.lazyGetter(
  40   this,
  41   "MemoryPanel",
  42   () => require("resource://devtools/client/memory/panel.js").MemoryPanel
  43 );
  44 loader.lazyGetter(
  45   this,
  46   "NewPerformancePanel",
  47   () =>
  48     require("resource://devtools/client/performance-new/panel/panel.js")
  49       .PerformancePanel
  50 );
  51 loader.lazyGetter(
  52   this,
  53   "NetMonitorPanel",
  54   () =>
  55     require("resource://devtools/client/netmonitor/panel.js").NetMonitorPanel
  56 );
  57 loader.lazyGetter(
  58   this,
  59   "StoragePanel",
  60   () => require("resource://devtools/client/storage/panel.js").StoragePanel
  61 );
  62 loader.lazyGetter(
  63   this,
  64   "DomPanel",
  65   () => require("resource://devtools/client/dom/panel.js").DomPanel
  66 );
  67 loader.lazyGetter(
  68   this,
  69   "AccessibilityPanel",
  70   () =>
  71     require("resource://devtools/client/accessibility/panel.js")
  72       .AccessibilityPanel
  73 );
  74 loader.lazyGetter(
  75   this,
  76   "ApplicationPanel",
  77   () =>
  78     require("resource://devtools/client/application/panel.js").ApplicationPanel
  79 );
  80
  81 // Other dependencies
  82 loader.lazyRequireGetter(
  83   this,
  84   "ResponsiveUIManager",
  85   "resource://devtools/client/responsive/manager.js"
  86 );
  87 loader.lazyRequireGetter(
  88   this,
  89   "TRACER_LOG_METHODS",
  90   "resource://devtools/shared/specs/tracer.js",
  91   true
  92 );
  93
  94 const lazy = {};
  95 ChromeUtils.defineESModuleGetters(lazy, {
  96   AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
  97 });
  98 loader.lazyRequireGetter(
  99   this,
 100   "DevToolsExperimentalPrefs",
 101   "resource://devtools/client/devtools-experimental-prefs.js"
 102 );
 103 loader.lazyRequireGetter(
 104   this,
 105   "captureAndSaveScreenshot",
 106   "resource://devtools/client/shared/screenshot.js",
 107   true
 108 );
 109 loader.lazyRequireGetter(
 110   this,
 111   "Menu",
 112   "resource://devtools/client/framework/menu.js"
 113 );
 114 loader.lazyRequireGetter(
 115   this,
 116   "MenuItem",
 117   "resource://devtools/client/framework/menu-item.js"
 118 );
 119
 120 const { TYPES: HIGHLIGHTER_TYPES } = ChromeUtils.importESModule(
 121   "resource://devtools/shared/highlighters.mjs"
 122 );
 123
 124 const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
 125 const L10N = new LocalizationHelper(
 126   "devtools/client/locales/startup.properties"
 127 );
 128 const CommandKeys = new Localization(
 129   ["devtools/startup/key-shortcuts.ftl"],
 130   true
 131 );
 132
 133 var Tools = {};
 134 exports.Tools = Tools;
 135
 136 // Definitions
 137 Tools.options = {
 138   id: "options",
 139   ordinal: 0,
 140   url: "chrome://devtools/content/framework/toolbox-options.html",
 141   icon: "chrome://devtools/skin/images/settings.svg",
 142   bgTheme: "theme-body",
 143   label: l10n("options.label"),
 144   iconOnly: true,
 145   panelLabel: l10n("options.panelLabel"),
 146   tooltip: l10n("optionsButton.tooltip"),
 147   inMenu: false,
 148
 149   isToolSupported() {
 150     return true;
 151   },
 152
 153   build(iframeWindow, toolbox, commands) {
 154     return new OptionsPanel(iframeWindow, toolbox, commands);
 155   },
 156 };
 157
 158 Tools.inspector = {
 159   id: "inspector",
 160   accesskey: l10n("inspector.accesskey"),
 161   ordinal: 1,
 162   icon: "chrome://devtools/skin/images/tool-inspector.svg",
 163   url: "chrome://devtools/content/inspector/index.xhtml",
 164   label: l10n("inspector.label"),
 165   panelLabel: l10n("inspector.panelLabel"),
 166   get tooltip() {
 167     const key = commandkey("devtools-commandkey-inspector");
 168     if (osString == "Darwin") {
 169       const cmdShiftC = "Cmd+Shift+" + key;
 170       const cmdOptC = "Cmd+Opt+" + key;
 171       return l10n("inspector.mac.tooltip", cmdShiftC, cmdOptC);
 172     }
 173
 174     const ctrlShiftC = "Ctrl+Shift+" + key;
 175     return l10n("inspector.tooltip2", ctrlShiftC);
 176   },
 177   inMenu: false,
 178
 179   preventClosingOnKey: true,
 180   // preventRaisingOnKey is used to keep the focus on the content window for shortcuts
 181   // that trigger the element picker.
 182   preventRaisingOnKey: true,
 183   onkey(panel, toolbox) {
 184     if (
 185       Services.prefs.getBoolPref("devtools.command-button-pick.enabled", false)
 186     ) {
 187       toolbox.nodePicker.togglePicker();
 188     }
 189   },
 190
 191   isToolSupported(toolbox) {
 192     return toolbox.target.hasActor("inspector");
 193   },
 194
 195   build(iframeWindow, toolbox, commands) {
 196     return new InspectorPanel(iframeWindow, toolbox, commands);
 197   },
 198 };
 199 Tools.webConsole = {
 200   id: "webconsole",
 201   accesskey: l10n("webConsoleCmd.accesskey"),
 202   ordinal: 2,
 203   url: "chrome://devtools/content/webconsole/index.html",
 204   icon: "chrome://devtools/skin/images/tool-webconsole.svg",
 205   label: l10n("ToolboxTabWebconsole.label"),
 206   menuLabel: l10n("MenuWebconsole.label"),
 207   panelLabel: l10n("ToolboxWebConsole.panelLabel"),
 208   get tooltip() {
 209     return l10n(
 210       "ToolboxWebconsole.tooltip2",
 211       (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
 212         commandkey("devtools-commandkey-webconsole")
 213     );
 214   },
 215   inMenu: false,
 216
 217   preventClosingOnKey: true,
 218   onkey(panel, toolbox) {
 219     if (toolbox.splitConsole) {
 220       return toolbox.focusConsoleInput();
 221     }
 222
 223     panel.focusInput();
 224     return undefined;
 225   },
 226
 227   isToolSupported() {
 228     return true;
 229   },
 230   build(iframeWindow, toolbox, commands) {
 231     return new WebConsolePanel(iframeWindow, toolbox, commands);
 232   },
 233 };
 234
 235 Tools.jsdebugger = {
 236   id: "jsdebugger",
 237   accesskey: l10n("debuggerMenu.accesskey"),
 238   ordinal: 3,
 239   icon: "chrome://devtools/skin/images/tool-debugger.svg",
 240   url: "chrome://devtools/content/debugger/index.html",
 241   label: l10n("ToolboxDebugger.label"),
 242   panelLabel: l10n("ToolboxDebugger.panelLabel"),
 243   get tooltip() {
 244     return l10n(
 245       "ToolboxDebugger.tooltip4",
 246       (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
 247         commandkey("devtools-commandkey-jsdebugger")
 248     );
 249   },
 250   inMenu: false,
 251   isToolSupported() {
 252     return true;
 253   },
 254   build(iframeWindow, toolbox, commands) {
 255     return new DebuggerPanel(iframeWindow, toolbox, commands);
 256   },
 257 };
 258
 259 Tools.styleEditor = {
 260   id: "styleeditor",
 261   ordinal: 5,
 262   visibilityswitch: "devtools.styleeditor.enabled",
 263   accesskey: l10n("open.accesskey"),
 264   icon: "chrome://devtools/skin/images/tool-styleeditor.svg",
 265   url: "chrome://devtools/content/styleeditor/index.xhtml",
 266   label: l10n("ToolboxStyleEditor.label"),
 267   panelLabel: l10n("ToolboxStyleEditor.panelLabel"),
 268   get tooltip() {
 269     return l10n(
 270       "ToolboxStyleEditor.tooltip3",
 271       "Shift+" + functionkey(commandkey("devtools-commandkey-styleeditor"))
 272     );
 273   },
 274   inMenu: false,
 275   isToolSupported(toolbox) {
 276     return toolbox.target.hasActor("styleSheets");
 277   },
 278
 279   build(iframeWindow, toolbox, commands) {
 280     return new StyleEditorPanel(iframeWindow, toolbox, commands);
 281   },
 282 };
 283
 284 Tools.performance = {
 285   id: "performance",
 286   ordinal: 6,
 287   icon: "chrome://devtools/skin/images/tool-profiler.svg",
 288   url: "chrome://devtools/content/performance-new/panel/index.xhtml",
 289   visibilityswitch: "devtools.performance.enabled",
 290   label: l10n("performance.label"),
 291   panelLabel: l10n("performance.panelLabel"),
 292   get tooltip() {
 293     return l10n(
 294       "performance.tooltip",
 295       "Shift+" + functionkey(commandkey("devtools-commandkey-performance"))
 296     );
 297   },
 298   accesskey: l10n("performance.accesskey"),
 299   inMenu: false,
 300   isToolSupported(toolbox) {
 301     // Only use the new performance panel on local tab toolboxes, as they are guaranteed
 302     // to have a performance actor.
 303     // Remote tab toolboxes (eg about:devtools-toolbox from about:debugging) should not
 304     // use the performance panel; about:debugging provides a "Profile performance" button
 305     // which can be used instead, without having the overhead of starting a remote toolbox.
 306     // Also accept the Browser Toolbox, so that we can profile its process via a second browser toolbox.
 307     return (
 308       toolbox.commands.descriptorFront.isLocalTab || toolbox.isBrowserToolbox
 309     );
 310   },
 311   build(frame, toolbox, commands) {
 312     return new NewPerformancePanel(frame, toolbox, commands);
 313   },
 314 };
 315
 316 Tools.memory = {
 317   id: "memory",
 318   ordinal: 7,
 319   icon: "chrome://devtools/skin/images/tool-memory.svg",
 320   url: "chrome://devtools/content/memory/index.xhtml",
 321   visibilityswitch: "devtools.memory.enabled",
 322   label: l10n("memory.label"),
 323   panelLabel: l10n("memory.panelLabel"),
 324   tooltip: l10n("memory.tooltip"),
 325
 326   isToolSupported(toolbox) {
 327     const { descriptorFront } = toolbox.commands;
 328     return (
 329       !descriptorFront.isWebExtensionDescriptor &&
 330       !descriptorFront.isWorkerDescriptor
 331     );
 332   },
 333
 334   build(frame, toolbox, commands) {
 335     return new MemoryPanel(frame, toolbox, commands);
 336   },
 337 };
 338
 339 Tools.netMonitor = {
 340   id: "netmonitor",
 341   accesskey: l10n("netmonitor.accesskey"),
 342   ordinal: 4,
 343   visibilityswitch: "devtools.netmonitor.enabled",
 344   icon: "chrome://devtools/skin/images/tool-network.svg",
 345   url: "chrome://devtools/content/netmonitor/index.html",
 346   label: l10n("netmonitor.label"),
 347   panelLabel: l10n("netmonitor.panelLabel"),
 348   get tooltip() {
 349     return l10n(
 350       "netmonitor.tooltip2",
 351       (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
 352         commandkey("devtools-commandkey-netmonitor")
 353     );
 354   },
 355   inMenu: false,
 356
 357   isToolSupported(toolbox) {
 358     return (
 359       toolbox.target.getTrait("networkMonitor") &&
 360       !toolbox.target.isWorkerTarget
 361     );
 362   },
 363
 364   build(iframeWindow, toolbox, commands) {
 365     return new NetMonitorPanel(iframeWindow, toolbox, commands);
 366   },
 367 };
 368
 369 Tools.storage = {
 370   id: "storage",
 371   ordinal: 8,
 372   accesskey: l10n("storage.accesskey"),
 373   visibilityswitch: "devtools.storage.enabled",
 374   icon: "chrome://devtools/skin/images/tool-storage.svg",
 375   url: "chrome://devtools/content/storage/index.xhtml",
 376   label: l10n("storage.label"),
 377   menuLabel: l10n("storage.menuLabel"),
 378   panelLabel: l10n("storage.panelLabel"),
 379   get tooltip() {
 380     return l10n(
 381       "storage.tooltip3",
 382       "Shift+" + functionkey(commandkey("devtools-commandkey-storage"))
 383     );
 384   },
 385   inMenu: false,
 386
 387   isToolSupported(toolbox) {
 388     const { descriptorFront } = toolbox.commands;
 389     // Storage is available on all contexts debugging a BrowsingContext.
 390     // As of today, this is all but worker toolboxes.
 391     return (
 392       descriptorFront.isTabDescriptor ||
 393       descriptorFront.isParentProcessDescriptor ||
 394       descriptorFront.isWebExtensionDescriptor
 395     );
 396   },
 397
 398   build(iframeWindow, toolbox, commands) {
 399     return new StoragePanel(iframeWindow, toolbox, commands);
 400   },
 401 };
 402
 403 Tools.dom = {
 404   id: "dom",
 405   accesskey: l10n("dom.accesskey"),
 406   ordinal: 11,
 407   visibilityswitch: "devtools.dom.enabled",
 408   icon: "chrome://devtools/skin/images/tool-dom.svg",
 409   url: "chrome://devtools/content/dom/index.html",
 410   label: l10n("dom.label"),
 411   panelLabel: l10n("dom.panelLabel"),
 412   get tooltip() {
 413     return l10n(
 414       "dom.tooltip",
 415       (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") +
 416         commandkey("devtools-commandkey-dom")
 417     );
 418   },
 419   inMenu: false,
 420
 421   isToolSupported() {
 422     return true;
 423   },
 424
 425   build(iframeWindow, toolbox, commands) {
 426     return new DomPanel(iframeWindow, toolbox, commands);
 427   },
 428 };
 429
 430 Tools.accessibility = {
 431   id: "accessibility",
 432   accesskey: l10n("accessibility.accesskey"),
 433   ordinal: 9,
 434   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
 435   visibilityswitch: "devtools.accessibility.enabled",
 436   icon: "chrome://devtools/skin/images/tool-accessibility.svg",
 437   url: "chrome://devtools/content/accessibility/index.html",
 438   label: l10n("accessibility.label"),
 439   panelLabel: l10n("accessibility.panelLabel"),
 440   get tooltip() {
 441     return l10n(
 442       "accessibility.tooltip3",
 443       "Shift+" +
 444         functionkey(commandkey("devtools-commandkey-accessibility-f12"))
 445     );
 446   },
 447   inMenu: false,
 448
 449   isToolSupported(toolbox) {
 450     return toolbox.target.hasActor("accessibility");
 451   },
 452
 453   build(iframeWindow, toolbox, commands) {
 454     return new AccessibilityPanel(iframeWindow, toolbox, commands);
 455   },
 456 };
 457
 458 Tools.application = {
 459   id: "application",
 460   ordinal: 10,
 461   visibilityswitch: "devtools.application.enabled",
 462   icon: "chrome://devtools/skin/images/tool-application.svg",
 463   url: "chrome://devtools/content/application/index.html",
 464   label: l10n("application.label"),
 465   panelLabel: l10n("application.panelLabel"),
 466   tooltip: l10n("application.tooltip"),
 467   inMenu: false,
 468
 469   isToolSupported(toolbox) {
 470     return toolbox.target.hasActor("manifest");
 471   },
 472
 473   build(iframeWindow, toolbox, commands) {
 474     return new ApplicationPanel(iframeWindow, toolbox, commands);
 475   },
 476 };
 477
 478 var defaultTools = [
 479   Tools.options,
 480   Tools.webConsole,
 481   Tools.inspector,
 482   Tools.jsdebugger,
 483   Tools.styleEditor,
 484   Tools.performance,
 485   Tools.netMonitor,
 486   Tools.storage,
 487   Tools.memory,
 488   Tools.dom,
 489   Tools.accessibility,
 490   Tools.application,
 491 ];
 492
 493 exports.defaultTools = defaultTools;
 494
 495 Tools.darkTheme = {
 496   id: "dark",
 497   label: l10n("options.darkTheme.label2"),
 498   ordinal: 1,
 499   stylesheets: ["chrome://devtools/skin/dark-theme.css"],
 500   classList: ["theme-dark"],
 501 };
 502
 503 Tools.lightTheme = {
 504   id: "light",
 505   label: l10n("options.lightTheme.label2"),
 506   ordinal: 2,
 507   stylesheets: ["chrome://devtools/skin/light-theme.css"],
 508   classList: ["theme-light"],
 509 };
 510
 511 exports.defaultThemes = [Tools.darkTheme, Tools.lightTheme];
 512
 513 // List buttons that can be toggled to prevent adding prefs for
 514 // addons that have manually inserted toolbarbuttons into DOM.
 515 // (By default, supported target is only local tab)
 516 exports.ToolboxButtons = [
 517   {
 518     id: "command-button-experimental-prefs",
 519     description: "DevTools Experimental preferences",
 520     isToolSupported: () => !lazy.AppConstants.MOZILLA_OFFICIAL,
 521     onClick: (event, toolbox) => DevToolsExperimentalPrefs.showTooltip(toolbox),
 522     isChecked: () => DevToolsExperimentalPrefs.isAnyPreferenceEnabled(),
 523   },
 524   {
 525     id: "command-button-responsive",
 526     description: l10n(
 527       "toolbox.buttons.responsive",
 528       osString == "Darwin" ? "Cmd+Opt+M" : "Ctrl+Shift+M"
 529     ),
 530     isToolSupported: toolbox => toolbox.commands.descriptorFront.isLocalTab,
 531     onClick(event, toolbox) {
 532       const { localTab } = toolbox.commands.descriptorFront;
 533       const browserWindow = localTab.ownerDocument.defaultView;
 534       ResponsiveUIManager.toggle(browserWindow, localTab, {
 535         trigger: "toolbox",
 536       });
 537     },
 538     isChecked(toolbox) {
 539       const { localTab } = toolbox.commands.descriptorFront;
 540       if (!localTab) {
 541         return false;
 542       }
 543       return ResponsiveUIManager.isActiveForTab(localTab);
 544     },
 545     isToggle: true,
 546     setup(toolbox, onChange) {
 547       ResponsiveUIManager.on("on", onChange);
 548       ResponsiveUIManager.on("off", onChange);
 549     },
 550     teardown(toolbox, onChange) {
 551       ResponsiveUIManager.off("on", onChange);
 552       ResponsiveUIManager.off("off", onChange);
 553     },
 554   },
 555   {
 556     id: "command-button-screenshot",
 557     description: l10n("toolbox.buttons.screenshot"),
 558     isToolSupported: toolbox => {
 559       return (
 560         // @backward-compat { version 87 } We need to check for the screenshot actor as well
 561         // when connecting to older server that does not have the screenshotContentActor
 562         toolbox.target.hasActor("screenshotContent") ||
 563         toolbox.target.hasActor("screenshot")
 564       );
 565     },
 566     async onClick(event, toolbox) {
 567       // Special case for screenshot button to check for clipboard preference
 568       const clipboardEnabled = Services.prefs.getBoolPref(
 569         "devtools.screenshot.clipboard.enabled"
 570       );
 571
 572       // When screenshot to clipboard is enabled disabling saving to file
 573       const args = {
 574         fullpage: true,
 575         file: !clipboardEnabled,
 576         clipboard: clipboardEnabled,
 577       };
 578
 579       const messages = await captureAndSaveScreenshot(
 580         toolbox.target,
 581         toolbox.win,
 582         args
 583       );
 584       const notificationBox = toolbox.getNotificationBox();
 585       const priorityMap = {
 586         error: notificationBox.PRIORITY_CRITICAL_HIGH,
 587         warn: notificationBox.PRIORITY_WARNING_HIGH,
 588       };
 589       for (const { text, level } of messages) {
 590         // captureAndSaveScreenshot returns "saved" messages, that indicate where the
 591         // screenshot was saved. In regular toolbox, we don't want to display them as
 592         // the download UI can be used to open them.
 593         // But in the browser toolbox, we can't see the download UI, so we'll display the
 594         // saved message so the user knows there the file was saved.
 595         if (
 596           !toolbox.isBrowserToolbox &&
 597           level !== "warn" &&
 598           level !== "error"
 599         ) {
 600           continue;
 601         }
 602         notificationBox.appendNotification(
 603           text,
 604           null,
 605           null,
 606           priorityMap[level] || notificationBox.PRIORITY_INFO_MEDIUM
 607         );
 608       }
 609     },
 610   },
 611   createHighlightButton(
 612     [HIGHLIGHTER_TYPES.RULERS, HIGHLIGHTER_TYPES.VIEWPORT_SIZE],
 613     "rulers"
 614   ),
 615   createHighlightButton([HIGHLIGHTER_TYPES.MEASURING], "measure"),
 616   {
 617     id: "command-button-jstracer",
 618     description: l10n(
 619       "toolbox.buttons.jstracer",
 620       osString == "Darwin" ? "Cmd+Shift+5" : "Ctrl+Shift+5"
 621     ),
 622     isToolSupported: () =>
 623       Services.prefs.getBoolPref(
 624         "devtools.debugger.features.javascript-tracing",
 625         false
 626       ),
 627     async onClick(event, toolbox) {
 628       await toolbox.commands.tracerCommand.toggle();
 629     },
 630     isChecked(toolbox) {
 631       const { tracerCommand } = toolbox.commands;
 632       const button = toolbox.doc.getElementById("command-button-jstracer");
 633       if (button) {
 634         button.classList.toggle(
 635           "pending",
 636           tracerCommand.isTracingEnabled && !tracerCommand.isTracingActive
 637         );
 638       }
 639       return tracerCommand.isTracingEnabled;
 640     },
 641     isToggle: true,
 642     setup(toolbox, onChange) {
 643       toolbox.commands.tracerCommand.on("toggle", onChange);
 644     },
 645     teardown(toolbox, onChange) {
 646       toolbox.commands.tracerCommand.off("toggle", onChange);
 647     },
 648     getContextMenu(toolbox) {
 649       const menu = new Menu();
 650       const options = toolbox.commands.tracerCommand.getTracingOptions();
 651       const { logMethod } = options;
 652       menu.append(
 653         new MenuItem({
 654           id: "jstracer-menu-item-debugger-sidebar",
 655           label: l10n(
 656             "toolbox.buttons.jstracer.menu-item.trace-to-debugger-sidebar"
 657           ),
 658           checked: logMethod == TRACER_LOG_METHODS.DEBUGGER_SIDEBAR,
 659           type: "radio",
 660           click: () => {
 661             Services.prefs.setStringPref(
 662               "devtools.debugger.javascript-tracing-log-method",
 663               TRACER_LOG_METHODS.DEBUGGER_SIDEBAR
 664             );
 665           },
 666         })
 667       );
 668       menu.append(
 669         new MenuItem({
 670           id: "jstracer-menu-item-console",
 671           label: l10n("traceInWebConsole"),
 672           checked: logMethod == TRACER_LOG_METHODS.CONSOLE,
 673           type: "radio",
 674           click: () => {
 675             Services.prefs.setStringPref(
 676               "devtools.debugger.javascript-tracing-log-method",
 677               TRACER_LOG_METHODS.CONSOLE
 678             );
 679           },
 680         })
 681       );
 682       menu.append(
 683         new MenuItem({
 684           id: "jstracer-menu-item-profiler",
 685           label: l10n("traceInProfiler"),
 686           checked: logMethod == TRACER_LOG_METHODS.PROFILER,
 687           type: "radio",
 688           click: () => {
 689             Services.prefs.setStringPref(
 690               "devtools.debugger.javascript-tracing-log-method",
 691               TRACER_LOG_METHODS.PROFILER
 692             );
 693           },
 694         })
 695       );
 696       menu.append(
 697         new MenuItem({
 698           id: "jstracer-menu-item-stdout",
 699           label: l10n("traceInStdout"),
 700           type: "radio",
 701           checked: logMethod == TRACER_LOG_METHODS.STDOUT,
 702           click: () => {
 703             Services.prefs.setStringPref(
 704               "devtools.debugger.javascript-tracing-log-method",
 705               TRACER_LOG_METHODS.STDOUT
 706             );
 707           },
 708         })
 709       );
 710       menu.append(new MenuItem({ type: "separator" }));
 711       menu.append(
 712         new MenuItem({
 713           id: "jstracer-menu-item-next-interaction",
 714           label: l10n("traceOnNextInteraction"),
 715           type: "checkbox",
 716           checked: options.traceOnNextInteraction,
 717           click: () => {
 718             Services.prefs.setBoolPref(
 719               "devtools.debugger.javascript-tracing-on-next-interaction",
 720               !options.traceOnNextInteraction
 721             );
 722           },
 723         })
 724       );
 725       menu.append(
 726         new MenuItem({
 727           id: "jstracer-menu-item-next-load",
 728           label: l10n("traceOnNextLoad"),
 729           type: "checkbox",
 730           checked: options.traceOnNextLoad,
 731           click: () => {
 732             Services.prefs.setBoolPref(
 733               "devtools.debugger.javascript-tracing-on-next-load",
 734               !options.traceOnNextLoad
 735             );
 736           },
 737         })
 738       );
 739       menu.append(new MenuItem({ type: "separator" }));
 740       menu.append(
 741         new MenuItem({
 742           id: "jstracer-menu-item-log-values",
 743           label: l10n("traceValues"),
 744           type: "checkbox",
 745           checked: options.traceValues,
 746           click: () => {
 747             Services.prefs.setBoolPref(
 748               "devtools.debugger.javascript-tracing-values",
 749               !options.traceValues
 750             );
 751           },
 752         })
 753       );
 754       menu.append(
 755         new MenuItem({
 756           id: "jstracer-menu-item-function-return",
 757           label: l10n("traceFunctionReturn"),
 758           type: "checkbox",
 759           checked: options.traceFunctionReturn,
 760           click: () => {
 761             Services.prefs.setBoolPref(
 762               "devtools.debugger.javascript-tracing-function-return",
 763               !options.traceFunctionReturn
 764             );
 765           },
 766         })
 767       );
 768       return menu;
 769     },
 770   },
 771 ];
 772
 773 function createHighlightButton(highlighters, id) {
 774   return {
 775     id: `command-button-${id}`,
 776     description: l10n(`toolbox.buttons.${id}`),
 777     isToolSupported: toolbox =>
 778       toolbox.commands.descriptorFront.isTabDescriptor,
 779     async onClick(event, toolbox) {
 780       const inspectorFront = await toolbox.target.getFront("inspector");
 781
 782       await Promise.all(
 783         highlighters.map(async name => {
 784           const highlighter =
 785             await inspectorFront.getOrCreateHighlighterByType(name);
 786
 787           if (highlighter.isShown()) {
 788             await highlighter.hide();
 789           } else {
 790             await highlighter.show();
 791           }
 792         })
 793       );
 794     },
 795     isChecked(toolbox) {
 796       // if the inspector doesn't exist, then the highlighter has not yet been connected
 797       // to the front end.
 798       const inspectorFront = toolbox.target.getCachedFront("inspector");
 799       if (!inspectorFront) {
 800         // initialize the inspector front asyncronously. There is a potential for buggy
 801         // behavior here, but we need to change how the buttons get data (have them
 802         // consume data from reducers rather than writing our own version) in order to
 803         // fix this properly.
 804         return false;
 805       }
 806
 807       return highlighters.every(name =>
 808         inspectorFront.getKnownHighlighter(name)?.isShown()
 809       );
 810     },
 811     isToggle: true,
 812   };
 813 }
 814
 815 /**
 816  * Lookup l10n string from a string bundle.
 817  *
 818  * @param {string} name
 819  *        The key to lookup.
 820  * @param {...string} args
 821  *        Optional format argument.
 822  * @returns A localized version of the given key.
 823  */
 824 function l10n(name, ...args) {
 825   try {
 826     return args ? L10N.getFormatStr(name, ...args) : L10N.getStr(name);
 827   } catch (ex) {
 828     console.log("Error reading '" + name + "'");
 829     throw new Error("l10n error with " + name);
 830   }
 831 }
 832
 833 function commandkey(name) {
 834   try {
 835     return CommandKeys.formatValueSync(name);
 836   } catch (ex) {
 837     console.log("Error reading '" + name + "'");
 838     throw new Error("l10n error with " + name);
 839   }
 840 }
 841
 842 function functionkey(shortkey) {
 843   return shortkey.split("_")[1];
 844 }