[DevTools] Audits - show "Printing" status during print

Bug: 981495
Change-Id: Ide73a699c3bc4cb06e05623778a6c41a91af6163
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1761216Reviewed-by: Erik Luo <luoe@chromium.org>
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Connor Clark <cjamcl@google.com>
Cr-Commit-Position: refs/heads/master@{#688674}

third_party/blink/renderer/devtools/front_end/audits/AuditsPanel.js

@@ -107,6 +107,17 @@ Audits.AuditsPanel = class extends UI.Panel {
     this._statusView.show(this.contentElement);
   }
 
+  _beforePrint() {
+    this._statusView.show(this.contentElement);
+    this._statusView.toggleCancelButton(false);
+    this._statusView.renderText(ls`Printing`, ls`The print popup window is open. Please close it to continue.`);
+  }
+
+  _afterPrint() {
+    this._statusView.hide();
+    this._statusView.toggleCancelButton(true);
+  }
+
   /**
    * @param {!ReportRenderer.ReportJSON} lighthouseResult
    * @param {!ReportRenderer.RunnerResultArtifacts=} artifacts
@@ -147,6 +158,8 @@ Audits.AuditsPanel = class extends UI.Panel {
     Audits.ReportRenderer.handleDarkMode(el);
 
     const features = new Audits.ReportUIFeatures(dom);
+    features.setBeforePrint(this._beforePrint.bind(this));
+    features.setAfterPrint(this._afterPrint.bind(this));
     features.setTemplateContext(templatesDOM);
     features.initFeatures(lighthouseResult);
 

third_party/blink/renderer/devtools/front_end/audits/AuditsReportRenderer.js

@@ -73,6 +73,29 @@ Audits.ReportRenderer = class extends ReportRenderer {
  * @override
  */
 Audits.ReportUIFeatures = class extends ReportUIFeatures {
+  /**
+   * @param {!DOM} dom
+   */
+  constructor(dom) {
+    super(dom);
+    this._beforePrint = null;
+    this._afterPrint = null;
+  }
+
+  /**
+   * @param {?function()} beforePrint
+   */
+  setBeforePrint(beforePrint) {
+    this._beforePrint = beforePrint;
+  }
+
+  /**
+   * @param {?function()} afterPrint
+   */
+  setAfterPrint(afterPrint) {
+    this._afterPrint = afterPrint;
+  }
+
   /**
    * Returns the html that recreates this report.
    * @return {string}
@@ -107,9 +130,14 @@ Audits.ReportUIFeatures = class extends ReportUIFeatures {
     printWindow.document.body.replaceWith(clonedReport);
     // Linkified nodes are shadow elements, which aren't exposed via `cloneNode`.
     await Audits.ReportRenderer.linkifyNodeDetails(clonedReport);
+
+    if (this._beforePrint)
+      this._beforePrint();
     printWindow.focus();
     printWindow.print();
     printWindow.close();
+    if (this._afterPrint)
+      this._afterPrint();
   }
 
   /**

third_party/blink/renderer/devtools/front_end/audits/AuditsStatusView.js

@@ -14,6 +14,7 @@ Audits.StatusView = class {
     this._progressWrapper = null;
     this._progressBar = null;
     this._statusText = null;
+    this._cancelButton = null;
 
     this._inspectedURL = '';
     this._textChangedAt = 0;
@@ -54,6 +55,7 @@ Audits.StatusView = class {
     this._progressWrapper = fragment.$('progress-wrapper');
     this._progressBar = fragment.$('progress-bar');
     this._statusText = fragment.$('status-text');
+    this._cancelButton = cancelButton;
     UI.ARIAUtils.markAsStatus(this._statusText);
 
     this._dialog.setDefaultFocusedElement(cancelButton);
@@ -82,10 +84,17 @@ Audits.StatusView = class {
     const parsedURL = this._inspectedURL.asParsedURL();
     const pageHost = parsedURL && parsedURL.host;
     const statusHeader = pageHost ? ls`Auditing ${pageHost}` : ls`Auditing your web page`;
-    this._statusHeader.textContent = `${statusHeader}\u2026`;
+    this._renderStatusHeader(statusHeader);
     this._dialog.show(dialogRenderElement);
   }
 
+  /**
+   * @param {string=} statusHeader
+   */
+  _renderStatusHeader(statusHeader) {
+    this._statusHeader.textContent = `${statusHeader}\u2026`;
+  }
+
   hide() {
     if (this._dialog.isShowing())
       this._dialog.hide();
@@ -230,6 +239,22 @@ Audits.StatusView = class {
     }
   }
 
+  /**
+   * @param {string} statusHeader
+   * @param {string} text
+   */
+  renderText(statusHeader, text) {
+    this._renderStatusHeader(statusHeader);
+    this._commitTextChange(text);
+  }
+
+  /**
+   * @param {boolean} show
+   */
+  toggleCancelButton(show) {
+    this._cancelButton.style.visibility = show ? 'visible' : 'hidden';
+  }
+
   /**
    * @param {!Error} err
    * @param {string} auditURL

third_party/blink/renderer/devtools/front_end/audits/audits_strings.grdp

@@ -33,6 +33,9 @@
   <message name="IDS_DEVTOOLS_1c481aa99d081c32182011a758f73d33" desc="Text in Audits Status View">
     <ph name="MATCH_MESSAGE">$1s<ex>Lighthouse is loading your page.</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_2046d43f4cc1f59c06f764da2ca2355a" desc="">
+    The print popup window is open. Please close it to continue.
+  </message>
   <message name="IDS_DEVTOOLS_2310408a63388fe57e3a4177168a8798" desc="Text in Audits Controller">
     Desktop
   </message>
@@ -102,6 +105,9 @@
   <message name="IDS_DEVTOOLS_9446a98ad14416153cc4d45ab8b531bf" desc="Text in Audits Controller">
     Performance
   </message>
+  <message name="IDS_DEVTOOLS_b002a564ceda05dbdf012a48a145d0d3" desc="">
+    Printing
+  </message>
   <message name="IDS_DEVTOOLS_b06c94565d768dd75535120f2f8482a7" desc="Text in Audits Start View">
     Audits
   </message>