devtools/client/menus.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 /**
   8  * This module defines the sorted list of menuitems inserted into the
   9  * "Browser Tools" menu.
  10  * It also defines the key shortcuts that relates to them.
  11  *
  12  * Various fields are necessary for historical compatiblity with XUL/addons:
  13  * - id:
  14  *   used as <xul:menuitem> id attribute
  15  * - l10nKey:
  16  *   prefix used to locale localization strings from menus.properties
  17  * - oncommand:
  18  *   function called when the menu item or key shortcut are fired
  19  * - keyId:
  20  *   Identifier used in devtools/client/devtools-startup.js
  21  *   Helps figuring out the DOM id for the related <xul:key>
  22  *   in order to have the key text displayed in menus.
  23  * - checkbox:
  24  *   If true, the menuitem is prefixed by a checkbox and runtime code can
  25  *   toggle it.
  26  */
  27
  28 const lazy = {};
  29 ChromeUtils.defineESModuleGetters(lazy, {
  30   BrowserToolboxLauncher:
  31     "resource://devtools/client/framework/browser-toolbox/Launcher.sys.mjs",
  32 });
  33
  34 loader.lazyRequireGetter(this, "flags", "resource://devtools/shared/flags.js");
  35
  36 loader.lazyRequireGetter(
  37   this,
  38   "gDevToolsBrowser",
  39   "resource://devtools/client/framework/devtools-browser.js",
  40   true
  41 );
  42 loader.lazyRequireGetter(
  43   this,
  44   "ResponsiveUIManager",
  45   "resource://devtools/client/responsive/manager.js"
  46 );
  47 loader.lazyRequireGetter(
  48   this,
  49   "openDocLink",
  50   "resource://devtools/client/shared/link.js",
  51   true
  52 );
  53 loader.lazyRequireGetter(
  54   this,
  55   "CommandsFactory",
  56   "resource://devtools/shared/commands/commands-factory.js",
  57   true
  58 );
  59
  60 loader.lazyRequireGetter(
  61   this,
  62   "PICKER_TYPES",
  63   "resource://devtools/shared/picker-constants.js"
  64 );
  65
  66 exports.menuitems = [
  67   {
  68     id: "menu_devToolbox",
  69     l10nKey: "webDeveloperToolsMenu",
  70     oncommand(event) {
  71       try {
  72         const window = event.target.ownerDocument.defaultView;
  73         gDevToolsBrowser.toggleToolboxCommand(window.gBrowser, Cu.now());
  74       } catch (e) {
  75         console.error(`Exception while opening the toolbox: ${e}\n${e.stack}`);
  76       }
  77     },
  78     keyId: "toggleToolbox",
  79     checkbox: true,
  80   },
  81   {
  82     id: "menu_devtools_remotedebugging",
  83     l10nKey: "devtoolsRemoteDebugging",
  84     oncommand(event) {
  85       const window = event.target.ownerDocument.defaultView;
  86       gDevToolsBrowser.openAboutDebugging(window.gBrowser);
  87     },
  88   },
  89   {
  90     id: "menu_browserToolbox",
  91     l10nKey: "browserToolboxMenu",
  92     oncommand() {
  93       lazy.BrowserToolboxLauncher.init();
  94     },
  95     keyId: "browserToolbox",
  96   },
  97   {
  98     id: "menu_browserConsole",
  99     l10nKey: "browserConsoleCmd",
 100     oncommand() {
 101       const {
 102         BrowserConsoleManager,
 103       } = require("resource://devtools/client/webconsole/browser-console-manager.js");
 104       BrowserConsoleManager.openBrowserConsoleOrFocus();
 105     },
 106     keyId: "browserConsole",
 107   },
 108   {
 109     id: "menu_responsiveUI",
 110     l10nKey: "responsiveDesignMode",
 111     oncommand(event) {
 112       const window = event.target.ownerDocument.defaultView;
 113       ResponsiveUIManager.toggle(window, window.gBrowser.selectedTab, {
 114         trigger: "menu",
 115       });
 116     },
 117     keyId: "responsiveDesignMode",
 118     checkbox: true,
 119   },
 120   {
 121     id: "menu_eyedropper",
 122     l10nKey: "eyedropper",
 123     async oncommand(event) {
 124       const window = event.target.ownerDocument.defaultView;
 125
 126       // The eyedropper might be used without a toolbox, so it should use a
 127       // dedicated commands instance.
 128       // See Bug 1701004.
 129       const commands = await CommandsFactory.forTab(
 130         window.gBrowser.selectedTab
 131       );
 132       await commands.targetCommand.startListening();
 133
 134       const target = commands.targetCommand.targetFront;
 135       const inspectorFront = await target.getFront("inspector");
 136
 137       // If RDM is active, disable touch simulation events if they're enabled.
 138       // Similarly, enable them when the color picker is done picking.
 139       if (ResponsiveUIManager.isActiveForTab(target.localTab)) {
 140         const ui = ResponsiveUIManager.getResponsiveUIForTab(target.localTab);
 141         await ui.responsiveFront.setElementPickerState(
 142           true,
 143           PICKER_TYPES.EYEDROPPER
 144         );
 145
 146         inspectorFront.once("color-picked", async () => {
 147           await ui.responsiveFront.setElementPickerState(
 148             false,
 149             PICKER_TYPES.EYEDROPPER
 150           );
 151         });
 152
 153         inspectorFront.once("color-pick-canceled", async () => {
 154           await ui.responsiveFront.setElementPickerState(
 155             false,
 156             PICKER_TYPES.EYEDROPPER
 157           );
 158         });
 159       }
 160
 161       // Destroy the dedicated commands instance when the color picking is
 162       // finished.
 163       inspectorFront.once("color-picked", () => commands.destroy());
 164       inspectorFront.once("color-pick-canceled", () => commands.destroy());
 165
 166       inspectorFront.pickColorFromPage({ copyOnSelect: true, fromMenu: true });
 167
 168       if (flags.testing) {
 169         // Used in devtools/client/inspector/test/browser_inspector_eyedropper_ruleview.js
 170         Services.obs.notifyObservers(
 171           { wrappedJSObject: target },
 172           "color-picker-command-handled"
 173         );
 174       }
 175     },
 176     checkbox: true,
 177   },
 178   {
 179     id: "extensionsForDevelopers",
 180     l10nKey: "extensionsForDevelopersCmd",
 181     appMenuL10nId: "appmenu-developer-tools-extensions",
 182     oncommand(event) {
 183       openDocLink(
 184         "https://addons.mozilla.org/firefox/collections/mozilla/webdeveloper/"
 185       );
 186     },
 187   },
 188 ];