Bug 1534984 - Add a button for toggling print styles simulation in the Rule View toolbar r=gl

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

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/index.xhtml

@@ -98,6 +98,7 @@
               <button id="ruleview-add-rule-button" data-localization="title=inspector.addRule.tooltip" class="devtools-button"></button>
               <button id="pseudo-class-panel-toggle" data-localization="title=inspector.togglePseudo.tooltip" class="devtools-button"></button>
               <button id="class-panel-toggle" data-localization="title=inspector.classPanel.toggleClass.tooltip" class="devtools-button"></button>
+              <button id="print-simulation-toggle" data-localization="title=inspector.printSimulation.tooltip" class="devtools-button" hidden="true"></button>
             </div>
           </div>
           <div id="pseudo-class-panel" class="ruleview-reveal-panel" hidden="true">

devtools/client/inspector/rules/rules.js

@@ -124,6 +124,7 @@ function CssRuleView(inspector, document, store) {
   this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this);
   this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this);
   this._onToggleClassPanel = this._onToggleClassPanel.bind(this);
+  this._onTogglePrintSimulation = this._onTogglePrintSimulation.bind(this);
   this.highlightElementRule = this.highlightElementRule.bind(this);
   this.highlightProperty = this.highlightProperty.bind(this);
 
@@ -141,6 +142,8 @@ function CssRuleView(inspector, document, store) {
   this.focusCheckbox = doc.getElementById("pseudo-focus-toggle");
   this.focusWithinCheckbox = doc.getElementById("pseudo-focus-within-toggle");
 
+  this._initPrintSimulation();
+
   this.searchClearButton.hidden = true;
 
   this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
@@ -228,6 +231,10 @@ CssRuleView.prototype = {
     return this._dummyElement;
   },
 
+  get emulationFront() {
+    return this._emulationFront;
+  },
+
   // Get the highlighters overlay from the Inspector.
   get highlighters() {
     if (!this._highlighters) {
@@ -247,6 +254,10 @@ CssRuleView.prototype = {
     return this._elementStyle ? this._elementStyle.rules : [];
   },
 
+  get target() {
+    return this.inspector.toolbox.target;
+  },
+
   /**
    * Get an instance of SelectorHighlighter (used to highlight nodes that match
    * selectors in the rule-view). A new instance is only created the first time
@@ -324,6 +335,29 @@ CssRuleView.prototype = {
     }
   },
 
+  /**
+   * Check the print emulation actor's backwards-compatibility via the target actor's
+   * actorHasMethod.
+   */
+  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.
+    this._emulationFront = await this.target.getFront("emulation");
+
+    // Show the toggle button if:
+    // - Print simulation is supported for the current target.
+    // - Not debugging content document.
+    if (await this.target.actorHasMethod("emulation", "getIsPrintSimulationEnabled") &&
+        !this.target.chrome) {
+      this.printSimulationButton =
+        this.styleDocument.getElementById("print-simulation-toggle");
+      this.printSimulationButton.removeAttribute("hidden");
+
+      this.printSimulationButton.addEventListener("click", this._onTogglePrintSimulation);
+    }
+  },
+
   /**
    * Get the type of a given node in the rule-view
    *
@@ -718,6 +752,15 @@ CssRuleView.prototype = {
       this._highlighters = null;
     }
 
+    // Clean-up for print simulation.
+    if (this._emulationFront) {
+      this.printSimulationButton.removeEventListener("click",
+        this._onTogglePrintSimulation);
+
+      this.printSimulationButton = null;
+      this._emulationFront = null;
+    }
+
     this.tooltips.destroy();
 
     // Remove bound listeners
@@ -1513,6 +1556,21 @@ CssRuleView.prototype = {
     }
   },
 
+  async _onTogglePrintSimulation() {
+    const enabled = await this.emulationFront.getIsPrintSimulationEnabled();
+
+    if (!enabled) {
+      this.printSimulationButton.classList.add("checked");
+      this.emulationFront.startPrintMediaSimulation();
+    } else {
+      this.printSimulationButton.classList.remove("checked");
+      this.emulationFront.stopPrintMediaSimulation(false);
+    }
+
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
   /**
    * Temporarily flash the given element.
    *

devtools/client/jar.mn

@@ -110,6 +110,7 @@ devtools.jar:
     skin/images/command-measure.svg (themes/images/command-measure.svg)
     skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
     skin/images/command-chevron.svg (themes/images/command-chevron.svg)
+    skin/images/rules-view-print-simulation.svg (themes/images/rules-view-print-simulation.svg)
     skin/markup.css (themes/markup.css)
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole/error.svg (themes/images/webconsole/error.svg)

devtools/client/locales/en-US/inspector.properties

@@ -472,6 +472,11 @@ inspector.classPanel.noClasses=No classes on this element
 # displayed.
 inspector.noProperties=No CSS properties found.
 
+# LOCALIZATION NOTE (inspector.printSimulation.tooltip):
+# This is the tooltip of the print simulation button in the Rule View toolbar
+# that toggles print simulation.
+inspector.printSimulation.tooltip = Toggle print media 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

devtools/client/themes/images/rules-view-print-simulation.svg

@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M12 0H4a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3zm1 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1z"/><path fill="context-fill" d="M10.5 5h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm0 2h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm0 2h-5a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1zm-3 2h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 0 1z"/>
+</svg>

devtools/client/themes/rules.css

@@ -653,6 +653,15 @@
   content: ".cls";
 }
 
+#print-simulation-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg");
+  fill-opacity: 0;
+}
+
+#print-simulation-toggle.checked::before {
+  fill-opacity: 0.15;
+}
+
 .flash-out {
   animation: flash-out 1s ease-out;
 }

devtools/server/actors/emulation.js

@@ -7,7 +7,8 @@
 const { Ci } = require("chrome");
 const protocol = require("devtools/shared/protocol");
 const { emulationSpec } = require("devtools/shared/specs/emulation");
-const { TouchSimulator } = require("devtools/server/actors/emulation/touch-simulator");
+
+loader.lazyRequireGetter(this, "TouchSimulator", "devtools/server/actors/emulation/touch-simulator", true);
 
 /**
  * This actor overrides various browser features to simulate different environments to
@@ -28,18 +29,29 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
     protocol.Actor.prototype.initialize.call(this, conn);
     this.targetActor = targetActor;
     this.docShell = targetActor.docShell;
-    this.touchSimulator = new TouchSimulator(targetActor.chromeEventHandler);
+
+    this.onWillNavigate = this.onWillNavigate.bind(this);
+    this.onWindowReady = this.onWindowReady.bind(this);
+
+    this.targetActor.on("will-navigate", this.onWillNavigate);
+    this.targetActor.on("window-ready", this.onWindowReady);
   },
 
   destroy() {
+    this.stopPrintMediaSimulation();
     this.clearDPPXOverride();
     this.clearNetworkThrottling();
     this.clearTouchEventsOverride();
     this.clearMetaViewportOverride();
     this.clearUserAgentOverride();
+
+    this.targetActor.off("will-navigate", this.onWillNavigate);
+    this.targetActor.off("window-ready", this.onWindowReady);
+
     this.targetActor = null;
     this.docShell = null;
-    this.touchSimulator = null;
+    this._touchSimulator = null;
+
     protocol.Actor.prototype.destroy.call(this);
   },
 
@@ -56,6 +68,33 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
     return this.conn._getOrCreateActor(form.consoleActor);
   },
 
+  get touchSimulator() {
+    if (!this._touchSimulator) {
+      this._touchSimulator = new TouchSimulator(this.targetActor.chromeEventHandler);
+    }
+
+    return this._touchSimulator;
+  },
+
+  onWillNavigate({ window, isTopLevel }) {
+    // Make sure that print simulation is stopped before navigating to another page. We
+    // need to do this since the browser will cache the last state of the page in its
+    // session history.
+    if (this._printSimulationEnabled && isTopLevel) {
+      this.stopPrintMediaSimulation(true);
+    }
+  },
+
+  onWindowReady({ window, isTopLevel }) {
+    // Since `emulateMedium` only works for the current page, we need to ensure persistent
+    // print simulation for when the user navigates to a new page while its enabled.
+    // To do this, we need to tell the page to begin print simulation before the DOM
+    // content is available to the user:
+    if (this._printSimulationEnabled && isTopLevel) {
+      this.startPrintMediaSimulation();
+    }
+  },
+
   /* DPPX override */
 
   _previousDPPXOverride: undefined,
@@ -284,6 +323,35 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
     return false;
   },
 
+  /* Simulating print media for the page */
+
+  _printSimulationEnabled: false,
+
+  getIsPrintSimulationEnabled() {
+    return this._printSimulationEnabled;
+  },
+
+  startPrintMediaSimulation() {
+    this._printSimulationEnabled = true;
+    this.targetActor.docShell.contentViewer.emulateMedium("print");
+  },
+
+  /**
+   * Stop simulating print media for the current page.
+   *
+   * @param {Boolean} state
+   *        Whether or not to set _printSimulationEnabled to false. If true, we want to
+   *        stop simulation print media for the current page but NOT set
+   *        _printSimulationEnabled to false. We do this specifically for the
+   *        "will-navigate" event where we still want to continue simulating print when
+   *        navigating to the next page. Defaults to false, meaning we want to completely
+   *        stop print simulation.
+   *
+   */
+  stopPrintMediaSimulation(state = false) {
+    this._printSimulationEnabled = state;
+    this.targetActor.docShell.contentViewer.stopEmulatingMedium();
+  },
 });
 
 exports.EmulationActor = EmulationActor;

devtools/shared/specs/emulation.js

@@ -130,6 +130,25 @@ const emulationSpec = generateActorSpec({
       },
       response: {},
     },
+
+    getIsPrintSimulationEnabled: {
+      request: {},
+      response: {
+        enabled: RetVal("boolean"),
+      },
+    },
+
+    startPrintMediaSimulation: {
+      request: {},
+      response: {},
+    },
+
+    stopPrintMediaSimulation: {
+      request: {
+        state: Arg(0, "boolean"),
+      },
+      response: {},
+    },
   },
 });