lighthouse 8.3.0-dev.20210907 → 8.3.0

package/report/renderer/report-ui-features.js

@@ -16,6 +16,8 @@
  */
 'use strict';
 
+/* eslint-env browser */
+
 /**
  * @fileoverview Adds tools button, print, and other dynamic functionality to
  * the report.
@@ -23,12 +25,10 @@
 
 /** @typedef {import('./dom').DOM} DOM */
 
+import {getFilenamePrefix} from './file-namer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
-import {toggleDarkTheme} from './features-util.js';
-import {openTreemap} from './open-tab.js';
-import {TopbarFeatures} from './topbar-features.js';
+import {TextEncoding} from './text-encoding.js';
 import {Util} from './util.js';
-import {getFilenamePrefix} from '../generator/file-namer.js';
 
 /**
  * @param {HTMLTableElement} tableEl
@@ -37,6 +37,16 @@ import {getFilenamePrefix} from '../generator/file-namer.js';
 function getTableRows(tableEl) {
   return Array.from(tableEl.tBodies[0].rows);
 }
+
+function getAppsOrigin() {
+  const isVercel = window.location.host.endsWith('.vercel.app');
+  const isDev = new URLSearchParams(window.location.search).has('dev');
+
+  if (isVercel) return `https://${window.location.host}/gh-pages`;
+  if (isDev) return 'http://localhost:8000';
+  return 'https://googlechrome.github.io/lighthouse';
+}
+
 export class ReportUIFeatures {
   /**
    * @param {DOM} dom
@@ -48,24 +58,48 @@ export class ReportUIFeatures {
     this._dom = dom;
     /** @type {Document} */
     this._document = this._dom.document();
-    this._topbar = new TopbarFeatures(this, dom);
+    /** @type {DropDown} */
+    this._dropDown = new DropDown(this._dom);
+    /** @type {boolean} */
+    this._copyAttempt = false;
+    /** @type {HTMLElement} */
+    this.topbarEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.scoreScaleEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.stickyHeaderEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this.highlightEl; // eslint-disable-line no-unused-expressions
 
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
+    this.onCopy = this.onCopy.bind(this);
+    this.onDropDownMenuClick = this.onDropDownMenuClick.bind(this);
+    this.onKeyUp = this.onKeyUp.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);
   }
 
   /**
    * 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} lhr
+   * @param {LH.Result} report
    */
