From 5d0e5c5daf67402f2c64ea6363796b060cbc0bd5 Mon Sep 17 00:00:00 2001 From: John Emau Date: Thu, 15 Aug 2019 02:01:12 -0700 Subject: [PATCH 1/2] report(refactor): Move drop down logic into separate class --- .../html/renderer/report-ui-features.js | 372 +++++++++--------- .../html/renderer/report-ui-features-test.js | 57 +-- 2 files changed, 222 insertions(+), 207 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 94a07a6174bf..9dbb016f03e5 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -46,13 +46,11 @@ class ReportUIFeatures { this._document = this._dom.document(); /** @type {ParentNode} */ this._templateContext = this._dom.document(); + /** @type {DropDown} */ + this._dropDown = new DropDown(this._dom); /** @type {boolean} */ this._copyAttempt = false; /** @type {HTMLElement} */ - this.toolsButton; // eslint-disable-line no-unused-expressions - /** @type {HTMLElement} */ - this.toolsDropDown; // eslint-disable-line no-unused-expressions - /** @type {HTMLElement} */ this.topbarEl; // eslint-disable-line no-unused-expressions /** @type {HTMLElement} */ this.scoreScaleEl; // eslint-disable-line no-unused-expressions @@ -63,20 +61,13 @@ class ReportUIFeatures { this.onMediaQueryChange = this.onMediaQueryChange.bind(this); this.onCopy = this.onCopy.bind(this); - this.onToolsButtonClick = this.onToolsButtonClick.bind(this); - this.onToolsButtonKeydown = this.onToolsButtonKeydown.bind(this); - this.onToolsDropDownKeydown = this.onToolsDropDownKeydown.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); this.collapseAllDetails = this.collapseAllDetails.bind(this); this.expandAllDetails = this.expandAllDetails.bind(this); this._toggleDarkTheme = this._toggleDarkTheme.bind(this); this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this); - this._getNextDropDownItem = this._getNextDropDownItem.bind(this); - this._getNextSelectableNode = this._getNextSelectableNode.bind(this); - this._getPreviousDropDownItem = this._getPreviousDropDownItem.bind(this); } /** @@ -88,7 +79,8 @@ class ReportUIFeatures { this.json = report; this._setupMediaQueryListeners(); - this._setupToolsButton(); + this._dropDown.setupToolsDropDown(); + this._dropDown.toolsDropDown.addEventListener('click', this.onToolAction); this._setupThirdPartyFilter(); this._setUpCollapseDetailsAfterPrinting(); this._resetUIState(); @@ -212,16 +204,6 @@ class ReportUIFeatures { root.classList.toggle('lh-narrow', mql.matches); } - _setupToolsButton() { - this.toolsButton = this._dom.find('.lh-tools__button', this._document); - this.toolsButton.addEventListener('click', this.onToolsButtonClick); - this.toolsButton.addEventListener('keydown', this.onToolsButtonKeydown); - - this.toolsDropDown = this._dom.find('.lh-tools__dropdown', this._document); - this.toolsDropDown.addEventListener('click', this.onToolAction); - this.toolsDropDown.addEventListener('keydown', this.onToolsDropDownKeydown); - } - _setupThirdPartyFilter() { // Some audits should not display the third party filter option. const thirdPartyFilterAuditExclusions = [ @@ -390,157 +372,13 @@ class ReportUIFeatures { } } - closeToolsDropdown() { - this.toolsButton.classList.remove('active'); - this.toolsButton.setAttribute('aria-expanded', 'false'); - this._document.removeEventListener('keydown', this.onKeyDown); - if (this.toolsDropDown.contains(this._document.activeElement)) { - // Refocus on the tools button if the drop down last had focus - this.toolsButton.focus(); - } - } - - /** - * @param {HTMLElement} firstFocusElement - */ - openToolsDropDown(firstFocusElement) { - if (this.toolsButton.classList.contains('active')) { - // If the drop down is already open focus on the element - firstFocusElement.focus(); - } else { - // Wait for drop down transition to complete so options are focusable. - this.toolsDropDown.addEventListener('transitionend', () => { - firstFocusElement.focus(); - }, {once: true}); - } - - this.toolsButton.classList.add('active'); - this.toolsButton.setAttribute('aria-expanded', 'true'); - this._document.addEventListener('keydown', this.onKeyDown); - } - - /** - * Click handler for tools button. - * @param {Event} e - */ - onToolsButtonClick(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - - if (this.toolsButton.classList.contains('active')) { - this.closeToolsDropdown(); - } else { - this.openToolsDropDown(this._getNextDropDownItem()); - } - } - - /** - * Handler for tool button. - * @param {KeyboardEvent} e - */ - onToolsButtonKeydown(e) { - switch (e.code) { - case 'ArrowUp': - e.preventDefault(); - this.openToolsDropDown(this._getPreviousDropDownItem()); - break; - case 'ArrowDown': - case 'Enter': - case ' ': - e.preventDefault(); - this.openToolsDropDown(this._getNextDropDownItem()); - break; - default: - // no op - } - } - - /** - * Handler for tool DropDown. - * @param {KeyboardEvent} e - */ - onToolsDropDownKeydown(e) { - const el = /** @type {?HTMLElement} */ (e.target); - - switch (e.code) { - case 'ArrowUp': - e.preventDefault(); - this._getPreviousDropDownItem(el).focus(); - break; - case 'ArrowDown': - e.preventDefault(); - this._getNextDropDownItem(el).focus(); - break; - case 'Home': - e.preventDefault(); - this._getNextDropDownItem().focus(); - break; - case 'End': - e.preventDefault(); - this._getPreviousDropDownItem().focus(); - break; - default: - // no op - } - } - - /** - * @param {Array} allNodes - * @param {?Node=} startNode - * @returns {Node} - */ - _getNextSelectableNode(allNodes, startNode) { - const nodes = allNodes.filter((node) => { - if (!(node instanceof HTMLElement)) { - return false; - } - - // 'Save as Gist' option may be disabled. - if (node.hasAttribute('disabled')) { - return false; - } - - // 'Save as Gist' option may have display none. - if (window.getComputedStyle(node).display === 'none') { - return false; - } - - return true; - }); - - let nextIndex = startNode ? (nodes.indexOf(startNode) + 1) : 0; - if (nextIndex >= nodes.length) { - nextIndex = 0; - } - - return nodes[nextIndex]; - } - - /** - * @param {?Element=} startEl - * @returns {HTMLElement} - */ - _getNextDropDownItem(startEl) { - const nodes = Array.from(this.toolsDropDown.childNodes); - return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); - } - - /** - * @param {?Element=} startEl - * @returns {HTMLElement} - */ - _getPreviousDropDownItem(startEl) { - const nodes = Array.from(this.toolsDropDown.childNodes).reverse(); - return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); - } - /** * Resets the state of page before capturing the page for export. * When the user opens the exported HTML page, certain UI elements should * be in their closed state (not opened) and the templates should be unstamped. */ _resetUIState() { - this.closeToolsDropdown(); + this._dropDown.closeToolsDropDown(); this._dom.resetTemplates(); } @@ -600,23 +438,13 @@ class ReportUIFeatures { } } - this.closeToolsDropdown(); + this._dropDown.closeToolsDropDown(); } _print() { self.print(); } - /** - * Keydown handler for the document. - * @param {KeyboardEvent} e - */ - onKeyDown(e) { - if (e.keyCode === 27) { // ESC - this.closeToolsDropdown(); - } - } - /** * Keyup handler for the document. * @param {KeyboardEvent} e @@ -624,7 +452,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.closeToolsDropdown(); + this._dropDown.closeToolsDropDown(); } } @@ -788,6 +616,192 @@ class ReportUIFeatures { } } +class DropDown { + /** + * @param {DOM} dom + */ + constructor(dom) { + /** @type {DOM} */ + this._dom = dom; + /** @type {HTMLElement} */ + this.toolsButton; // eslint-disable-line no-unused-expressions + /** @type {HTMLElement} */ + this.toolsDropDown; // eslint-disable-line no-unused-expressions + + this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this); + this.onToolsButtonClick = this.onToolsButtonClick.bind(this); + this.onToolsButtonKeydown = this.onToolsButtonKeydown.bind(this); + this.onToolsDropDownKeydown = this.onToolsDropDownKeydown.bind(this); + + this._getNextDropDownItem = this._getNextDropDownItem.bind(this); + this._getNextSelectableNode = this._getNextSelectableNode.bind(this); + this._getPreviousDropDownItem = this._getPreviousDropDownItem.bind(this); + } + + setupToolsDropDown() { + this.toolsButton = this._dom.find('.lh-tools__button', this._dom.document()); + this.toolsButton.addEventListener('click', this.onToolsButtonClick); + this.toolsButton.addEventListener('keydown', this.onToolsButtonKeydown); + + this.toolsDropDown = this._dom.find('.lh-tools__dropdown', this._dom.document()); + this.toolsDropDown.addEventListener('keydown', this.onToolsDropDownKeydown); + } + + closeToolsDropDown() { + this.toolsButton.classList.remove('active'); + this.toolsButton.setAttribute('aria-expanded', 'false'); + if (this.toolsDropDown.contains(this._dom.document().activeElement)) { + // Refocus on the tools button if the drop down last had focus + this.toolsButton.focus(); + } + this._dom.document().removeEventListener('keydown', this.onDocumentKeyDown); + } + + /** + * @param {HTMLElement} firstFocusElement + */ + openToolsDropDown(firstFocusElement) { + if (this.toolsButton.classList.contains('active')) { + // If the drop down is already open focus on the element + firstFocusElement.focus(); + } else { + // Wait for drop down transition to complete so options are focusable. + this.toolsDropDown.addEventListener('transitionend', () => { + firstFocusElement.focus(); + }, {once: true}); + } + + this.toolsButton.classList.add('active'); + this.toolsButton.setAttribute('aria-expanded', 'true'); + this._dom.document().addEventListener('keydown', this.onDocumentKeyDown); + } + + /** + * Click handler for tools button. + * @param {Event} e + */ + onToolsButtonClick(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + + if (this.toolsButton.classList.contains('active')) { + this.closeToolsDropDown(); + } else { + this.openToolsDropDown(this._getNextDropDownItem()); + } + } + + /** + * Handler for tool button. + * @param {KeyboardEvent} e + */ + onToolsButtonKeydown(e) { + switch (e.code) { + case 'ArrowUp': + e.preventDefault(); + this.openToolsDropDown(this._getPreviousDropDownItem()); + break; + case 'ArrowDown': + case 'Enter': + case ' ': + e.preventDefault(); + this.openToolsDropDown(this._getNextDropDownItem()); + break; + default: + // no op + } + } + + /** + * Handler for tool DropDown. + * @param {KeyboardEvent} e + */ + onToolsDropDownKeydown(e) { + const el = /** @type {?HTMLElement} */ (e.target); + + switch (e.code) { + case 'ArrowUp': + e.preventDefault(); + this._getPreviousDropDownItem(el).focus(); + break; + case 'ArrowDown': + e.preventDefault(); + this._getNextDropDownItem(el).focus(); + break; + case 'Home': + e.preventDefault(); + this._getNextDropDownItem().focus(); + break; + case 'End': + e.preventDefault(); + this._getPreviousDropDownItem().focus(); + break; + default: + // no op + } + } + + /** + * Keydown handler for the document. + * @param {KeyboardEvent} e + */ + onDocumentKeyDown(e) { + if (e.keyCode === 27) { // ESC + this.closeToolsDropDown(); + } + } + + /** + * @param {Array} allNodes + * @param {?Node=} startNode + * @returns {Node} + */ + _getNextSelectableNode(allNodes, startNode) { + const nodes = allNodes.filter((node) => { + if (!(node instanceof HTMLElement)) { + return false; + } + + // 'Save as Gist' option may be disabled. + if (node.hasAttribute('disabled')) { + return false; + } + + // 'Save as Gist' option may have display none. + if (window.getComputedStyle(node).display === 'none') { + return false; + } + + return true; + }); + + let nextIndex = startNode ? (nodes.indexOf(startNode) + 1) : 0; + if (nextIndex >= nodes.length) { + nextIndex = 0; + } + + return nodes[nextIndex]; + } + + /** + * @param {?Element=} startEl + * @returns {HTMLElement} + */ + _getNextDropDownItem(startEl) { + const nodes = Array.from(this.toolsDropDown.childNodes); + return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); + } + + /** + * @param {?Element=} startEl + * @returns {HTMLElement} + */ + _getPreviousDropDownItem(startEl) { + const nodes = Array.from(this.toolsDropDown.childNodes).reverse(); + return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); + } +} + if (typeof module !== 'undefined' && module.exports) { module.exports = ReportUIFeatures; } else { diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js index 9f93127e797e..2843188a15ef 100644 --- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js +++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js @@ -269,75 +269,76 @@ describe('ReportUIFeatures', () => { describe('tools button', () => { let window; - let features; + let dropDown; beforeEach(() => { window = dom.document().defaultView; - features = new ReportUIFeatures(dom); + const features = new ReportUIFeatures(dom); features.initFeatures(sampleResults); + dropDown = features._dropDown; }); it('click should toggle active class', () => { - features.toolsButton.click(); - assert.ok(features.toolsButton.classList.contains('active')); + dropDown.toolsButton.click(); + assert.ok(dropDown.toolsButton.classList.contains('active')); - features.toolsButton.click(); - assert.ok(!features.toolsButton.classList.contains('active')); + dropDown.toolsButton.click(); + assert.ok(!dropDown.toolsButton.classList.contains('active')); }); it('Escape key removes active class', () => { - features.toolsButton.click(); - assert.ok(features.toolsButton.classList.contains('active')); + dropDown.toolsButton.click(); + assert.ok(dropDown.toolsButton.classList.contains('active')); const escape = new window.KeyboardEvent('keydown', {keyCode: /* ESC */ 27}); dom.document().dispatchEvent(escape); - assert.ok(!features.toolsButton.classList.contains('active')); + assert.ok(!dropDown.toolsButton.classList.contains('active')); }); ['ArrowUp', 'ArrowDown', 'Enter', ' '].forEach((code) => { it(`'${code}' adds active class`, () => { const event = new window.KeyboardEvent('keydown', {code}); - features.toolsButton.dispatchEvent(event); - assert.ok(features.toolsButton.classList.contains('active')); + dropDown.toolsButton.dispatchEvent(event); + assert.ok(dropDown.toolsButton.classList.contains('active')); }); }); it('ArrowUp on the first menu element should focus the last element', () => { - features.toolsButton.click(); + dropDown.toolsButton.click(); const arrowUp = new window.KeyboardEvent('keydown', {bubbles: true, code: 'ArrowUp'}); - features.toolsDropDown.firstElementChild.dispatchEvent(arrowUp); + dropDown.toolsDropDown.firstElementChild.dispatchEvent(arrowUp); - assert.strictEqual(dom.document().activeElement, features.toolsDropDown.lastElementChild); + assert.strictEqual(dom.document().activeElement, dropDown.toolsDropDown.lastElementChild); }); it('ArrowDown on the first menu element should focus the second element', () => { - features.toolsButton.click(); + dropDown.toolsButton.click(); - const {nextElementSibling} = features.toolsDropDown.firstElementChild; + const {nextElementSibling} = dropDown.toolsDropDown.firstElementChild; const arrowDown = new window.KeyboardEvent('keydown', {bubbles: true, code: 'ArrowDown'}); - features.toolsDropDown.firstElementChild.dispatchEvent(arrowDown); + dropDown.toolsDropDown.firstElementChild.dispatchEvent(arrowDown); assert.strictEqual(dom.document().activeElement, nextElementSibling); }); it('Home on the last menu element should focus the first element', () => { - features.toolsButton.click(); + dropDown.toolsButton.click(); - const {firstElementChild} = features.toolsDropDown; + const {firstElementChild} = dropDown.toolsDropDown; const home = new window.KeyboardEvent('keydown', {bubbles: true, code: 'Home'}); - features.toolsDropDown.lastElementChild.dispatchEvent(home); + dropDown.toolsDropDown.lastElementChild.dispatchEvent(home); assert.strictEqual(dom.document().activeElement, firstElementChild); }); it('End on the first menu element should focus the last element', () => { - features.toolsButton.click(); + dropDown.toolsButton.click(); - const {lastElementChild} = features.toolsDropDown; + const {lastElementChild} = dropDown.toolsDropDown; const end = new window.KeyboardEvent('keydown', {bubbles: true, code: 'End'}); - features.toolsDropDown.firstElementChild.dispatchEvent(end); + dropDown.toolsDropDown.firstElementChild.dispatchEvent(end); assert.strictEqual(dom.document().activeElement, lastElementChild); }); @@ -352,7 +353,7 @@ describe('ReportUIFeatures', () => { it('should return first node when start is undefined', () => { const nodes = [createDiv(), createDiv()]; - const nextNode = features._getNextSelectableNode(nodes); + const nextNode = dropDown._getNextSelectableNode(nodes); assert.strictEqual(nextNode, nodes[0]); }); @@ -360,7 +361,7 @@ describe('ReportUIFeatures', () => { it('should return second node when start is first node', () => { const nodes = [createDiv(), createDiv()]; - const nextNode = features._getNextSelectableNode(nodes, nodes[0]); + const nextNode = dropDown._getNextSelectableNode(nodes, nodes[0]); assert.strictEqual(nextNode, nodes[1]); }); @@ -368,7 +369,7 @@ describe('ReportUIFeatures', () => { it('should return first node when start is second node', () => { const nodes = [createDiv(), createDiv()]; - const nextNode = features._getNextSelectableNode(nodes, nodes[1]); + const nextNode = dropDown._getNextSelectableNode(nodes, nodes[1]); assert.strictEqual(nextNode, nodes[0]); }); @@ -376,7 +377,7 @@ describe('ReportUIFeatures', () => { it('should skip the undefined node', () => { const nodes = [createDiv(), undefined, createDiv()]; - const nextNode = features._getNextSelectableNode(nodes, nodes[0]); + const nextNode = dropDown._getNextSelectableNode(nodes, nodes[0]); assert.strictEqual(nextNode, nodes[2]); }); @@ -386,7 +387,7 @@ describe('ReportUIFeatures', () => { disabledNode.setAttribute('disabled', true); const nodes = [createDiv(), disabledNode, createDiv()]; - const nextNode = features._getNextSelectableNode(nodes, nodes[0]); + const nextNode = dropDown._getNextSelectableNode(nodes, nodes[0]); assert.strictEqual(nextNode, nodes[2]); }); From 7b93fed5e64e1dcc85ebb695e035de60b57a6088 Mon Sep 17 00:00:00 2001 From: John Emau Date: Thu, 15 Aug 2019 21:43:45 -0700 Subject: [PATCH 2/2] Renames and small refactor of setup method based on review feedback --- .../renderer/performance-category-renderer.js | 4 +- .../html/renderer/report-ui-features.js | 97 ++++++++++--------- .../html/renderer/report-ui-features-test.js | 42 ++++---- 3 files changed, 73 insertions(+), 70 deletions(-) diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 52c0975f02ff..51e2b630143e 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -127,8 +127,8 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Metric descriptions toggle. const toggleTmpl = this.dom.cloneTemplate('#tmpl-lh-metrics-toggle', this.templateContext); - const toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl); - metricAuditsEl.append(...toggleEl.childNodes); + const _toggleEl = this.dom.find('.lh-metrics-toggle', toggleTmpl); + metricAuditsEl.append(..._toggleEl.childNodes); const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics'); const keyMetrics = metricAudits.filter(a => a.weight >= 3); diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 9dbb016f03e5..7de3a0566966 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -61,7 +61,7 @@ class ReportUIFeatures { this.onMediaQueryChange = this.onMediaQueryChange.bind(this); this.onCopy = this.onCopy.bind(this); - this.onToolAction = this.onToolAction.bind(this); + this.onDropDownMenuClick = this.onDropDownMenuClick.bind(this); this.onKeyUp = this.onKeyUp.bind(this); this.onChevronClick = this.onChevronClick.bind(this); this.collapseAllDetails = this.collapseAllDetails.bind(this); @@ -79,8 +79,7 @@ class ReportUIFeatures { this.json = report; this._setupMediaQueryListeners(); - this._dropDown.setupToolsDropDown(); - this._dropDown.toolsDropDown.addEventListener('click', this.onToolAction); + this._dropDown.setup(this.onDropDownMenuClick); this._setupThirdPartyFilter(); this._setUpCollapseDetailsAfterPrinting(); this._resetUIState(); @@ -378,7 +377,7 @@ class ReportUIFeatures { * be in their closed state (not opened) and the templates should be unstamped. */ _resetUIState() { - this._dropDown.closeToolsDropDown(); + this._dropDown.close(); this._dom.resetTemplates(); } @@ -386,7 +385,7 @@ class ReportUIFeatures { * Handler for tool button. * @param {Event} e */ - onToolAction(e) { + onDropDownMenuClick(e) { e.preventDefault(); const el = /** @type {?Element} */ (e.target); @@ -438,7 +437,7 @@ class ReportUIFeatures { } } - this._dropDown.closeToolsDropDown(); + this._dropDown.close(); } _print() { @@ -452,7 +451,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._dropDown.closeToolsDropDown(); + this._dropDown.close(); } } @@ -624,35 +623,39 @@ class DropDown { /** @type {DOM} */ this._dom = dom; /** @type {HTMLElement} */ - this.toolsButton; // eslint-disable-line no-unused-expressions + this._toggleEl; // eslint-disable-line no-unused-expressions /** @type {HTMLElement} */ - this.toolsDropDown; // eslint-disable-line no-unused-expressions + this._menuEl; // eslint-disable-line no-unused-expressions this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this); - this.onToolsButtonClick = this.onToolsButtonClick.bind(this); - this.onToolsButtonKeydown = this.onToolsButtonKeydown.bind(this); - this.onToolsDropDownKeydown = this.onToolsDropDownKeydown.bind(this); + this.onToggleClick = this.onToggleClick.bind(this); + this.onToggleKeydown = this.onToggleKeydown.bind(this); + this.onMenuKeydown = this.onMenuKeydown.bind(this); - this._getNextDropDownItem = this._getNextDropDownItem.bind(this); + this._getNextMenuItem = this._getNextMenuItem.bind(this); this._getNextSelectableNode = this._getNextSelectableNode.bind(this); - this._getPreviousDropDownItem = this._getPreviousDropDownItem.bind(this); + this._getPreviousMenuItem = this._getPreviousMenuItem.bind(this); } - setupToolsDropDown() { - this.toolsButton = this._dom.find('.lh-tools__button', this._dom.document()); - this.toolsButton.addEventListener('click', this.onToolsButtonClick); - this.toolsButton.addEventListener('keydown', this.onToolsButtonKeydown); + /** + * @param {function(MouseEvent): any} menuClickHandler + */ + setup(menuClickHandler) { + this._toggleEl = this._dom.find('.lh-tools__button', this._dom.document()); + this._toggleEl.addEventListener('click', this.onToggleClick); + this._toggleEl.addEventListener('keydown', this.onToggleKeydown); - this.toolsDropDown = this._dom.find('.lh-tools__dropdown', this._dom.document()); - this.toolsDropDown.addEventListener('keydown', this.onToolsDropDownKeydown); + this._menuEl = this._dom.find('.lh-tools__dropdown', this._dom.document()); + this._menuEl.addEventListener('keydown', this.onMenuKeydown); + this._menuEl.addEventListener('click', menuClickHandler); } - closeToolsDropDown() { - this.toolsButton.classList.remove('active'); - this.toolsButton.setAttribute('aria-expanded', 'false'); - if (this.toolsDropDown.contains(this._dom.document().activeElement)) { + close() { + this._toggleEl.classList.remove('active'); + this._toggleEl.setAttribute('aria-expanded', 'false'); + if (this._menuEl.contains(this._dom.document().activeElement)) { // Refocus on the tools button if the drop down last had focus - this.toolsButton.focus(); + this._toggleEl.focus(); } this._dom.document().removeEventListener('keydown', this.onDocumentKeyDown); } @@ -660,19 +663,19 @@ class DropDown { /** * @param {HTMLElement} firstFocusElement */ - openToolsDropDown(firstFocusElement) { - if (this.toolsButton.classList.contains('active')) { + open(firstFocusElement) { + if (this._toggleEl.classList.contains('active')) { // If the drop down is already open focus on the element firstFocusElement.focus(); } else { // Wait for drop down transition to complete so options are focusable. - this.toolsDropDown.addEventListener('transitionend', () => { + this._menuEl.addEventListener('transitionend', () => { firstFocusElement.focus(); }, {once: true}); } - this.toolsButton.classList.add('active'); - this.toolsButton.setAttribute('aria-expanded', 'true'); + this._toggleEl.classList.add('active'); + this._toggleEl.setAttribute('aria-expanded', 'true'); this._dom.document().addEventListener('keydown', this.onDocumentKeyDown); } @@ -680,14 +683,14 @@ class DropDown { * Click handler for tools button. * @param {Event} e */ - onToolsButtonClick(e) { + onToggleClick(e) { e.preventDefault(); e.stopImmediatePropagation(); - if (this.toolsButton.classList.contains('active')) { - this.closeToolsDropDown(); + if (this._toggleEl.classList.contains('active')) { + this.close(); } else { - this.openToolsDropDown(this._getNextDropDownItem()); + this.open(this._getNextMenuItem()); } } @@ -695,17 +698,17 @@ class DropDown { * Handler for tool button. * @param {KeyboardEvent} e */ - onToolsButtonKeydown(e) { + onToggleKeydown(e) { switch (e.code) { case 'ArrowUp': e.preventDefault(); - this.openToolsDropDown(this._getPreviousDropDownItem()); + this.open(this._getPreviousMenuItem()); break; case 'ArrowDown': case 'Enter': case ' ': e.preventDefault(); - this.openToolsDropDown(this._getNextDropDownItem()); + this.open(this._getNextMenuItem()); break; default: // no op @@ -716,25 +719,25 @@ class DropDown { * Handler for tool DropDown. * @param {KeyboardEvent} e */ - onToolsDropDownKeydown(e) { + onMenuKeydown(e) { const el = /** @type {?HTMLElement} */ (e.target); switch (e.code) { case 'ArrowUp': e.preventDefault(); - this._getPreviousDropDownItem(el).focus(); + this._getPreviousMenuItem(el).focus(); break; case 'ArrowDown': e.preventDefault(); - this._getNextDropDownItem(el).focus(); + this._getNextMenuItem(el).focus(); break; case 'Home': e.preventDefault(); - this._getNextDropDownItem().focus(); + this._getNextMenuItem().focus(); break; case 'End': e.preventDefault(); - this._getPreviousDropDownItem().focus(); + this._getPreviousMenuItem().focus(); break; default: // no op @@ -747,7 +750,7 @@ class DropDown { */ onDocumentKeyDown(e) { if (e.keyCode === 27) { // ESC - this.closeToolsDropDown(); + this.close(); } } @@ -787,8 +790,8 @@ class DropDown { * @param {?Element=} startEl * @returns {HTMLElement} */ - _getNextDropDownItem(startEl) { - const nodes = Array.from(this.toolsDropDown.childNodes); + _getNextMenuItem(startEl) { + const nodes = Array.from(this._menuEl.childNodes); return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); } @@ -796,8 +799,8 @@ class DropDown { * @param {?Element=} startEl * @returns {HTMLElement} */ - _getPreviousDropDownItem(startEl) { - const nodes = Array.from(this.toolsDropDown.childNodes).reverse(); + _getPreviousMenuItem(startEl) { + const nodes = Array.from(this._menuEl.childNodes).reverse(); return /** @type {HTMLElement} */ (this._getNextSelectableNode(nodes, startEl)); } } diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js index 2843188a15ef..0617e471c84e 100644 --- a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js +++ b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js @@ -279,66 +279,66 @@ describe('ReportUIFeatures', () => { }); it('click should toggle active class', () => { - dropDown.toolsButton.click(); - assert.ok(dropDown.toolsButton.classList.contains('active')); + dropDown._toggleEl.click(); + assert.ok(dropDown._toggleEl.classList.contains('active')); - dropDown.toolsButton.click(); - assert.ok(!dropDown.toolsButton.classList.contains('active')); + dropDown._toggleEl.click(); + assert.ok(!dropDown._toggleEl.classList.contains('active')); }); it('Escape key removes active class', () => { - dropDown.toolsButton.click(); - assert.ok(dropDown.toolsButton.classList.contains('active')); + dropDown._toggleEl.click(); + assert.ok(dropDown._toggleEl.classList.contains('active')); const escape = new window.KeyboardEvent('keydown', {keyCode: /* ESC */ 27}); dom.document().dispatchEvent(escape); - assert.ok(!dropDown.toolsButton.classList.contains('active')); + assert.ok(!dropDown._toggleEl.classList.contains('active')); }); ['ArrowUp', 'ArrowDown', 'Enter', ' '].forEach((code) => { it(`'${code}' adds active class`, () => { const event = new window.KeyboardEvent('keydown', {code}); - dropDown.toolsButton.dispatchEvent(event); - assert.ok(dropDown.toolsButton.classList.contains('active')); + dropDown._toggleEl.dispatchEvent(event); + assert.ok(dropDown._toggleEl.classList.contains('active')); }); }); it('ArrowUp on the first menu element should focus the last element', () => { - dropDown.toolsButton.click(); + dropDown._toggleEl.click(); const arrowUp = new window.KeyboardEvent('keydown', {bubbles: true, code: 'ArrowUp'}); - dropDown.toolsDropDown.firstElementChild.dispatchEvent(arrowUp); + dropDown._menuEl.firstElementChild.dispatchEvent(arrowUp); - assert.strictEqual(dom.document().activeElement, dropDown.toolsDropDown.lastElementChild); + assert.strictEqual(dom.document().activeElement, dropDown._menuEl.lastElementChild); }); it('ArrowDown on the first menu element should focus the second element', () => { - dropDown.toolsButton.click(); + dropDown._toggleEl.click(); - const {nextElementSibling} = dropDown.toolsDropDown.firstElementChild; + const {nextElementSibling} = dropDown._menuEl.firstElementChild; const arrowDown = new window.KeyboardEvent('keydown', {bubbles: true, code: 'ArrowDown'}); - dropDown.toolsDropDown.firstElementChild.dispatchEvent(arrowDown); + dropDown._menuEl.firstElementChild.dispatchEvent(arrowDown); assert.strictEqual(dom.document().activeElement, nextElementSibling); }); it('Home on the last menu element should focus the first element', () => { - dropDown.toolsButton.click(); + dropDown._toggleEl.click(); - const {firstElementChild} = dropDown.toolsDropDown; + const {firstElementChild} = dropDown._menuEl; const home = new window.KeyboardEvent('keydown', {bubbles: true, code: 'Home'}); - dropDown.toolsDropDown.lastElementChild.dispatchEvent(home); + dropDown._menuEl.lastElementChild.dispatchEvent(home); assert.strictEqual(dom.document().activeElement, firstElementChild); }); it('End on the first menu element should focus the last element', () => { - dropDown.toolsButton.click(); + dropDown._toggleEl.click(); - const {lastElementChild} = dropDown.toolsDropDown; + const {lastElementChild} = dropDown._menuEl; const end = new window.KeyboardEvent('keydown', {bubbles: true, code: 'End'}); - dropDown.toolsDropDown.firstElementChild.dispatchEvent(end); + dropDown._menuEl.firstElementChild.dispatchEvent(end); assert.strictEqual(dom.document().activeElement, lastElementChild); });