/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ "use strict"; const Services = require("Services"); const osString = Services.appinfo.OS; // Panels loader.lazyGetter( this, "OptionsPanel", () => require("devtools/client/framework/toolbox-options").OptionsPanel ); loader.lazyGetter( this, "InspectorPanel", () => require("devtools/client/inspector/panel").InspectorPanel ); loader.lazyGetter( this, "WebConsolePanel", () => require("devtools/client/webconsole/panel").WebConsolePanel ); loader.lazyGetter( this, "DebuggerPanel", () => require("devtools/client/debugger/panel").DebuggerPanel ); loader.lazyGetter( this, "StyleEditorPanel", () => require("devtools/client/styleeditor/panel").StyleEditorPanel ); loader.lazyGetter( this, "MemoryPanel", () => require("devtools/client/memory/panel").MemoryPanel ); loader.lazyGetter( this, "PerformancePanel", () => require("devtools/client/performance/panel").PerformancePanel ); loader.lazyGetter( this, "NewPerformancePanel", () => require("devtools/client/performance-new/panel").PerformancePanel ); loader.lazyGetter( this, "NetMonitorPanel", () => require("devtools/client/netmonitor/panel").NetMonitorPanel ); loader.lazyGetter( this, "StoragePanel", () => require("devtools/client/storage/panel").StoragePanel ); loader.lazyGetter( this, "DomPanel", () => require("devtools/client/dom/panel").DomPanel ); loader.lazyGetter( this, "AccessibilityPanel", () => require("devtools/client/accessibility/panel").AccessibilityPanel ); loader.lazyGetter( this, "ApplicationPanel", () => require("devtools/client/application/panel").ApplicationPanel ); loader.lazyGetter( this, "WhatsNewPanel", () => require("devtools/client/whats-new/panel").WhatsNewPanel ); loader.lazyGetter( this, "reloadAndRecordTab", () => require("devtools/client/webreplay/menu.js").reloadAndRecordTab ); loader.lazyGetter( this, "reloadAndStopRecordingTab", () => require("devtools/client/webreplay/menu.js").reloadAndStopRecordingTab ); // Other dependencies loader.lazyRequireGetter( this, "AccessibilityStartup", "devtools/client/accessibility/accessibility-startup", true ); loader.lazyRequireGetter( this, "ResponsiveUIManager", "devtools/client/responsive/manager" ); loader.lazyRequireGetter( this, "AppConstants", "resource://gre/modules/AppConstants.jsm", true ); loader.lazyRequireGetter( this, "DevToolsFissionPrefs", "devtools/client/devtools-fission-prefs" ); const { MultiLocalizationHelper } = require("devtools/shared/l10n"); const L10N = new MultiLocalizationHelper( "devtools/client/locales/startup.properties", "devtools/startup/locales/key-shortcuts.properties" ); var Tools = {}; exports.Tools = Tools; // Definitions Tools.options = { id: "options", ordinal: 0, url: "chrome://devtools/content/framework/toolbox-options.xhtml", icon: "chrome://devtools/skin/images/settings.svg", bgTheme: "theme-body", label: l10n("options.label"), iconOnly: true, panelLabel: l10n("options.panelLabel"), tooltip: l10n("optionsButton.tooltip"), inMenu: false, isTargetSupported: function() { return true; }, build: function(iframeWindow, toolbox) { return new OptionsPanel(iframeWindow, toolbox); }, }; Tools.inspector = { id: "inspector", accesskey: l10n("inspector.accesskey"), ordinal: 1, icon: "chrome://devtools/skin/images/tool-inspector.svg", url: "chrome://devtools/content/inspector/index.xhtml", label: l10n("inspector.label"), panelLabel: l10n("inspector.panelLabel"), get tooltip() { if (osString == "Darwin") { const cmdShiftC = "Cmd+Shift+" + l10n("inspector.commandkey"); const cmdOptC = "Cmd+Opt+" + l10n("inspector.commandkey"); return l10n("inspector.mac.tooltip", cmdShiftC, cmdOptC); } const ctrlShiftC = "Ctrl+Shift+" + l10n("inspector.commandkey"); return l10n("inspector.tooltip2", ctrlShiftC); }, inMenu: true, preventClosingOnKey: true, // preventRaisingOnKey is used to keep the focus on the content window for shortcuts // that trigger the element picker. preventRaisingOnKey: true, onkey: function(panel, toolbox) { toolbox.nodePicker.togglePicker(); }, isTargetSupported: function(target) { return target.hasActor("inspector"); }, build: function(iframeWindow, toolbox) { return new InspectorPanel(iframeWindow, toolbox); }, }; Tools.webConsole = { id: "webconsole", accesskey: l10n("webConsoleCmd.accesskey"), ordinal: 2, url: "chrome://devtools/content/webconsole/index.html", icon: "chrome://devtools/skin/images/tool-webconsole.svg", label: l10n("ToolboxTabWebconsole.label"), menuLabel: l10n("MenuWebconsole.label"), panelLabel: l10n("ToolboxWebConsole.panelLabel"), get tooltip() { return l10n( "ToolboxWebconsole.tooltip2", (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + l10n("webconsole.commandkey") ); }, inMenu: true, preventClosingOnKey: true, onkey: function(panel, toolbox) { if (toolbox.splitConsole) { return toolbox.focusConsoleInput(); } panel.focusInput(); return undefined; }, isTargetSupported: function() { return true; }, build: function(iframeWindow, toolbox) { return new WebConsolePanel(iframeWindow, toolbox); }, }; Tools.jsdebugger = { id: "jsdebugger", accesskey: l10n("debuggerMenu.accesskey"), ordinal: 3, icon: "chrome://devtools/skin/images/tool-debugger.svg", url: "chrome://devtools/content/debugger/index.html", label: l10n("ToolboxDebugger.label"), panelLabel: l10n("ToolboxDebugger.panelLabel"), get tooltip() { return l10n( "ToolboxDebugger.tooltip4", (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + l10n("jsdebugger.commandkey2") ); }, inMenu: true, isTargetSupported: function() { return true; }, build: function(iframeWindow, toolbox) { return new DebuggerPanel(iframeWindow, toolbox); }, }; Tools.styleEditor = { id: "styleeditor", ordinal: 5, visibilityswitch: "devtools.styleeditor.enabled", accesskey: l10n("open.accesskey"), icon: "chrome://devtools/skin/images/tool-styleeditor.svg", url: "chrome://devtools/content/styleeditor/index.xhtml", label: l10n("ToolboxStyleEditor.label"), panelLabel: l10n("ToolboxStyleEditor.panelLabel"), get tooltip() { return l10n( "ToolboxStyleEditor.tooltip3", "Shift+" + functionkey(l10n("styleeditor.commandkey")) ); }, inMenu: true, isTargetSupported: function(target) { return target.hasActor("styleSheets"); }, build: function(iframeWindow, toolbox) { return new StyleEditorPanel(iframeWindow, toolbox); }, }; Tools.performance = { id: "performance", ordinal: 6, icon: "chrome://devtools/skin/images/tool-profiler.svg", visibilityswitch: "devtools.performance.enabled", label: l10n("performance.label"), panelLabel: l10n("performance.panelLabel"), get tooltip() { return l10n( "performance.tooltip", "Shift+" + functionkey(l10n("performance.commandkey")) ); }, accesskey: l10n("performance.accesskey"), inMenu: true, }; function switchPerformancePanel() { if ( Services.prefs.getBoolPref("devtools.performance.new-panel-enabled", false) ) { Tools.performance.url = "chrome://devtools/content/performance-new/index.xhtml"; Tools.performance.build = function(frame, target) { return new NewPerformancePanel(frame, target); }; Tools.performance.isTargetSupported = function(target) { // Root actors are lazily initialized, so we can't check if the target has // the perf actor yet. Also this function is not async, so we can't initialize // the actor yet. // We don't display the new performance panel for remote context in the // toolbox, because this has an overhead. Instead we should use // about:debugging. return target.isLocalTab; }; } else { Tools.performance.url = "chrome://devtools/content/performance/index.xhtml"; Tools.performance.build = function(frame, target) { return new PerformancePanel(frame, target); }; Tools.performance.isTargetSupported = function(target) { return target.hasActor("performance"); }; } } switchPerformancePanel(); Services.prefs.addObserver("devtools.performance.new-panel-enabled", { observe: switchPerformancePanel, }); Tools.memory = { id: "memory", ordinal: 7, icon: "chrome://devtools/skin/images/tool-memory.svg", url: "chrome://devtools/content/memory/index.xhtml", visibilityswitch: "devtools.memory.enabled", label: l10n("memory.label"), panelLabel: l10n("memory.panelLabel"), tooltip: l10n("memory.tooltip"), isTargetSupported: function(target) { return ( target.getTrait("heapSnapshots") && !target.isAddon && !target.isWorkerTarget ); }, build: function(frame, target) { return new MemoryPanel(frame, target); }, }; Tools.netMonitor = { id: "netmonitor", accesskey: l10n("netmonitor.accesskey"), ordinal: 4, visibilityswitch: "devtools.netmonitor.enabled", icon: "chrome://devtools/skin/images/tool-network.svg", url: "chrome://devtools/content/netmonitor/index.html", label: l10n("netmonitor.label"), panelLabel: l10n("netmonitor.panelLabel"), get tooltip() { return l10n( "netmonitor.tooltip2", (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + l10n("netmonitor.commandkey") ); }, inMenu: true, isTargetSupported: function(target) { return target.getTrait("networkMonitor") && !target.isWorkerTarget; }, build: function(iframeWindow, toolbox) { return new NetMonitorPanel(iframeWindow, toolbox); }, }; Tools.storage = { id: "storage", ordinal: 8, accesskey: l10n("storage.accesskey"), visibilityswitch: "devtools.storage.enabled", icon: "chrome://devtools/skin/images/tool-storage.svg", url: "chrome://devtools/content/storage/index.xhtml", label: l10n("storage.label"), menuLabel: l10n("storage.menuLabel"), panelLabel: l10n("storage.panelLabel"), get tooltip() { return l10n( "storage.tooltip3", "Shift+" + functionkey(l10n("storage.commandkey")) ); }, inMenu: true, isTargetSupported: function(target) { return ( target.isLocalTab || (target.hasActor("storage") && target.getTrait("storageInspector")) ); }, build: function(iframeWindow, toolbox) { return new StoragePanel(iframeWindow, toolbox); }, }; Tools.dom = { id: "dom", accesskey: l10n("dom.accesskey"), ordinal: 11, visibilityswitch: "devtools.dom.enabled", icon: "chrome://devtools/skin/images/tool-dom.svg", url: "chrome://devtools/content/dom/index.html", label: l10n("dom.label"), panelLabel: l10n("dom.panelLabel"), get tooltip() { return l10n( "dom.tooltip", (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + l10n("dom.commandkey") ); }, inMenu: true, isTargetSupported: function(target) { return target.getTrait("webConsoleCommands"); }, build: function(iframeWindow, toolbox) { return new DomPanel(iframeWindow, toolbox); }, }; Tools.accessibility = { id: "accessibility", accesskey: l10n("accessibility.accesskey"), ordinal: 9, modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift", visibilityswitch: "devtools.accessibility.enabled", icon: "chrome://devtools/skin/images/tool-accessibility.svg", url: "chrome://devtools/content/accessibility/index.html", label: l10n("accessibility.label"), panelLabel: l10n("accessibility.panelLabel"), get tooltip() { return l10n( "accessibility.tooltip3", "Shift+" + functionkey(l10n("accessibilityF12.commandkey")) ); }, inMenu: true, isTargetSupported(target) { return target.hasActor("accessibility"); }, build(iframeWindow, toolbox) { const startup = toolbox.getToolStartup("accessibility"); return new AccessibilityPanel(iframeWindow, toolbox, startup); }, buildToolStartup(toolbox) { return new AccessibilityStartup(toolbox); }, }; Tools.application = { id: "application", ordinal: 10, visibilityswitch: "devtools.application.enabled", icon: "chrome://devtools/skin/images/tool-application.svg", url: "chrome://devtools/content/application/index.html", label: l10n("application.label"), panelLabel: l10n("application.panellabel"), tooltip: l10n("application.tooltip"), inMenu: false, hiddenInOptions: true, isTargetSupported: function(target) { return target.hasActor("manifest"); }, build: function(iframeWindow, toolbox) { return new ApplicationPanel(iframeWindow, toolbox); }, }; Tools.whatsnew = { id: "whatsnew", ordinal: 12, visibilityswitch: "devtools.whatsnew.enabled", icon: "chrome://browser/skin/whatsnew.svg", url: "chrome://devtools/content/whats-new/index.html", // TODO: This panel is currently for english users only. // This should be properly localized in Bug 1596038 label: "What’s New", panelLabel: "What’s New", tooltip: "What’s New", inMenu: false, isTargetSupported: function(target) { // The panel is currently not localized and should only be displayed to // english users. See Bug 1596038 for cleanup. const isEnglishUser = Services.locale.negotiateLanguages( ["en"], [Services.locale.appLocaleAsBCP47] ).length; // In addition to the basic visibility switch preference, we also have a // higher level preference to disable the whole panel regardless of other // settings. Should be removed in Bug 1596037. const isFeatureEnabled = Services.prefs.getBoolPref( "devtools.whatsnew.feature-enabled", false ); // This panel should only be enabled for regular web toolboxes. return target.isLocalTab && isEnglishUser && isFeatureEnabled; }, build: function(iframeWindow, toolbox) { return new WhatsNewPanel(iframeWindow, toolbox); }, }; var defaultTools = [ Tools.options, Tools.webConsole, Tools.inspector, Tools.jsdebugger, Tools.styleEditor, Tools.performance, Tools.netMonitor, Tools.storage, Tools.memory, Tools.dom, Tools.accessibility, Tools.application, Tools.whatsnew, ]; exports.defaultTools = defaultTools; Tools.darkTheme = { id: "dark", label: l10n("options.darkTheme.label2"), ordinal: 1, stylesheets: ["chrome://devtools/skin/dark-theme.css"], classList: ["theme-dark"], }; Tools.lightTheme = { id: "light", label: l10n("options.lightTheme.label2"), ordinal: 2, stylesheets: ["chrome://devtools/skin/light-theme.css"], classList: ["theme-light"], }; exports.defaultThemes = [Tools.darkTheme, Tools.lightTheme]; // White-list buttons that can be toggled to prevent adding prefs for // addons that have manually inserted toolbarbuttons into DOM. // (By default, supported target is only local tab) exports.ToolboxButtons = [ { id: "command-button-paintflashing", description: l10n("toolbox.buttons.paintflashing"), isTargetSupported: target => target.isLocalTab, onClick(event, toolbox) { toolbox.togglePaintFlashing(); }, isChecked(toolbox) { return toolbox.isPaintFlashing; }, }, { id: "command-button-replay", description: l10n("toolbox.buttons.replay"), isTargetSupported: target => Services.prefs.getBoolPref("devtools.recordreplay.enabled") && !target.canRewind && target.isLocalTab, onClick: () => reloadAndRecordTab(), isChecked: () => false, experimentalURL: "https://developer.mozilla.org/en-US/docs/Mozilla/Projects/WebReplay", }, { id: "command-button-stop-replay", description: l10n("toolbox.buttons.stopReplay"), isTargetSupported: target => Services.prefs.getBoolPref("devtools.recordreplay.enabled") && target.canRewind && target.isLocalTab, onClick: () => reloadAndStopRecordingTab(), isChecked: () => true, }, { id: "command-button-fission-prefs", description: "DevTools Fission preferences", isTargetSupported: target => !AppConstants.MOZILLA_OFFICIAL, onClick: (event, toolbox) => DevToolsFissionPrefs.showTooltip(toolbox), isChecked: () => DevToolsFissionPrefs.isAnyPreferenceEnabled(), }, { id: "command-button-responsive", description: l10n( "toolbox.buttons.responsive", osString == "Darwin" ? "Cmd+Opt+M" : "Ctrl+Shift+M" ), isTargetSupported: target => target.isLocalTab, onClick(event, toolbox) { const tab = toolbox.target.tab; const browserWindow = tab.ownerDocument.defaultView; ResponsiveUIManager.toggle(browserWindow, tab, { trigger: "toolbox" }); }, isChecked(toolbox) { if (!toolbox.target.tab) { return false; } return ResponsiveUIManager.isActiveForTab(toolbox.target.tab); }, setup(toolbox, onChange) { ResponsiveUIManager.on("on", onChange); ResponsiveUIManager.on("off", onChange); }, teardown(toolbox, onChange) { ResponsiveUIManager.off("on", onChange); ResponsiveUIManager.off("off", onChange); }, }, { id: "command-button-screenshot", description: l10n("toolbox.buttons.screenshot"), isTargetSupported: target => !target.chrome && target.hasActor("screenshot"), async onClick(event, toolbox) { // Special case for screenshot button to check for clipboard preference const clipboardEnabled = Services.prefs.getBoolPref( "devtools.screenshot.clipboard.enabled" ); const args = { fullpage: true, file: true }; if (clipboardEnabled) { args.clipboard = true; } const screenshotFront = await toolbox.target.getFront("screenshot"); await screenshotFront.captureAndSave(toolbox.win, args); }, }, createHighlightButton("RulersHighlighter", "rulers"), createHighlightButton("MeasuringToolHighlighter", "measure"), ]; function createHighlightButton(highlighterName, id) { return { id: `command-button-${id}`, description: l10n(`toolbox.buttons.${id}`), isTargetSupported: target => !target.chrome, async onClick(event, toolbox) { const inspectorFront = await toolbox.target.getFront("inspector"); const highlighter = await inspectorFront.getOrCreateHighlighterByType( highlighterName ); if (highlighter.isShown()) { return highlighter.hide(); } // Starting with FF63, higlighter's spec accept a null first argument. // Still pass an empty object to fake a domnode front in order to support old // servers. return highlighter.show({}); }, isChecked(toolbox) { // if the inspector doesn't exist, then the highlighter has not yet been connected // to the front end. const inspectorFront = toolbox.target.getCachedFront("inspector"); if (!inspectorFront) { // initialize the inspector front asyncronously. There is a potential for buggy // behavior here, but we need to change how the buttons get data (have them // consume data from reducers rather than writing our own version) in order to // fix this properly. return false; } const highlighter = inspectorFront.getKnownHighlighter(highlighterName); return highlighter && highlighter.isShown(); }, }; } /** * Lookup l10n string from a string bundle. * * @param {string} name * The key to lookup. * @param {...string} args * Optional format argument. * @returns A localized version of the given key. */ function l10n(name, ...args) { try { return args ? L10N.getFormatStr(name, ...args) : L10N.getStr(name); } catch (ex) { console.log("Error reading '" + name + "'"); throw new Error("l10n error with " + name); } } function functionkey(shortkey) { return shortkey.split("_")[1]; }