-  initFeatures(lhr) {
-    this.json = lhr;
+  initFeatures(report) {
+    this.json = report;
 
-    this._topbar.enable(lhr);
-    this._topbar.resetUIState();
     this._setupMediaQueryListeners();
+    this._dropDown.setup(this.onDropDownMenuClick);
     this._setupThirdPartyFilter();
     this._setupElementScreenshotOverlay(this._dom.find('.lh-container', this._document));
+    this._setUpCollapseDetailsAfterPrinting();
+    this._resetUIState();
+    this._document.addEventListener('keyup', this.onKeyUp);
+    this._document.addEventListener('copy', this.onCopy);
+
+    const topbarLogo = this._dom.find('.lh-topbar__logo', this._document);
+    topbarLogo.addEventListener('click', () => this._toggleDarkTheme());
 
     let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
@@ -78,7 +112,7 @@ export class ReportUIFeatures {
     // To get fireworks you need 100 scores in all core categories, except PWA (because going the PWA route is discretionary).
     const fireworksRequiredCategoryIds = ['performance', 'accessibility', 'best-practices', 'seo'];
     const scoresAll100 = fireworksRequiredCategoryIds.every(id => {
-      const cat = lhr.categories[id];
+      const cat = report.categories[id];
       return cat && cat.score === 1;
     });
     if (scoresAll100) {
@@ -87,12 +121,32 @@ export class ReportUIFeatures {
     }
 
     if (turnOffTheLights) {
-      toggleDarkTheme(this._dom, true);
+      this._toggleDarkTheme(true);
+    }
+
+    // There is only a sticky header when at least 2 categories are present.
+    if (Object.keys(this.json.categories).length >= 2) {
+      this._setupStickyHeaderElements();
+      const containerEl = this._dom.find('.lh-container', this._document);
+      const elToAddScrollListener = this._getScrollParent(containerEl);
+      elToAddScrollListener.addEventListener('scroll', this._updateStickyHeaderOnScroll);
+
+      // Use ResizeObserver where available.
+      // TODO: there is an issue with incorrect position numbers and, as a result, performance
+      // issues due to layout thrashing.
+      // See https://github.com/GoogleChrome/lighthouse/pull/9023/files#r288822287 for details.
+      // For now, limit to DevTools.
+      if (this._dom.isDevTools()) {
+        const resizeObserver = new window.ResizeObserver(this._updateStickyHeaderOnScroll);
+        resizeObserver.observe(containerEl);
+      } else {
+        window.addEventListener('resize', this._updateStickyHeaderOnScroll);
+      }
     }
 
     // Show the metric descriptions by default when there is an error.
-    const hasMetricError = lhr.categories.performance && lhr.categories.performance.auditRefs
-      .some(audit => Boolean(audit.group === 'metrics' && lhr.audits[audit.id].errorMessage));
+    const hasMetricError = report.categories.performance && report.categories.performance.auditRefs
+      .some(audit => Boolean(audit.group === 'metrics' && report.audits[audit.id].errorMessage));
     if (hasMetricError) {
       const toggleInputEl = this._dom.find('input.lh-metrics-toggle__input', this._document);
       toggleInputEl.checked = true;
@@ -104,7 +158,7 @@ export class ReportUIFeatures {
       this.addButton({
         text: Util.i18n.strings.viewTreemapLabel,
         icon: 'treemap',
-        onClick: () => openTreemap(this.json),
+        onClick: () => ReportUIFeatures.openTreemap(this.json),
       });
     }
 
@@ -112,12 +166,18 @@ export class ReportUIFeatures {
     for (const node of this._dom.findAll('[data-i18n]', this._dom.document())) {
       // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
       // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
-      const i18nKey = node.getAttribute('data-i18n');
-      const i18nAttr = /** @type {keyof typeof Util.i18n.strings} */ (i18nKey);
+      const i18nAttr = /** @type {keyof LH.I18NRendererStrings} */ (node.getAttribute('data-i18n'));
       node.textContent = Util.i18n.strings[i18nAttr];
     }
   }
 
+  /**
+   * @param {ParentNode} _
+   */
+  setTemplateContext(_) {
+    // Removed, exists until usage is removed from CDT.
+  }
+
   /**
    * @param {{container?: Element, text: string, icon?: string, onClick: () => void}} opts
    */
@@ -136,8 +196,8 @@ export class ReportUIFeatures {
       'lh-button',
     ];
     if (opts.icon) {
-      classes.push('lh-report-icon');
-      classes.push(`lh-report-icon--${opts.icon}`);
+      classes.push('report-icon');
+      classes.push(`report-icon--${opts.icon}`);
     }
     const buttonEl = this._dom.createChildOf(buttonsEl, 'button', classes.join(' '));
     buttonEl.textContent = opts.text;
@@ -146,30 +206,44 @@ export class ReportUIFeatures {
   }
 
   /**
-   * Returns the html that recreates this report.
-   * @return {string}
+   * Finds the first scrollable ancestor of `element`. Falls back to the document.
+   * @param {Element} element
+   * @return {Node}
    */
-  getReportHtml() {
-    this._topbar.resetUIState();
-    return this._document.documentElement.outerHTML;
-  }
+  _getScrollParent(element) {
+    const {overflowY} = window.getComputedStyle(element);
+    const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
 
-  /**
-   * Save json as a gist. Unimplemented in base UI features.
-   */
-  saveAsGist() {
-    // TODO ?
-    throw new Error('Cannot save as gist from base report');
+    if (isScrollable) {
+      return element;
+    }
+
+    if (element.parentElement) {
+      return this._getScrollParent(element.parentElement);
+    }
+
+    return document;
   }
 
   _enableFireworks() {
     const scoresContainer = this._dom.find('.lh-scores-container', this._document);
-    scoresContainer.classList.add('lh-score100');
+    scoresContainer.classList.add('score100');
     scoresContainer.addEventListener('click', _ => {
-      scoresContainer.classList.toggle('lh-fireworks-paused');
+      scoresContainer.classList.toggle('fireworks-paused');
     });
   }
 
+  /**
+   * Fires a custom DOM event on target.
+   * @param {string} name Name of the event.
+   * @param {Node=} target DOM node to fire the event on.
+   * @param {*=} detail Custom data to include.
+   */
+  _fireEventOn(name, target = this._document, detail) {
+    const event = new CustomEvent(name, detail ? {detail} : undefined);
+    target.dispatchEvent(event);
+  }
+
   _setupMediaQueryListeners() {
     const mediaQuery = self.matchMedia('(max-width: 500px)');
     mediaQuery.addListener(this.onMediaQueryChange);
@@ -177,15 +251,6 @@ export class ReportUIFeatures {
     this.onMediaQueryChange(mediaQuery);
   }
 
-  /**
-   * 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._topbar.resetUIState();
-  }
-
   /**
    * Handle media query change events.
    * @param {MediaQueryList|MediaQueryListEvent} mql
@@ -326,9 +391,311 @@ export class ReportUIFeatures {
     return thirdPartyRows;
   }
 
+  _setupStickyHeaderElements() {
+    this.topbarEl = this._dom.find('div.lh-topbar', this._document);
+    this.scoreScaleEl = this._dom.find('div.lh-scorescale', this._document);
+    this.stickyHeaderEl = this._dom.find('div.lh-sticky-header', this._document);
+
+    // Highlighter will be absolutely positioned at first gauge, then transformed on scroll.
+    this.highlightEl = this._dom.createChildOf(this.stickyHeaderEl, 'div', 'lh-highlighter');
+  }
+
+  /**
+   * Handle copy events.
+   * @param {ClipboardEvent} e
+   */
+  onCopy(e) {
+    // Only handle copy button presses (e.g. ignore the user copying page text).
+    if (this._copyAttempt && e.clipboardData) {
+      // We want to write our own data to the clipboard, not the user's text selection.
+      e.preventDefault();
+      e.clipboardData.setData('text/plain', JSON.stringify(this.json, null, 2));
+
+      this._fireEventOn('lh-log', this._document, {
+        cmd: 'log', msg: 'Report JSON copied to clipboard',
+      });
+    }
+
+    this._copyAttempt = false;
+  }
+
+  /**
+   * Copies the report JSON to the clipboard (if supported by the browser).
+   */
+  onCopyButtonClick() {
+    this._fireEventOn('lh-analytics', this._document, {
+      cmd: 'send',
+      fields: {hitType: 'event', eventCategory: 'report', eventAction: 'copy'},
+    });
+
+    try {
+      if (this._document.queryCommandSupported('copy')) {
+        this._copyAttempt = true;
+
+        // Note: In Safari 10.0.1, execCommand('copy') returns true if there's
+        // a valid text selection on the page. See http://caniuse.com/#feat=clipboard.
+        if (!this._document.execCommand('copy')) {
+          this._copyAttempt = false; // Prevent event handler from seeing this as a copy attempt.
+
+          this._fireEventOn('lh-log', this._document, {
+            cmd: 'warn', msg: 'Your browser does not support copy to clipboard.',
+          });
+        }
+      }
+    } catch (/** @type {Error} */ e) {
+      this._copyAttempt = false;
+      this._fireEventOn('lh-log', this._document, {cmd: 'log', msg: e.message});
+    }
+  }
+
+  /**
+   * 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._dropDown.close();
+  }
+
+  /**
+   * Handler for tool button.
+   * @param {Event} e
+   */
+  onDropDownMenuClick(e) {
+    e.preventDefault();
+
+    const el = /** @type {?Element} */ (e.target);
+
+    if (!el || !el.hasAttribute('data-action')) {
+      return;
+    }
+
+    switch (el.getAttribute('data-action')) {
+      case 'copy':
+        this.onCopyButtonClick();
+        break;
+      case 'print-summary':
+        this.collapseAllDetails();
+        this._print();
+        break;
+      case 'print-expanded':
+        this.expandAllDetails();
+        this._print();
+        break;
+      case 'save-json': {
+        const jsonStr = JSON.stringify(this.json, null, 2);
+        this._saveFile(new Blob([jsonStr], {type: 'application/json'}));
+        break;
+      }
+      case 'save-html': {
+        const htmlStr = this.getReportHtml();
+        try {
+          this._saveFile(new Blob([htmlStr], {type: 'text/html'}));
+        } catch (/** @type {Error} */ e) {
+          this._fireEventOn('lh-log', this._document, {
+            cmd: 'error', msg: 'Could not export as HTML. ' + e.message,
+          });
+        }
+        break;
+      }
+      case 'open-viewer': {
+        // DevTools cannot send data with postMessage, and we only want to use the URL fragment
+        // approach for viewer when needed, so check the environment and choose accordingly.
+        if (this._dom.isDevTools()) {
+          ReportUIFeatures.openViewer(this.json);
+        } else {
+          const windowName = 'viewer-' + ReportUIFeatures.computeWindowNameSuffix(this.json);
+          const url = getAppsOrigin() + '/viewer/';
+          ReportUIFeatures.openTabWithUrlData({lhr: this.json}, url, windowName);
+        }
+        break;
+      }
+      case 'save-gist': {
+        this.saveAsGist();
+        break;
+      }
+      case 'toggle-dark': {
+        this._toggleDarkTheme();
+        break;
+      }
+    }
+
+    this._dropDown.close();
+  }
+
+  _print() {
+    self.print();
+  }
+
+  /**
+   * Keyup handler for the document.
+   * @param {KeyboardEvent} e
+   */
+  onKeyUp(e) {
+    // Ctrl+P - Expands audit details when user prints via keyboard shortcut.
+    if ((e.ctrlKey || e.metaKey) && e.keyCode === 80) {
+      this._dropDown.close();
+    }
+  }
+
+  /**
+   * The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly.
+   * @param {LH.Result} json
+   * @protected
+   */
+  static computeWindowNameSuffix(json) {
+    // @ts-ignore - If this is a v2 LHR, use old `generatedTime`.
+    const fallbackFetchTime = /** @type {string} */ (json.generatedTime);
+    const fetchTime = json.fetchTime || fallbackFetchTime;
+    return `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
+  }
+
+  /**
+   * Opens a new tab to the online viewer and sends the local page's JSON results
+   * to the online viewer using URL.fragment
+   * @param {LH.Result} json
+   * @protected
+   */
+  static openViewer(json) {
+    const windowName = 'viewer-' + this.computeWindowNameSuffix(json);
+    const url = getAppsOrigin() + '/viewer/';
+    ReportUIFeatures.openTabWithUrlData({lhr: json}, url, windowName);
+  }
+
+  /**
+   * Opens a new tab to the treemap app and sends the JSON results using URL.fragment
+   * @param {LH.Result} json
+   */
+  static openTreemap(json) {
+    const treemapData = json.audits['script-treemap-data'].details;
+    if (!treemapData) {
+      throw new Error('no script treemap data found');
+    }
+
+    /** @type {LH.Treemap.Options} */
+    const treemapOptions = {
+      lhr: {
+        requestedUrl: json.requestedUrl,
+        finalUrl: json.finalUrl,
+        audits: {
+          'script-treemap-data': json.audits['script-treemap-data'],
+        },
+        configSettings: {
+          locale: json.configSettings.locale,
+        },
+      },
+    };
+    const url = getAppsOrigin() + '/treemap/';
+    const windowName = 'treemap-' + this.computeWindowNameSuffix(json);
+
+    ReportUIFeatures.openTabWithUrlData(treemapOptions, url, windowName);
+  }
+
+  /**
+   * Opens a new tab to an external page and sends data using postMessage.
+   * @param {{lhr: LH.Result} | LH.Treemap.Options} data
+   * @param {string} url
+   * @param {string} windowName
+   * @protected
+   */
+  static openTabAndSendData(data, url, windowName) {
+    const origin = new URL(url).origin;
+    // Chrome doesn't allow us to immediately postMessage to a popup right
+    // after it's created. Normally, we could also listen for the popup window's
+    // load event, however it is cross-domain and won't fire. Instead, listen
+    // for a message from the target app saying "I'm open".
+    window.addEventListener('message', function msgHandler(messageEvent) {
+      if (messageEvent.origin !== origin) {
+        return;
+      }
+      if (popup && messageEvent.data.opened) {
+        popup.postMessage(data, origin);
+        window.removeEventListener('message', msgHandler);
+      }
+    });
+
+    const popup = window.open(url, windowName);
+  }
+
+  /**
+   * Opens a new tab to an external page and sends data via base64 encoded url params.
+   * @param {{lhr: LH.Result} | LH.Treemap.Options} data
+   * @param {string} url_
+   * @param {string} windowName
+   * @protected
+   */
+  static async openTabWithUrlData(data, url_, windowName) {
+    const url = new URL(url_);
+    const gzip = Boolean(window.CompressionStream);
+    url.hash = await TextEncoding.toBase64(JSON.stringify(data), {
+      gzip,
+    });
+    if (gzip) url.searchParams.set('gzip', '1');
+    window.open(url.toString(), windowName);
+  }
+
+  /**
+   * Expands all audit `<details>`.
+   * Ideally, a print stylesheet could take care of this, but CSS has no way to
+   * open a `<details>` element.
+   */
+  expandAllDetails() {
+    const details = this._dom.findAll('.lh-categories details', this._document);
+    details.map(detail => detail.open = true);
+  }
+
+  /**
+   * Collapses all audit `<details>`.
+   * open a `<details>` element.
+   */
+  collapseAllDetails() {
+    const details = this._dom.findAll('.lh-categories details', this._document);
+    details.map(detail => detail.open = false);
+  }
+
+  /**
+   * Sets up listeners to collapse audit `<details>` when the user closes the
+   * print dialog, all `<details>` are collapsed.
+   */
+  _setUpCollapseDetailsAfterPrinting() {
+    // FF and IE implement these old events.
+    if ('onbeforeprint' in self) {
+      self.addEventListener('afterprint', this.collapseAllDetails);
+    } else {
+      // Note: FF implements both window.onbeforeprint and media listeners. However,
+      // it doesn't matchMedia doesn't fire when matching 'print'.
+      self.matchMedia('print').addListener(mql => {
+        if (mql.matches) {
+          this.expandAllDetails();
+        } else {
+          this.collapseAllDetails();
+        }
+      });
+    }
+  }
+
+  /**
+   * Returns the html that recreates this report.
+   * @return {string}
+   * @protected
+   */
+  getReportHtml() {
+    this._resetUIState();
+    return this._document.documentElement.outerHTML;
+  }
+
+  /**
+   * Save json as a gist. Unimplemented in base UI features.
+   * @protected
+   */
+  saveAsGist() {
+    throw new Error('Cannot save as gist from base report');
+  }
+
   /**
    * Downloads a file (blob) using a[download].
    * @param {Blob|File} blob The file to save.
+   * @private
    */
   _saveFile(blob) {
     const filename = getFilenamePrefix({
@@ -346,6 +713,252 @@ export class ReportUIFeatures {
 
     // cleanup.
     this._document.body.removeChild(a);
-    setTimeout(() => URL.revokeObjectURL(a.href), 500);
+    setTimeout(_ => URL.revokeObjectURL(a.href), 500);
+  }
+
+  /**
+   * @private
+   * @param {boolean} [force]
+   */
+  _toggleDarkTheme(force) {
+    const el = this._dom.find('.lh-vars', this._document);
+    // This seems unnecessary, but in DevTools, passing "undefined" as the second
+    // parameter acts like passing "false".
+    // https://github.com/ChromeDevTools/devtools-frontend/blob/dd6a6d4153647c2a4203c327c595692c5e0a4256/front_end/dom_extension/DOMExtension.js#L809-L819
+    if (typeof force === 'undefined') {
+      el.classList.toggle('dark');
+    } else {
+      el.classList.toggle('dark', force);
+    }
+  }
+
+  _updateStickyHeaderOnScroll() {
+    // Show sticky header when the score scale begins to go underneath the topbar.
+    const topbarBottom = this.topbarEl.getBoundingClientRect().bottom;
+    const scoreScaleTop = this.scoreScaleEl.getBoundingClientRect().top;
+    const showStickyHeader = topbarBottom >= scoreScaleTop;
+
+    // Highlight mini gauge when section is in view.
+    // In view = the last category that starts above the middle of the window.
+    const categoryEls = Array.from(this._document.querySelectorAll('.lh-category'));
+    const categoriesAboveTheMiddle =
+      categoryEls.filter(el => el.getBoundingClientRect().top - window.innerHeight / 2 < 0);
+    const highlightIndex =
+      categoriesAboveTheMiddle.length > 0 ? categoriesAboveTheMiddle.length - 1 : 0;
+
+    // Category order matches gauge order in sticky header.
+    const gaugeWrapperEls = this.stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper');
+    const gaugeToHighlight = gaugeWrapperEls[highlightIndex];
+    const origin = gaugeWrapperEls[0].getBoundingClientRect().left;
+    const offset = gaugeToHighlight.getBoundingClientRect().left - origin;
+
+    // Mutate at end to avoid layout thrashing.
+    this.highlightEl.style.transform = `translate(${offset}px)`;
+    this.stickyHeaderEl.classList.toggle('lh-sticky-header--visible', showStickyHeader);
+  }
+}
+
+class DropDown {
+  /**
+   * @param {DOM} dom
+   */
+  constructor(dom) {
+    /** @type {DOM} */
+    this._dom = dom;
+    /** @type {HTMLElement} */
+    this._toggleEl; // eslint-disable-line no-unused-expressions
+    /** @type {HTMLElement} */
+    this._menuEl; // eslint-disable-line no-unused-expressions
+
+    this.onDocumentKeyDown = this.onDocumentKeyDown.bind(this);
+    this.onToggleClick = this.onToggleClick.bind(this);
+    this.onToggleKeydown = this.onToggleKeydown.bind(this);
+    this.onMenuFocusOut = this.onMenuFocusOut.bind(this);
+    this.onMenuKeydown = this.onMenuKeydown.bind(this);
+
+    this._getNextMenuItem = this._getNextMenuItem.bind(this);
+    this._getNextSelectableNode = this._getNextSelectableNode.bind(this);
+    this._getPreviousMenuItem = this._getPreviousMenuItem.bind(this);
+  }
+
+  /**
+   * @param {function(MouseEvent): any} menuClickHandler
+   */
+  setup(menuClickHandler) {
+    this._toggleEl = this._dom.find('button.lh-tools__button', this._dom.document());
+    this._toggleEl.addEventListener('click', this.onToggleClick);
+    this._toggleEl.addEventListener('keydown', this.onToggleKeydown);
+
+    this._menuEl = this._dom.find('div.lh-tools__dropdown', this._dom.document());
+    this._menuEl.addEventListener('keydown', this.onMenuKeydown);
+    this._menuEl.addEventListener('click', menuClickHandler);
+  }
+
+  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._toggleEl.focus();
+    }
+    this._menuEl.removeEventListener('focusout', this.onMenuFocusOut);
+    this._dom.document().removeEventListener('keydown', this.onDocumentKeyDown);
+  }
+
+  /**
+   * @param {HTMLElement} firstFocusElement
+   */
+  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._menuEl.addEventListener('transitionend', () => {
+        firstFocusElement.focus();
+      }, {once: true});
+    }
+
+    this._toggleEl.classList.add('active');
+    this._toggleEl.setAttribute('aria-expanded', 'true');
+    this._menuEl.addEventListener('focusout', this.onMenuFocusOut);
+    this._dom.document().addEventListener('keydown', this.onDocumentKeyDown);
+  }
+
+  /**
+   * Click handler for tools button.
+   * @param {Event} e
+   */
+  onToggleClick(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+
+    if (this._toggleEl.classList.contains('active')) {
+      this.close();
+    } else {
+      this.open(this._getNextMenuItem());
+    }
+  }
+
+  /**
+   * Handler for tool button.
+   * @param {KeyboardEvent} e
+   */
+  onToggleKeydown(e) {
+    switch (e.code) {
+      case 'ArrowUp':
+        e.preventDefault();
+        this.open(this._getPreviousMenuItem());
+        break;
+      case 'ArrowDown':
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        this.open(this._getNextMenuItem());
+        break;
+      default:
+       // no op
+    }
+  }
+
+  /**
+   * Handler for tool DropDown.
+   * @param {KeyboardEvent} e
+   */
+  onMenuKeydown(e) {
+    const el = /** @type {?HTMLElement} */ (e.target);
+
+    switch (e.code) {
+      case 'ArrowUp':
+        e.preventDefault();
+        this._getPreviousMenuItem(el).focus();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        this._getNextMenuItem(el).focus();
+        break;
+      case 'Home':
+        e.preventDefault();
+        this._getNextMenuItem().focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        this._getPreviousMenuItem().focus();
+        break;
+      default:
+       // no op
+    }
+  }
+
+  /**
+   * Keydown handler for the document.
+   * @param {KeyboardEvent} e
+   */
+  onDocumentKeyDown(e) {
+    if (e.keyCode === 27) { // ESC
+      this.close();
+    }
+  }
+
+  /**
+   * Focus out handler for the drop down menu.
+   * @param {FocusEvent} e
+   */
+  onMenuFocusOut(e) {
+    const focusedEl = /** @type {?HTMLElement} */ (e.relatedTarget);
+
+    if (!this._menuEl.contains(focusedEl)) {
+      this.close();
+    }
+  }
+
+  /**
+   * @param {Array<Node>} allNodes
+   * @param {?HTMLElement=} startNode
+   * @return {HTMLElement}
+   */
+  _getNextSelectableNode(allNodes, startNode) {
+    const nodes = allNodes.filter(/** @return {node is HTMLElement} */ (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 {?HTMLElement=} startEl
+   * @return {HTMLElement}
+   */
+  _getNextMenuItem(startEl) {
+    const nodes = Array.from(this._menuEl.childNodes);
+    return this._getNextSelectableNode(nodes, startEl);
+  }
+
+  /**
+   * @param {?HTMLElement=} startEl
+   * @return {HTMLElement}
+   */
+  _getPreviousMenuItem(startEl) {
+    const nodes = Array.from(this._menuEl.childNodes).reverse();
+    return this._getNextSelectableNode(nodes, startEl);
   }
 }