From 48625f2f0654262243d8401a7474bc6f022c8f50 Mon Sep 17 00:00:00 2001 From: Gabriel Luong Date: Fri, 25 Oct 2019 19:28:02 +0000 Subject: [PATCH] Bug 1550804 - Add color scheme simulation to the inspector. r=pbro This adds a color scheme simulation toggle button in the rules view, which will toggle between 4 different states: default, dark, light, and no-preference. This feature is currently hidden away under a preference: devtools.inspector.color-scheme-simulation.enabled The final UI/UX still needs to be figured out, however, this initial step is to land the ability to prototype this feature. Differential Revision: https://phabricator.services.mozilla.com/D49833 --HG-- extra : moz-landing-system : lando --- browser/app/profile/firefox.js | 2 + devtools/client/inspector/index.xhtml | 1 + devtools/client/inspector/rules/actions/index.js | 3 + devtools/client/inspector/rules/actions/rules.js | 14 +++++ .../client/inspector/rules/components/RulesApp.js | 2 + .../client/inspector/rules/components/Toolbar.js | 29 ++++++++++ devtools/client/inspector/rules/constants.js | 3 + devtools/client/inspector/rules/new-rules.js | 66 ++++++++++++++++++---- devtools/client/inspector/rules/reducers/rules.js | 10 ++++ devtools/client/inspector/rules/rules.js | 66 +++++++++++++++++++--- devtools/client/locales/en-US/inspector.properties | 5 ++ devtools/client/themes/rules.css | 22 ++++++++ devtools/server/actors/emulation.js | 43 ++++++++++++++ .../shared/locales/en-US/styleinspector.properties | 5 ++ devtools/shared/specs/emulation.js | 14 +++++ 15 files changed, 267 insertions(+), 18 deletions(-) diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js index 60df995e8c42..fe75b70566e1 100644 --- a/browser/app/profile/firefox.js +++ b/browser/app/profile/firefox.js @@ -2016,6 +2016,8 @@ pref("devtools.inspector.new-rulesview.enabled", false); pref("devtools.inspector.compatibility.enabled", false); // Enable the new Box Model Highlighter with renderer in parent process pref("devtools.inspector.use-new-box-model-highlighter", false); +// Enable color scheme simulation in the inspector. +pref("devtools.inspector.color-scheme-simulation.enabled", false); // Grid highlighter preferences pref("devtools.gridinspector.gridOutlineMaxColumns", 50); diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml index 867d0f9e81a2..86b269e5e2d6 100644 --- a/devtools/client/inspector/index.xhtml +++ b/devtools/client/inspector/index.xhtml @@ -101,6 +101,7 @@ + diff --git a/devtools/client/inspector/rules/actions/index.js b/devtools/client/inspector/rules/actions/index.js index bfe6c0683220..cc4cbf76c0b5 100644 --- a/devtools/client/inspector/rules/actions/index.js +++ b/devtools/client/inspector/rules/actions/index.js @@ -28,6 +28,9 @@ createEnum( // Updates whether or not the class list panel is expanded. "UPDATE_CLASS_PANEL_EXPANDED", + // Updates whether or not the color scheme simulation button is hidden. + "UPDATE_COLOR_SCHEME_SIMULATION_HIDDEN", + // Updates the highlighted selector. "UPDATE_HIGHLIGHTED_SELECTOR", diff --git a/devtools/client/inspector/rules/actions/rules.js b/devtools/client/inspector/rules/actions/rules.js index 274122e13473..ab02a0a11cef 100644 --- a/devtools/client/inspector/rules/actions/rules.js +++ b/devtools/client/inspector/rules/actions/rules.js @@ -6,6 +6,7 @@ const { UPDATE_ADD_RULE_ENABLED, + UPDATE_COLOR_SCHEME_SIMULATION_HIDDEN, UPDATE_HIGHLIGHTED_SELECTOR, UPDATE_PRINT_SIMULATION_HIDDEN, UPDATE_RULES, @@ -28,6 +29,19 @@ module.exports = { }, /** + * Updates whether or not the color scheme simulation button is hidden. + * + * @param {Boolean} hidden + * Whether or not the color scheme simulation button is hidden. + */ + updateColorSchemeSimulationHidden(hidden) { + return { + type: UPDATE_COLOR_SCHEME_SIMULATION_HIDDEN, + hidden, + }; + }, + + /** * Updates the highlighted selector. * * @param {String} highlightedSelector diff --git a/devtools/client/inspector/rules/components/RulesApp.js b/devtools/client/inspector/rules/components/RulesApp.js index 257eef1fbbb8..e9ceee516081 100644 --- a/devtools/client/inspector/rules/components/RulesApp.js +++ b/devtools/client/inspector/rules/components/RulesApp.js @@ -37,6 +37,7 @@ class RulesApp extends PureComponent { onToggleClassPanelExpanded: PropTypes.func.isRequired, onToggleDeclaration: PropTypes.func.isRequired, onTogglePrintSimulation: PropTypes.func.isRequired, + onToggleColorSchemeSimulation: PropTypes.func.isRequired, onTogglePseudoClass: PropTypes.func.isRequired, onToggleSelectorHighlighter: PropTypes.func.isRequired, rules: PropTypes.arrayOf(PropTypes.shape(Types.rule)).isRequired, @@ -193,6 +194,7 @@ class RulesApp extends PureComponent { onSetClassState: this.props.onSetClassState, onToggleClassPanelExpanded: this.props.onToggleClassPanelExpanded, onTogglePrintSimulation: this.props.onTogglePrintSimulation, + onToggleColorSchemeSimulation: this.props.onToggleColorSchemeSimulation, onTogglePseudoClass: this.props.onTogglePseudoClass, }), dom.div( diff --git a/devtools/client/inspector/rules/components/Toolbar.js b/devtools/client/inspector/rules/components/Toolbar.js index ed779fa83561..80d957f12c37 100644 --- a/devtools/client/inspector/rules/components/Toolbar.js +++ b/devtools/client/inspector/rules/components/Toolbar.js @@ -11,6 +11,7 @@ const { const dom = require("devtools/client/shared/vendor/react-dom-factories"); const PropTypes = require("devtools/client/shared/vendor/react-prop-types"); const { connect } = require("devtools/client/shared/vendor/react-redux"); +const { COLOR_SCHEMES } = require("devtools/client/inspector/rules/constants"); const SearchBox = createFactory(require("./SearchBox")); @@ -28,11 +29,13 @@ class Toolbar extends PureComponent { return { isAddRuleEnabled: PropTypes.bool.isRequired, isClassPanelExpanded: PropTypes.bool.isRequired, + isColorSchemeSimulationHidden: PropTypes.bool.isRequired, isPrintSimulationHidden: PropTypes.bool.isRequired, onAddClass: PropTypes.func.isRequired, onAddRule: PropTypes.func.isRequired, onSetClassState: PropTypes.func.isRequired, onToggleClassPanelExpanded: PropTypes.func.isRequired, + onToggleColorSchemeSimulation: PropTypes.func.isRequired, onTogglePrintSimulation: PropTypes.func.isRequired, onTogglePseudoClass: PropTypes.func.isRequired, }; @@ -42,6 +45,8 @@ class Toolbar extends PureComponent { super(props); this.state = { + // Which of the color schemes is simulated, if any. + currentColorScheme: 0, // Whether or not the print simulation button is enabled. isPrintSimulationEnabled: false, // Whether or not the pseudo class panel is expanded. @@ -50,6 +55,9 @@ class Toolbar extends PureComponent { this.onAddRuleClick = this.onAddRuleClick.bind(this); this.onClassPanelToggle = this.onClassPanelToggle.bind(this); + this.onColorSchemeSimulationClick = this.onColorSchemeSimulationClick.bind( + this + ); this.onPrintSimulationToggle = this.onPrintSimulationToggle.bind(this); this.onPseudoClassPanelToggle = this.onPseudoClassPanelToggle.bind(this); } @@ -73,6 +81,16 @@ class Toolbar extends PureComponent { }); } + onColorSchemeSimulationClick(event) { + event.stopPropagation(); + + this.props.onToggleColorSchemeSimulation(); + this.setState(prevState => ({ + currentColorScheme: + (prevState.currentColorScheme + 1) % COLOR_SCHEMES.length, + })); + } + onPrintSimulationToggle(event) { event.stopPropagation(); this.props.onTogglePrintSimulation(); @@ -97,6 +115,7 @@ class Toolbar extends PureComponent { const { isAddRuleEnabled, isClassPanelExpanded, + isColorSchemeSimulationHidden, isPrintSimulationHidden, } = this.props; const { isPrintSimulationEnabled, isPseudoClassPanelExpanded } = this.state; @@ -136,6 +155,15 @@ class Toolbar extends PureComponent { onClick: this.onAddRuleClick, title: getStr("rule.addRule.tooltip"), }), + isColorSchemeSimulationHidden + ? dom.button({ + id: "color-scheme-simulation-toggle", + className: "devtools-button", + onClick: this.onColorSchemeSimulationClick, + state: COLOR_SCHEMES[this.state.currentColorScheme], + title: getStr("rule.colorSchemeSimulation.tooltip"), + }) + : null, !isPrintSimulationHidden ? dom.button({ id: "print-simulation-toggle", @@ -167,6 +195,7 @@ const mapStateToProps = state => { return { isAddRuleEnabled: state.rules.isAddRuleEnabled, isClassPanelExpanded: state.classList.isClassPanelExpanded, + isColorSchemeSimulationHidden: state.rules.isColorSchemeSimulationHidden, isPrintSimulationHidden: state.rules.isPrintSimulationHidden, }; }; diff --git a/devtools/client/inspector/rules/constants.js b/devtools/client/inspector/rules/constants.js index 04a512c8f583..b66a4eb67b63 100644 --- a/devtools/client/inspector/rules/constants.js +++ b/devtools/client/inspector/rules/constants.js @@ -8,3 +8,6 @@ // Rules and their Styles into one actor. For elements (which have a style // but no associated rule) we fake a rule with the following style id. exports.ELEMENT_STYLE = 100; + +// An array of the possible color schemes that can be emulated. +exports.COLOR_SCHEMES = [null, "dark", "light", "no-preference"]; diff --git a/devtools/client/inspector/rules/new-rules.js b/devtools/client/inspector/rules/new-rules.js index b50d858fb0ff..141feaff783c 100644 --- a/devtools/client/inspector/rules/new-rules.js +++ b/devtools/client/inspector/rules/new-rules.js @@ -24,6 +24,7 @@ const { } = require("./actions/pseudo-classes"); const { updateAddRuleEnabled, + updateColorSchemeSimulationHidden, updateHighlightedSelector, updatePrintSimulationHidden, updateRules, @@ -66,6 +67,12 @@ loader.lazyRequireGetter( "devtools/client/shared/inplace-editor", true ); +loader.lazyRequireGetter( + this, + "COLOR_SCHEMES", + "devtools/client/inspector/rules/constants", + true +); const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles"; @@ -93,6 +100,9 @@ class RulesView { ); this.onToggleDeclaration = this.onToggleDeclaration.bind(this); this.onTogglePrintSimulation = this.onTogglePrintSimulation.bind(this); + this.onToggleColorSchemeSimulation = this.onToggleColorSchemeSimulation.bind( + this + ); this.onTogglePseudoClass = this.onTogglePseudoClass.bind(this); this.onToolChanged = this.onToolChanged.bind(this); this.onToggleSelectorHighlighter = this.onToggleSelectorHighlighter.bind( @@ -129,6 +139,7 @@ class RulesView { onOpenSourceLink: this.onOpenSourceLink, onSetClassState: this.onSetClassState, onToggleClassPanelExpanded: this.onToggleClassPanelExpanded, + onToggleColorSchemeSimulation: this.onToggleColorSchemeSimulation, onToggleDeclaration: this.onToggleDeclaration, onTogglePrintSimulation: this.onTogglePrintSimulation, onTogglePseudoClass: this.onTogglePseudoClass, @@ -139,7 +150,7 @@ class RulesView { showSelectorEditor: this.showSelectorEditor, }); - this.initPrintSimulation(); + this.initSimulationFeatures(); const provider = createElement( Provider, @@ -156,19 +167,34 @@ class RulesView { this.provider = provider; } - async initPrintSimulation() { - const target = this.inspector.currentTarget; - + async initSimulationFeatures() { // In order to query if the emulation actor's print simulation methods are supported, // we have to call the emulation front so that the actor is lazily loaded. This allows // us to use `actorHasMethod`. Please see `getActorDescription` for more information. - this.emulationFront = await target.getFront("emulation"); + this.emulationFront = await this.currentTarget.getFront("emulation"); - if (!target.chrome) { + if (!this.currentTarget.chrome) { this.store.dispatch(updatePrintSimulationHidden(false)); } else { this.store.dispatch(updatePrintSimulationHidden(true)); } + + // Show the color scheme simulation toggle button if: + // - The feature pref is enabled. + // - Color scheme simulation is supported for the current target. + if ( + Services.prefs.getBoolPref( + "devtools.inspector.color-scheme-simulation.enabled" + ) && + (await this.currentTarget.actorHasMethod( + "emulation", + "getEmulatedColorScheme" + )) + ) { + this.store.dispatch(updateColorSchemeSimulationHidden(false)); + } else { + this.store.dispatch(updateColorSchemeSimulationHidden(true)); + } } destroy() { @@ -245,6 +271,16 @@ class RulesView { return this._classList; } + + /** + * Get the current target the toolbox is debugging. + * + * @return {Target} + */ + get currentTarget() { + return this.inspector.currentTarget; + } + /** * Creates a dummy element in the document that helps get the computed style in * TextProperty. @@ -370,15 +406,12 @@ class RulesView { */ async onOpenSourceLink(ruleId) { const rule = this.elementStyle.getRule(ruleId); - if ( - !rule || - !Tools.styleEditor.isTargetSupported(this.inspector.currentTarget) - ) { + if (!rule || !Tools.styleEditor.isTargetSupported(this.currentTarget)) { return; } const toolbox = await gDevTools.showToolbox( - this.inspector.currentTarget, + this.currentTarget, "styleeditor" ); const styleEditor = toolbox.getCurrentPanel(); @@ -454,6 +487,17 @@ class RulesView { } /** + * Handler for toggling color scheme simulation. + */ + async onToggleColorSchemeSimulation() { + const currentState = await this.emulationFront.getEmulatedColorScheme(); + const index = COLOR_SCHEMES.indexOf(currentState); + const nextState = COLOR_SCHEMES[(index + 1) % COLOR_SCHEMES.length]; + await this.emulationFront.setEmulatedColorScheme(nextState); + await this.updateElementStyle(); + } + + /** * Handler for toggling print media simulation. */ async onTogglePrintSimulation() { diff --git a/devtools/client/inspector/rules/reducers/rules.js b/devtools/client/inspector/rules/reducers/rules.js index db40f8081d8f..ffd1a5399340 100644 --- a/devtools/client/inspector/rules/reducers/rules.js +++ b/devtools/client/inspector/rules/reducers/rules.js @@ -8,6 +8,7 @@ const Services = require("Services"); const { UPDATE_ADD_RULE_ENABLED, + UPDATE_COLOR_SCHEME_SIMULATION_HIDDEN, UPDATE_HIGHLIGHTED_SELECTOR, UPDATE_PRINT_SIMULATION_HIDDEN, UPDATE_RULES, @@ -20,6 +21,8 @@ const INITIAL_RULES = { highlightedSelector: "", // Whether or not the add new rule button should be enabled. isAddRuleEnabled: false, + // Whether or not the color scheme simulation button is hidden. + isColorSchemeSimulationHidden: false, // Whether or not the print simulation button is hidden. isPrintSimulationHidden: false, // Whether or not the source links are enabled. This is determined by @@ -116,6 +119,13 @@ const reducers = { }; }, + [UPDATE_COLOR_SCHEME_SIMULATION_HIDDEN](rules, { hidden }) { + return { + ...rules, + isColorSchemeSimulationHidden: hidden, + }; + }, + [UPDATE_HIGHLIGHTED_SELECTOR](rules, { highlightedSelector }) { return { ...rules, diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js index a4337459437f..ba504fc39e40 100644 --- a/devtools/client/inspector/rules/rules.js +++ b/devtools/client/inspector/rules/rules.js @@ -53,6 +53,12 @@ loader.lazyRequireGetter( ); loader.lazyRequireGetter( this, + "COLOR_SCHEMES", + "devtools/client/inspector/rules/constants", + true +); +loader.lazyRequireGetter( + this, "StyleInspectorMenu", "devtools/client/inspector/shared/style-inspector-menu" ); @@ -156,6 +162,9 @@ function CssRuleView(inspector, document, store) { this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this); this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this); this._onToggleClassPanel = this._onToggleClassPanel.bind(this); + this._onToggleColorSchemeSimulation = this._onToggleColorSchemeSimulation.bind( + this + ); this._onTogglePrintSimulation = this._onTogglePrintSimulation.bind(this); this.highlightElementRule = this.highlightElementRule.bind(this); this.highlightProperty = this.highlightProperty.bind(this); @@ -170,9 +179,12 @@ function CssRuleView(inspector, document, store) { this.pseudoClassToggle = doc.getElementById("pseudo-class-panel-toggle"); this.classPanel = doc.getElementById("ruleview-class-panel"); this.classToggle = doc.getElementById("class-panel-toggle"); + this.colorSchemeSimulationButton = doc.getElementById( + "color-scheme-simulation-toggle" + ); this.printSimulationButton = doc.getElementById("print-simulation-toggle"); - this._initPrintSimulation(); + this._initSimulationFeatures(); this.searchClearButton.hidden = true; @@ -393,13 +405,14 @@ CssRuleView.prototype = { }, /** - * Check the print emulation actor's backwards-compatibility via the target actor's - * actorHasMethod. + * Initializes the emulation front and enable the print and color scheme simulation + * if they are supported in the current target. */ - async _initPrintSimulation() { - // In order to query if the emulation actor's print simulation methods are supported, - // we have to call the emulation front so that the actor is lazily loaded. This allows - // us to use `actorHasMethod`. Please see `getActorDescription` for more information. + async _initSimulationFeatures() { + // In order to query if the emulation actor's print and color simulation methods are + // supported, we have to call the emulation front so that the actor is lazily loaded. + // This allows us to use `actorHasMethod`. Please see `getActorDescription` for more + // information. this._emulationFront = await this.currentTarget.getFront("emulation"); if (!this.currentTarget.chrome) { @@ -409,6 +422,25 @@ CssRuleView.prototype = { this._onTogglePrintSimulation ); } + + // Show the color scheme simulation toggle button if: + // - The feature pref is enabled. + // - Color scheme simulation is supported for the current target. + if ( + Services.prefs.getBoolPref( + "devtools.inspector.color-scheme-simulation.enabled" + ) && + (await this.currentTarget.actorHasMethod( + "emulation", + "getEmulatedColorScheme" + )) + ) { + this.colorSchemeSimulationButton.removeAttribute("hidden"); + this.colorSchemeSimulationButton.addEventListener( + "click", + this._onToggleColorSchemeSimulation + ); + } }, /** @@ -817,6 +849,10 @@ CssRuleView.prototype = { // Clean-up for print simulation. if (this._emulationFront) { + this.colorSchemeSimulationButton.removeEventListener( + "click", + this._onToggleColorSchemeSimulation + ); this.printSimulationButton.removeEventListener( "click", this._onTogglePrintSimulation @@ -824,6 +860,7 @@ CssRuleView.prototype = { this._emulationFront.destroy(); + this.colorSchemeSimulationButton = null; this.printSimulationButton = null; this._emulationFront = null; } @@ -1703,6 +1740,21 @@ CssRuleView.prototype = { } }, + async _onToggleColorSchemeSimulation() { + const currentState = await this.emulationFront.getEmulatedColorScheme(); + const index = COLOR_SCHEMES.indexOf(currentState); + const nextState = COLOR_SCHEMES[(index + 1) % COLOR_SCHEMES.length]; + + if (nextState) { + this.colorSchemeSimulationButton.setAttribute("state", nextState); + } else { + this.colorSchemeSimulationButton.removeAttribute("state"); + } + + await this.emulationFront.setEmulatedColorScheme(nextState); + this.refreshPanel(); + }, + async _onTogglePrintSimulation() { const enabled = await this.emulationFront.getIsPrintSimulationEnabled(); diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties index 7251654eb48e..87fe9d78b2f6 100644 --- a/devtools/client/locales/en-US/inspector.properties +++ b/devtools/client/locales/en-US/inspector.properties @@ -490,6 +490,11 @@ inspector.noProperties=No CSS properties found. # that toggles print simulation. inspector.printSimulation.tooltip = Toggle print media simulation for the page +# LOCALIZATION NOTE (inspector.colorSchemeSimulation.tooltip): +# This is the tooltip of the color scheme simulation button in the Rule View +# toolbar that toggles color scheme simulation. +inspector.colorSchemeSimulation.tooltip=Toggle color scheme simulation for the page + # LOCALIZATION NOTE (markupView.scrollableBadge.label): This is the text displayed inside a # badge, in the inspector, next to nodes that are scrollable in the page. markupView.scrollableBadge.label=scroll diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index a83bfb1de690..7f68283adddc 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -692,6 +692,28 @@ background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg"); } +#color-scheme-simulation-toggle::before { + -moz-context-properties: fill, fill-opacity; + background-image: url("chrome://mozapps/skin/extensions/category-themes.svg"); + background-size: 12px; +} + +#color-scheme-simulation-toggle[state="dark"] { + background-color: #333; +} + +#color-scheme-simulation-toggle[state="dark"]::before { + fill: white; +} + +#color-scheme-simulation-toggle[state="light"]::before { + fill: #bbb; +} + +#color-scheme-simulation-toggle[state="no-preference"]::before { + fill-opacity: 0.5; +} + .flash-out { transition: background 1s; } diff --git a/devtools/server/actors/emulation.js b/devtools/server/actors/emulation.js index 21d601ffe25c..62282409944d 100644 --- a/devtools/server/actors/emulation.js +++ b/devtools/server/actors/emulation.js @@ -52,6 +52,7 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, { this.stopPrintMediaSimulation(); } + this.setEmulatedColorScheme(); this.clearDPPXOverride(); this.clearNetworkThrottling(); this.clearTouchEventsOverride(); @@ -154,6 +155,48 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, { return false; }, + /* Color scheme simulation */ + + /** + * Returns the currently emulated color scheme. + */ + getEmulatedColorScheme() { + return this._emulatedColorScheme; + }, + + /** + * Sets the currently emulated color scheme or if an invalid value is given, + * the override is cleared. + */ + setEmulatedColorScheme(scheme = null) { + if (this._emulatedColorScheme === scheme) { + return; + } + + let internalColorScheme; + switch (scheme) { + case "light": + internalColorScheme = Ci.nsIContentViewer.PREFERS_COLOR_SCHEME_LIGHT; + break; + case "dark": + internalColorScheme = Ci.nsIContentViewer.PREFERS_COLOR_SCHEME_DARK; + break; + case "no-preference": + internalColorScheme = + Ci.nsIContentViewer.PREFERS_COLOR_SCHEME_NO_PREFERENCE; + break; + default: + internalColorScheme = Ci.nsIContentViewer.PREFERS_COLOR_SCHEME_NONE; + } + + this._emulatedColorScheme = scheme; + this.docShell.contentViewer.emulatePrefersColorScheme(internalColorScheme); + }, + + // The current emulated color scheme value. It's possible values are listed in the + // COLOR_SCHEMES constant in devtools/client/inspector/rules/constants. + _emulatedColorScheme: null, + /* Network Throttling */ _previousNetworkThrottling: undefined, diff --git a/devtools/shared/locales/en-US/styleinspector.properties b/devtools/shared/locales/en-US/styleinspector.properties index a4ef069d7304..ddcdc0c4aaaf 100644 --- a/devtools/shared/locales/en-US/styleinspector.properties +++ b/devtools/shared/locales/en-US/styleinspector.properties @@ -140,6 +140,11 @@ rule.classPanel.noClasses=No classes on this element # that toggles print simulation. rule.printSimulation.tooltip=Toggle print media simulation for the page +# LOCALIZATION NOTE (rule.colorSchemeSimulation.tooltip): +# This is the tooltip of the color scheme simulation button in the Rule View +# toolbar that toggles color-scheme simulation. +rule.colorSchemeSimulation.tooltip=Toggle color-scheme simulation for the page + # LOCALIZATION NOTE (styleinspector.contextmenu.copyColor): Text displayed in the rule # and computed view context menu when a color value was clicked. styleinspector.contextmenu.copyColor=Copy Color diff --git a/devtools/shared/specs/emulation.js b/devtools/shared/specs/emulation.js index 2d956ebfe65f..c974bab80677 100644 --- a/devtools/shared/specs/emulation.js +++ b/devtools/shared/specs/emulation.js @@ -131,6 +131,20 @@ const emulationSpec = generateActorSpec({ response: {}, }, + getEmulatedColorScheme: { + request: {}, + response: { + emulated: RetVal("nullable:string"), + }, + }, + + setEmulatedColorScheme: { + request: { + scheme: Arg(0, "nullable:string"), + }, + response: {}, + }, + getIsPrintSimulationEnabled: { request: {}, response: { -- 2.11.4.GIT