GoogleChrome · connorjclark · Jun 8, 2019 · Jun 6, 2019 · Jun 6, 2019 · Jun 7, 2019
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -19,7 +19,7 @@
 /* eslint-env browser */
 
 /**
- * @fileoverview Adds export button, print, and other dynamic functionality to
+ * @fileoverview Adds tools button, print, and other dynamic functionality to
  * the report.
  */
 
@@ -49,7 +49,7 @@ class ReportUIFeatures {
     /** @type {boolean} */
     this._copyAttempt = false;
     /** @type {HTMLElement} */
-    this.exportButton; // eslint-disable-line no-unused-expressions
+    this.toolsButton; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
     this.topbarEl; // eslint-disable-line no-unused-expressions
     /** @type {HTMLElement} */
@@ -61,8 +61,8 @@ class ReportUIFeatures {
 
     this.>
     this.>
-    this.onExportButtonClick = this.onExportButtonClick.bind(this);
-    this.onExport = this.onExport.bind(this);
+    this.onToolsButtonClick = this.onToolsButtonClick.bind(this);
+    this.onToolAction = this.onToolAction.bind(this);
     this.>
     this.>
     this.>
@@ -73,15 +73,15 @@ class ReportUIFeatures {
   }
 
   /**
-   * Adds export button, print, and other functionality to the report. The method
+   * Adds tools button, print, and other functionality to the report. The method
    * should be called whenever the report needs to be re-rendered.
    * @param {LH.Result} report
    */
   initFeatures(report) {
     this.json = report;
 
     this._setupMediaQueryListeners();
-    this._setupExportButton();
+    this._setupToolsButton();
     this._setupThirdPartyFilter();
     this._setUpCollapseDetailsAfterPrinting();
     this._resetUIState();
@@ -205,12 +205,12 @@ class ReportUIFeatures {
     root.classList.toggle('lh-narrow', mql.matches);
   }
 
-  _setupExportButton() {
-    this.exportButton = this._dom.find('.lh-export__button', this._document);
-    this.exportButton.addEventListener('click', this.onExportButtonClick);
+  _setupToolsButton() {
+    this.toolsButton = this._dom.find('.lh-tools__button', this._document);
+    this.toolsButton.addEventListener('click', this.onToolsButtonClick);
 
-    const dropdown = this._dom.find('.lh-export__dropdown', this._document);
-    dropdown.addEventListener('click', this.onExport);
+    const dropdown = this._dom.find('.lh-tools__dropdown', this._document);
+    dropdown.addEventListener('click', this.onToolAction);
   }
 
   _setupThirdPartyFilter() {
@@ -377,17 +377,17 @@ class ReportUIFeatures {
     }
   }
 
-  closeExportDropdown() {
-    this.exportButton.classList.remove('active');
+  closeToolsDropdown() {
+    this.toolsButton.classList.remove('active');
   }
 
   /**
-   * Click handler for export button.
+   * Click handler for tools button.
    * @param {Event} e
    */
-  onExportButtonClick(e) {
+  onToolsButtonClick(e) {
     e.preventDefault();
-    this.exportButton.classList.toggle('active');
+    this.toolsButton.classList.toggle('active');
     this._document.addEventListener('keydown', this.onKeyDown);
   }
 
@@ -397,15 +397,15 @@ class ReportUIFeatures {
    * be in their closed state (not opened) and the templates should be unstamped.
    */
   _resetUIState() {
-    this.closeExportDropdown();
+    this.closeToolsDropdown();
     this._dom.resetTemplates();
   }
 
   /**
-   * Handler for "export as" button.
+   * Handler for tool button.
    * @param {Event} e
    */
-  onExport(e) {
+  onToolAction(e) {
     e.preventDefault();
 
     const el = /** @type {?Element} */ (e.target);
@@ -420,12 +420,12 @@ class ReportUIFeatures {
         break;
       case 'print-summary':
         this.collapseAllDetails();
-        this.closeExportDropdown();
+        this.closeToolsDropdown();
         self.print();
         break;
       case 'print-expanded':
         this.expandAllDetails();
-        this.closeExportDropdown();
+        this.closeToolsDropdown();
         self.print();
         break;
       case 'save-json': {
@@ -459,7 +459,7 @@ class ReportUIFeatures {
       }
     }
 
-    this.closeExportDropdown();
+    this.closeToolsDropdown();
     this._document.removeEventListener('keydown', this.onKeyDown);
   }
 
@@ -469,7 +469,7 @@ class ReportUIFeatures {
    */
   onKeyDown(e) {
     if (e.keyCode === 27) { // ESC
-      this.closeExportDropdown();
+      this.closeToolsDropdown();
     }
   }
 
@@ -480,7 +480,7 @@ class ReportUIFeatures {
   onKeyUp(e) {
     // Ctrl+P - Expands audit details when user prints via keyboard shortcut.
     if ((e.ctrlKey || e.metaKey) && e.keyCode === 80) {
-      this.closeExportDropdown();
+      this.closeToolsDropdown();
     }
   }
 

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
@@ -41,8 +41,8 @@
   --report-min-width: 400px;
   --report-header-height: 161px;
   --lh-score-icon-background-size: 24px;
-  --lh-export-icon-size: var(--lh-score-icon-background-size);
-  --lh-export-icon-color: var(--medium-75-gray);
+  --lh-tools-icon-size: var(--lh-score-icon-background-size);
+  --lh-tools-icon-color: var(--medium-75-gray);
   --lh-table-higlight-bg: hsla(0, 0%, 75%, 0.1);
   --lh-sparkline-height: 5px;
   --lh-audit-vpadding: 8px;

diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -253,40 +253,40 @@
       color: var(--body-text-color);
     }
 
-    .lh-export {
+    .lh-tools {
       margin-left: auto;
       will-change: transform;
     }
-    .lh-export__button {
-      width: var(--lh-export-icon-size);
-      height: var(--lh-export-icon-size);
+    .lh-tools__button {
+      width: var(--lh-tools-icon-size);
+      height: var(--lh-tools-icon-size);
       cursor: pointer;
       margin-right: 5px;
     }
     /*
-      Some features in the top right drop down menu don't work in the DevTools
+      Some features in the tools dropdown menu don't work in the DevTools
       client. They could with some tweaks, but currently they don't. For example:
       Saving as HTML/JSON - does not bring up a file dialog, as one would expect in DevTools.
                             also, it saves the AuditsPanel HTML, which is funky.
     */
-    .lh-devtools .lh-export__button {
+    .lh-devtools .lh-tools__button {
       display: none;
     }
-    .lh-export__button svg {
-      fill: var(--lh-export-icon-color);
+    .lh-tools__button svg {
+      fill: var(--lh-tools-icon-color);
     }
-    .dark .lh-export__button svg {
+    .dark .lh-tools__button svg {
       filter: invert(1);
     }
-    .lh-export__button:focus,
-    .lh-export__button.active {
+    .lh-tools__button:focus,
+    .lh-tools__button.active {
       outline: none;
     }
-    .lh-export__button.active + .lh-export__dropdown {
+    .lh-tools__button.active + .lh-tools__dropdown {
       opacity: 1;
       clip: rect(-1px, 187px, 242px, -3px);
     }
-    .lh-export__dropdown {
+    .lh-tools__dropdown {
       position: absolute;
       background-color: var(--body-background-color);
       border: 1px solid var(--report-border-color);
@@ -301,20 +301,20 @@
       opacity: 0;
       transition: all 200ms cubic-bezier(0,0,0.2,1);
     }
-    .lh-export__dropdown a {
+    .lh-tools__dropdown a {
       display: block;
       color: currentColor;
       text-decoration: none;
       white-space: nowrap;
       padding: 0 12px;
       line-height: 2;
     }
-    .lh-export__dropdown a:hover,
-    .lh-export__dropdown a:focus {
+    .lh-tools__dropdown a:hover,
+    .lh-tools__dropdown a:focus {
       background-color: var(--color-black-200);
       outline: none;
     }
-    .lh-export__dropdown .report-icon {
+    .lh-tools__dropdown .report-icon {
       cursor: pointer;
       background-repeat: no-repeat;
       background-position: 8px 50%;
@@ -326,22 +326,22 @@
       color: var(--color-black-900);
       filter: invert(1);
     }
-    .dark .lh-export__dropdown a:hover,
-    .dark .lh-export__dropdown a:focus {
+    .dark .lh-tools__dropdown a:hover,
+    .dark .lh-tools__dropdown a:focus {
       background-color: #BDBDBD;
     }
     /* copy icon needs slight adjustments to look great */
-    .lh-export__dropdown .report-icon--copy {
+    .lh-tools__dropdown .report-icon--copy {
       background-size: 16px;
       background-position: 9px 50%;
     }
     /* save-as-gist option hidden in report */
-    .lh-export__dropdown .lh-export--gist {
+    .lh-tools__dropdown .lh-tools--gist {
       display: none;
     }
 
     @media screen and (max-width: 964px) {
-      .lh-export__dropdown {
+      .lh-tools__dropdown {
         right: 0;
         left: initial;
       }
@@ -365,22 +365,22 @@
 
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
 
-    <div class="lh-export">
-      <div class="report-icon report-icon--share lh-export__button" title="Export report">
+    <div class="lh-tools">
+      <div class="report-icon report-icon--share lh-tools__button" title="Export report">
         <svg width="100%" height="100%" viewBox="0 0 24 24">
             <path d="M0 0h24v24H0z" fill="none"/>
             <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
         </svg>
       </div>
-      <div class="lh-export__dropdown">
-        <!-- TODO(i18n): localize export dropdown -->
+      <div class="lh-tools__dropdown">
+         <!-- TODO(i18n): localize tools dropdown -->
         <a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>
         <a href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a>
         <a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a>
         <a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a>
         <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
-        <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
-        <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
+        <a href="#" class="report-icon report-icon--open lh-tools--viewer" data-action="open-viewer">Open in Viewer</a>
+        <a href="#" class="report-icon report-icon--open lh-tools--gist" data-action="save-gist">Save as Gist</a>
         <a href="#" class="report-icon report-icon--dark" data-action="toggle-dark">Toggle Dark Theme</a>
       </div>
     </div>

diff --git a/lighthouse-viewer/app/src/viewer-ui-features.js b/lighthouse-viewer/app/src/viewer-ui-features.js
@@ -31,7 +31,7 @@ class ViewerUIFeatures extends ReportUIFeatures {
 
     // Disable option to save as gist if no callback for saving.
     if (!this._saveGistCallback) {
-      const saveGistItem = this._dom.find('.lh-export--gist', this._document);
+      const saveGistItem = this._dom.find('.lh-tools--gist', this._document);
       saveGistItem.setAttribute('disabled', 'true');
     }
   }
@@ -57,7 +57,7 @@ class ViewerUIFeatures extends ReportUIFeatures {
     }
 
     // Disable save-as-gist option after saving.
-    const saveGistItem = this._dom.find('.lh-export--gist', this._document);
+    const saveGistItem = this._dom.find('.lh-tools--gist', this._document);
     saveGistItem.setAttribute('disabled', 'true');
   }
 }

diff --git a/lighthouse-viewer/app/styles/viewer.css b/lighthouse-viewer/app/styles/viewer.css
@@ -116,11 +116,11 @@
 }
 
 /* open-in-viewer option hidden in Viewer */
-.lh-export__dropdown .lh-export--viewer {
+.lh-tools__dropdown .lh-tools--viewer {
   display: none;
 }
 
 /* open-in-gist option visible in Viewer */
-.lh-export__dropdown .lh-export--gist {
+.lh-tools__dropdown .lh-tools--gist {
   display: block !important;
 }