report(viewer): fix gist icon (#12505)

GoogleChrome · May 19, 2021 · 545176a · 545176a
1 parent 663eb1a
commit 545176a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
@@ -323,8 +323,8 @@
       background-color: var(--color-gray-200);
       outline: none;
     }
-    /* save-as-gist option hidden in report */
-    .lh-tools__dropdown .lh-tools--gist {
+    /* save-gist option hidden in report. */
+    .lh-tools__dropdown a[data-action='save-gist'] {
       display: none;
     }
 
@@ -393,8 +393,8 @@
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--viewer" data-i18n="dropdownViewer" data-action="open-viewer"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--gist" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
       </div>
     </div>

diff --git a/lighthouse-viewer/app/src/viewer-ui-features.js b/lighthouse-viewer/app/src/viewer-ui-features.js
@@ -33,7 +33,8 @@ class ViewerUIFeatures extends ReportUIFeatures {
 
     // Disable option to save as gist if no callback for saving.
     if (!this._saveGistCallback) {
-      const saveGistItem = this._dom.find('.lh-tools--gist', this._document);
+      const saveGistItem =
+        this._dom.find('.lh-tools__dropdown a[data-action="save-gist"]', this._document);
       saveGistItem.setAttribute('disabled', 'true');
     }
   }
@@ -58,8 +59,9 @@ class ViewerUIFeatures extends ReportUIFeatures {
       throw new Error('Cannot save this report as a gist');
     }
 
-    // Disable save-as-gist option after saving.
-    const saveGistItem = this._dom.find('.lh-tools--gist', this._document);
+    // Disable save-gist option after saving.
+    const saveGistItem =
+      this._dom.find('.lh-tools__dropdown a[data-action="save-gist"]', this._document);
     saveGistItem.setAttribute('disabled', 'true');
   }
 }

diff --git a/lighthouse-viewer/app/styles/viewer.css b/lighthouse-viewer/app/styles/viewer.css
@@ -123,12 +123,12 @@
   z-index: 3;
 }
 
-/* open-in-viewer option hidden in Viewer */
-.lh-tools__dropdown .lh-tools--viewer {
+/* open-viewer option hidden in Viewer */
+.lh-tools__dropdown a[data-action="open-viewer"] {
   display: none;
 }
 
-/* open-in-gist option visible in Viewer */
-.lh-tools__dropdown .lh-tools--gist {
-  display: block !important;
+/* save-gist option visible in Viewer */
+.lh-tools__dropdown a[data-action="save-gist"] {
+  display: flex !important;
 }