diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 612ba1a3e4dd..213199757c28 100644 --- 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.onMediaQueryChange = this.onMediaQueryChange.bind(this); this.onCopy = this.onCopy.bind(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.onKeyDown = this.onKeyDown.bind(this); this.onKeyUp = this.onKeyUp.bind(this); this.onChevronClick = this.onChevronClick.bind(this); @@ -73,7 +73,7 @@ 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 */ @@ -81,7 +81,7 @@ class ReportUIFeatures { 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 index e8eb75d52d0a..f7690d342391 100644 --- 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 index ee4b388c69af..ffa2f896fd4c 100644 --- 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,7 +301,7 @@ 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; @@ -309,12 +309,12 @@ 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 @@ -