Enable keyboard shortcuts for chrome://extensions

chrome/browser/resources/extensions/extension_list.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 <include src="extension_error.js">
 
 /**
  * The type of the extension data object. The definition is based on
  * chrome/browser/ui/webui/extensions/extension_basic_info.cc
  * and
@@ skipping 47 matching lines @@
  *            version: string,
  *            views: Array<{renderViewId: number, renderProcessId: number,
  *                path: string, incognito: boolean,
  *                generatedBackgroundPage: boolean}>,
  *            wantsErrorCollection: boolean,
  *            wantsFileAccess: boolean,
  *            warnings: (Array|undefined)}}
  */
 var ExtensionData;
 
+///////////////////////////////////////////////////////////////////////////////
+// ExtensionFocusRow:
+
+/**
+ * Provides an implementation for a single column grid.
+ * @constructor
+ * @extends {cr.ui.FocusRow}
+ */
+function ExtensionFocusRow() {}
+
+/**
+ * Decorates |focusRow| so that it can be treated as a ExtensionFocusRow.
+ * @param {Element} focusRow The element that has all the columns.
+ * @param {Node} boundary Focus events are ignored outside of this node.
+ */
+ExtensionFocusRow.decorate = function(focusRow, boundary) {
+  focusRow.__proto__ = ExtensionFocusRow.prototype;
+  focusRow.decorate(boundary);
+};
+
+ExtensionFocusRow.prototype = {
+  __proto__: cr.ui.FocusRow.prototype,
+
+  /** @override */
+  getEquivalentElement: function(element) {
+    if (this.focusableElements.indexOf(element) > -1)
+      return element;
+
+    // All elements default to another element with the same type.
+    var columnType = element.getAttribute('column-type');
+    var equivalent = this.querySelector('[column-type=' + columnType + ']');
+
+    if (!equivalent || !this.canAddElement_(equivalent)) {
+      var actionLinks = ['options', 'website', 'launch', 'localReload'];
+      if (actionLinks.indexOf(columnType) > -1)
+        equivalent = this.getFirstFocusableByType_(actionLinks);

[Dan Beam, 2015/02/19 19:26:28]

why are we potentially overwriting |equivalent| 4 times after it's set?  should
these all be `else if` more or less?

[hcarmona, 2015/02/19 23:42:17]

Only one should match. Changed to else if.

+
+      var optionalControls = ['showButton', 'incognito', 'dev-collectErrors',
+                              'allUrls', 'localUrls'];
+      if (optionalControls.indexOf(columnType) > -1)
+        equivalent = this.getFirstFocusableByType_(optionalControls);
+
+      var removeStyleButtons = ['trash', 'enterprise'];
+      if (removeStyleButtons.indexOf(columnType) > -1)
+        equivalent = this.getFirstFocusableByType_(removeStyleButtons);
+
+      var enableControls = ['terminatedReload', 'repair', 'enabled'];
+      if (enableControls.indexOf(columnType) > -1)
+        equivalent = this.getFirstFocusableByType_(enableControls);
+    }
+
+    // Return the first focusable element if no equivalent type is found.
+    return equivalent || this.focusableElements[0];
+  },
+
+  /** Updates the list of focusable elements. */
+  updateFocusableElements: function() {
+    this.focusableElements.length = 0;
+
+    var focusableCandidates = this.querySelectorAll('[column-type]');
+    for (var i = 0; i < focusableCandidates.length; ++i) {
+      var element = focusableCandidates[i];
+      if (this.canAddElement_(element))
+        this.addFocusableElement(element);
+    }
+  },
+
+  /**
+   * Get the first focusable element that matches a list of types.
+   * @param {Array<string>} types An array of types to match from.
+   * @return {?Element} Return the first element that matches a type in |types|.
+   * @private
+   */
+  getFirstFocusableByType_: function(types) {
+    for (var i = 0; i < this.focusableElements.length; ++i) {
+      var element = this.focusableElements[i];
+      if (types.indexOf(element.getAttribute('column-type')) > -1)
+        return element;
+    }
+    return null;
+  },
+
+  /**
+   * @param {Element} element
+   * @return {boolean}
+   * @private
+   */
+  canAddElement_: function(element) {
+    if (!element || element.disabled)
+      return false;
+
+    var developerMode = $('extension-settings').classList.contains('dev-mode');
+    if (this.isDeveloperOption_(element) && !developerMode)
+      return false;
+
+    for (var el = element; el; el = el.parentElement) {
+      if (el.hidden)
+        return false;
+    }
+
+    return true;
+  },
+
+  /**
+   * Returns true if the element should only be shown in developer mode.
+   * @param {Element} element
+   * @return {boolean}
+   * @private
+   */
+  isDeveloperOption_: function(element) {
+    var type = element.getAttribute('column-type');
+    return type.indexOf('dev-') == 0;

[Dan Beam, 2015/02/19 19:26:28]

this can fit in one line as:

  return element.getAttribute('column-type').indexOf('dev-') == 0;

OR

  return /^dev-/.test(element.getAttribute('column-type'));

[hcarmona, 2015/02/19 23:42:17]

Done.

+  },
+};
+
 cr.define('options', function() {
   'use strict';
 
   /**
    * Creates a new list of extensions.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var ExtensionsList = cr.ui.define('div');
@@ skipping 11 matching lines @@
 
     /**
      * Indicates whether an embedded options page that was navigated to through
      * the '?options=' URL query has been shown to the user. This is necessary
      * to prevent showExtensionNodes_ from opening the options more than once.
      * @type {boolean}
      * @private
      */
     optionsShown_: false,
 
+    /** @private {cr.ui.FocusGrid} */

[Dan Beam, 2015/02/19 19:26:28]

nit: !cr.ui.FocusGrid

[hcarmona, 2015/02/19 23:42:17]

Done.

+    focusGrid_: new cr.ui.FocusGrid(),
+
     /**
      * Necessary to only show the butterbar once.
      * @private {boolean}
      */
     butterbarShown_: false,
 
     decorate: function() {
       this.showExtensionNodes_();
     },
 
     getIdQueryParam_: function() {
       return parseQueryParams(document.location)['id'];
     },
 
     getOptionsQueryParam_: function() {
       return parseQueryParams(document.location)['options'];
     },
 
     /**
-     * Creates all extension items from scratch.
+     * Creates or updates all extension items from scratch.
      * @private
      */
     showExtensionNodes_: function() {
+      // Remove the rows from |focusGrid_| without destroying them.
+      this.focusGrid_.rows.length = 0;
+
       // Any node that is not updated will be removed.
       var seenIds = [];
 
       // Iterate over the extension data and add each item to the list.
       this.data_.extensions.forEach(function(extension) {
         var node = $(extension.id);
         seenIds.push(extension.id);
 
         if (node)
           this.updateNode_(extension, node);
         else
           this.createNode_(extension);
       }, this);
 
-      // Remove extensions that are no longer installed.
+      // Remove extensions that are no longer installed or add them to
+      // |focusGrid_| if they are still installed.
       var nodes = document.querySelectorAll('.extension-list-item-wrapper[id]');
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
-        if (seenIds.indexOf(node.id) < 0)
+        if (seenIds.indexOf(node.id) < 0) {
           node.parentElement.removeChild(node);
+          // Unregister the removed node from events.
+          node.destroy();
+        } else {
+          this.focusGrid_.addRow(node);
+        }
       }
 
       var idToHighlight = this.getIdQueryParam_();
       if (idToHighlight && $(idToHighlight))
         this.scrollToNode_(idToHighlight);
 
       var idToOpenOptions = this.getOptionsQueryParam_();
       if (idToOpenOptions && $(idToOpenOptions))
         this.showEmbeddedExtensionOptions_(idToOpenOptions, true);
 
       var noExtensions = this.data_.extensions.length == 0;
       this.classList.toggle('empty-extension-list', noExtensions);
     },
 
+    /** Updates each row's focusable elements without rebuilding the grid. */
+    updateFocusableElements: function() {
+      var nodes = document.querySelectorAll('.extension-list-item-wrapper[id]');

[Dan Beam, 2015/02/19 19:26:28]

nit: nodes -> rows

[hcarmona, 2015/02/19 23:42:17]

Done.

+      for (var i = 0; i < nodes.length; ++i) {
+        nodes[i].updateFocusableElements();
+      }
+    },
+
     /**
      * Scrolls the page down to the extension node with the given id.
      * @param {string} extensionId The id of the extension to scroll to.
      * @private
      */
     scrollToNode_: function(extensionId) {
       // Scroll offset should be calculated slightly higher than the actual
       // offset of the element being scrolled to, so that it ends up not all
       // the way at the top. That way it is clear that there are more elements
       // above the element being scrolled to.
       var scrollFudge = 1.2;
       var scrollTop = $(extensionId).offsetTop - scrollFudge *
           $(extensionId).clientHeight;
       setScrollTopForDocument(document, scrollTop);
     },
 
     /**
      * Synthesizes and initializes an HTML element for the extension metadata
      * given in |extension|.
      * @param {ExtensionData} extension A dictionary of extension metadata.
      * @private
      */
     createNode_: function(extension) {
       var template = $('template-collection').querySelector(
           '.extension-list-item-wrapper');
       var node = template.cloneNode(true);
+      ExtensionFocusRow.decorate(node, $('extension-settings-list'));
       node.id = extension.id;
 
       // The 'Show Browser Action' button.
-      this.addListener_('click', node, '.show-button', function(e) {
+      this.addListener_('click', node, '.show-button', 'showButton',
+                        function(e) {
         chrome.send('extensionSettingsShowButton', [extension.id]);
       });
 
       // The 'allow in incognito' checkbox.
-      this.addListener_('change', node, '.incognito-control input',
+      this.addListener_('change', node, '.incognito-control input', 'incognito',
                         function(e) {
         var butterBar = node.querySelector('.butter-bar');
         var checked = e.target.checked;
         if (!this.butterbarShown_) {
           butterBar.hidden = !checked || extension.is_hosted_app;
           this.butterbarShown_ = !butterBar.hidden;
         } else
           butterBar.hidden = true;
         chrome.send('extensionSettingsEnableIncognito',
                     [extension.id, String(checked)]);
       }.bind(this));
 
       // The 'collect errors' checkbox. This should only be visible if the
       // error console is enabled - we can detect this by the existence of the
       // |errorCollectionEnabled| property.
       this.addListener_('change', node, '.error-collection-control input',
-                        function(e) {
+                        'dev-collectErrors', function(e) {
         chrome.send('extensionSettingsEnableErrorCollection',
                     [extension.id, String(e.target.checked)]);
       });
 
       // The 'allow on all urls' checkbox. This should only be visible if
       // active script restrictions are enabled. If they are not enabled, no
       // extensions should want all urls.
-      this.addListener_('click', node, '.all-urls-control', function(e) {
+      this.addListener_('click', node, '.all-urls-control input', 'allUrls',
+                        function(e) {
         chrome.send('extensionSettingsAllowOnAllUrls',
                     [extension.id, String(e.target.checked)]);
       });
 
       // The 'allow file:// access' checkbox.
-      this.addListener_('click', node, '.file-access-control', function(e) {
+      this.addListener_('click', node, '.file-access-control input',
+                        'localUrls', function(e) {
         chrome.send('extensionSettingsAllowFileAccess',
                     [extension.id, String(e.target.checked)]);
       });
 
       // The 'Options' button or link, depending on its behaviour.
       // Set an href to get the correct mouse-over appearance (link,
       // footer) - but the actual link opening is done through chrome.send
       // with a preventDefault().
       node.querySelector('.options-link').href = extension.optionsPageHref;
-      this.addListener_('click', node, '.options-link', function(e) {
+      this.addListener_('click', node, '.options-link', 'options', function(e) {
         chrome.send('extensionSettingsOptions', [extension.id]);
         e.preventDefault();
       });
 
-      this.addListener_('click', node, '.options-button', function(e) {
+      this.addListener_('click', node, '.options-button', 'options',
+                        function(e) {
         this.showEmbeddedExtensionOptions_(extension.id, false);
         e.preventDefault();
       }.bind(this));
 
+      // The 'View in Web Store/View Web Site' link.
+      node.querySelector('.site-link').setAttribute('column-type', 'website');
+
       // The 'Permissions' link.
-      this.addListener_('click', node, '.permissions-link', function(e) {
+      this.addListener_('click', node, '.permissions-link', 'details',
+                        function(e) {
         chrome.send('extensionSettingsPermissions', [extension.id]);
         e.preventDefault();
       });
 
       // The 'Reload' link.
-      this.addListener_('click', node, '.reload-link', function(e) {
+      this.addListener_('click', node, '.reload-link', 'localReload',
+                        function(e) {
         chrome.send('extensionSettingsReload', [extension.id]);
         extensionReloadedTimestamp[extension.id] = Date.now();
       });
 
       // The 'Launch' link.
-      this.addListener_('click', node, '.launch-link', function(e) {
+      this.addListener_('click', node, '.launch-link', 'launch', function(e) {
         chrome.send('extensionSettingsLaunch', [extension.id]);
       });
 
       // The 'Reload' terminated link.
-      this.addListener_('click', node, '.terminated-reload-link', function(e) {
+      this.addListener_('click', node, '.terminated-reload-link',
+                        'terminatedReload', function(e) {
         chrome.send('extensionSettingsReload', [extension.id]);
       });
 
       // The 'Repair' corrupted link.
-      this.addListener_('click', node, '.corrupted-repair-button', function(e) {
+      this.addListener_('click', node, '.corrupted-repair-button', 'repair',
+                        function(e) {
         chrome.send('extensionSettingsRepair', [extension.id]);
       });
 
       // The 'Enabled' checkbox.
-      this.addListener_('change', node, '.enable-checkbox input', function(e) {
+      this.addListener_('change', node, '.enable-checkbox input', 'enabled',
+                        function(e) {
         var checked = e.target.checked;
         chrome.send('extensionSettingsEnable', [extension.id, String(checked)]);
 
         // This may seem counter-intuitive (to not set/clear the checkmark)
         // but this page will be updated asynchronously if the extension
         // becomes enabled/disabled. It also might not become enabled or
         // disabled, because the user might e.g. get prompted when enabling
         // and choose not to.
         e.preventDefault();
       });
 
       // 'Remove' button.
       var trashTemplate = $('template-collection').querySelector('.trash');
       var trash = trashTemplate.cloneNode(true);
       trash.title = loadTimeData.getString('extensionUninstall');
+      trash.hidden = extension.managedInstall;
+      trash.setAttribute('column-type', 'trash');
       trash.addEventListener('click', function(e) {
         chrome.send('extensionSettingsUninstall', [extension.id]);
       });
       node.querySelector('.enable-controls').appendChild(trash);
 
       // Developer mode ////////////////////////////////////////////////////////
 
       // The path, if provided by unpacked extension.
       this.addListener_('click', node, '.load-path a:first-of-type',
-                        function(e) {
+                        'dev-loadPath', function(e) {
         chrome.send('extensionSettingsShowPath', [String(extension.id)]);
         e.preventDefault();
       });
 
       this.appendChild(node);
       this.updateNode_(extension, node);
     },
 
     /**
      * Updates an HTML element for the extension metadata given in |extension|.
      * @param {ExtensionData} extension A dictionary of extension metadata.
      * @param {Element} node The node that is being updated.
      * @private
      */
     updateNode_: function(extension, node) {
-      node.classList.toggle('inactive-extension',
-                            !extension.enabled || extension.terminated);
+      var isActive = extension.enabled && !extension.terminated;
+
+      node.classList.toggle('inactive-extension', !isActive);
 
       node.classList.remove('policy-controlled', 'may-not-modify',
                             'may-not-remove');
       var classes = [];
       if (extension.managedInstall) {
         classes.push('policy-controlled', 'may-not-modify');
       } else if (extension.dependentExtensions.length > 0) {
         classes.push('may-not-remove', 'may-not-modify');
       } else if (extension.recommendedInstall) {
         classes.push('may-not-remove');
@@ skipping 21 matching lines @@
 
       this.setText_(node, '.extension-title', extension.name);
       this.setText_(node, '.extension-version', extension.version);
       this.setText_(node, '.location-text', extension.locationText);
       this.setText_(node, '.blacklist-text', extension.blacklistText);
       this.setText_(node, '.extension-description',
                            extension.description);
 
       // The 'Show Browser Action' button.
       this.updateVisibility_(node, '.show-button',
-                             extension.enable_show_button);
+                             isActive && extension.enable_show_button);
 
       // The 'allow in incognito' checkbox.
       this.updateVisibility_(node, '.incognito-control',
-                             this.data_.incognitoAvailable, function(item) {
+                             isActive && this.data_.incognitoAvailable,
+                             function(item) {
         var incognito = item.querySelector('input');
         incognito.disabled = !extension.incognitoCanBeEnabled;
         incognito.checked = extension.enabledIncognito;
       });
 
       // Hide butterBar if incognito is not enabled for the extension.
       var butterBar = node.querySelector('.butter-bar');
       butterBar.hidden = butterBar.hidden || !extension.enabledIncognito;
 
       // The 'collect errors' checkbox. This should only be visible if the
       // error console is enabled - we can detect this by the existence of the
       // |errorCollectionEnabled| property.
       this.updateVisibility_(node, '.error-collection-control',
-                             extension.wantsErrorCollection, function(item) {
+                             isActive && extension.wantsErrorCollection,
+                             function(item) {
         item.querySelector('input').checked = extension.errorCollectionEnabled;
       });
 
       // The 'allow on all urls' checkbox. This should only be visible if
       // active script restrictions are enabled. If they are not enabled, no
       // extensions should want all urls.
-      this.updateVisibility_(node, '.all-urls-control', extension.showAllUrls,
-                             function(item) {
+      this.updateVisibility_(node, '.all-urls-control',
+                             isActive && extension.showAllUrls, function(item) {
         item.querySelector('input').checked = extension.allowAllUrls;
       });
 
       // The 'allow file:// access' checkbox.
       this.updateVisibility_(node, '.file-access-control',
-                             extension.wantsFileAccess, function(item) {
+                             isActive && extension.wantsFileAccess,
+                             function(item) {
         item.querySelector('input').checked = extension.allowFileAccess;
       });
 
       // The 'Options' button or link, depending on its behaviour.
       var optionsEnabled = extension.enabled && !!extension.optionsUrl;
       this.updateVisibility_(node, '.options-link', optionsEnabled &&
                              extension.optionsOpenInTab);
       this.updateVisibility_(node, '.options-button', optionsEnabled &&
                              !extension.optionsOpenInTab);
 
@@ skipping 43 matching lines @@
       var needsIndicator = isOK && extension.managedInstall;
 
       if (needsIndicator && !indicator) {
         indicator = new cr.ui.ControlledIndicator();
         indicator.classList.add('controlled-extension-indicator');
         indicator.setAttribute('controlled-by', 'policy');
         var textPolicy = extension.policyText || '';
         indicator.setAttribute('textpolicy', textPolicy);
         indicator.image.setAttribute('aria-label', textPolicy);
         controlNode.appendChild(indicator);
+        indicator.querySelector('div').setAttribute('column-type',
+                                                    'enterprise');
       } else if (!needsIndicator && indicator) {
         controlNode.removeChild(indicator);
       }
 
       // Developer mode ////////////////////////////////////////////////////////
 
       // First we have the id.
       var idLabel = node.querySelector('.extension-id');
       idLabel.textContent = ' ' + extension.id;
 
@@ skipping 74 matching lines @@
               view.incognito
             ]);
           };
           link.addEventListener('click', link.clickHandler);
 
           if (i < extension.views.length - 1) {
             link = link.cloneNode(true);
             item.appendChild(link);
           }
         });
+
+        var allLinks = item.querySelectorAll('a');
+        for (var i = 0; i < allLinks.length; ++i) {
+          allLinks[i].setAttribute('column-type', 'dev-activeViews' + i);
+        }
       });
 
       // The extension warnings (describing runtime issues).
       this.updateVisibility_(node, '.extension-warnings', !!extension.warnings,
                              function(item) {
         var warningList = item.querySelector('ul');
         warningList.textContent = '';
         extension.warnings.forEach(function(warning) {
           var li = document.createElement('li');
           warningList.appendChild(li).innerText = warning;
         });
       });
 
       // If the ErrorConsole is enabled, we should have manifest and/or runtime
       // errors. Otherwise, we may have install warnings. We should not have
       // both ErrorConsole errors and install warnings.
       // Errors.
       this.updateErrors_(node.querySelector('.manifest-errors'),
-                         extension.manifestErrors);
+                         'dev-manifestErrors', extension.manifestErrors);
       this.updateErrors_(node.querySelector('.runtime-errors'),
-                         extension.runtimeErrors);
+                         'dev-runtimeErrors', extension.runtimeErrors);
 
       // Install warnings.
       this.updateVisibility_(node, '.install-warnings',
                              !!extension.installWarnings, function(item) {
         var installWarningList = item.querySelector('ul');
         installWarningList.textContent = '';
         if (extension.installWarnings) {
           extension.installWarnings.forEach(function(warning) {
             var li = document.createElement('li');
             li.innerText = warning.message;
             installWarningList.appendChild(li);
           });
         }
       });
 
       if (location.hash.substr(1) == extension.id) {
         // Scroll beneath the fixed header so that the extension is not
         // obscured.
         var topScroll = node.offsetTop - $('page-header').offsetHeight;
         var pad = parseInt(window.getComputedStyle(node, null).marginTop, 10);
         if (!isNaN(pad))
           topScroll -= pad / 2;
         setScrollTopForDocument(document, topScroll);
       }
+
+      node.updateFocusableElements();

[Dan Beam, 2015/02/19 19:26:28]

every time I see node#focusRowFunction() my eyes are sad.  if this is a
focusrow, it should be row, not node (which sounds like Node, which does not
have updateFocusableElements).

[hcarmona, 2015/02/19 23:42:17]

Done.

     },
 
     /**
      * Adds a listener to an element.
      * @param {string} type The type of listener to add.
      * @param {Element} node Ancestor of the element specified by |query|.
      * @param {string} query A query to select an element in |node|.
+     * @param {string} columnType A tag used to identify the column when
+     *     changing focus.
      * @param {function(Event)} handler The function that should be called
      *     on click.
      * @private
      */
-    addListener_: function(type, node, query, handler) {
-      node.querySelector(query).addEventListener(type, handler);
+    addListener_: function(type, node, query, columnType, handler) {
+      var element = node.querySelector(query);
+      element.addEventListener(type, handler);
+      element.setAttribute('column-type', columnType);

[Dan Beam, 2015/02/19 19:26:28]

this is an unexpected side effect in "addListener_" IMO.  split this into 2
methods or rename

[hcarmona, 2015/02/19 23:42:17]

Done.

     },
 
     /**
      * Updates an element's textContent.
      * @param {Element} node Ancestor of the element specified by |query|.
      * @param {string} query A query to select an element in |node|.
      * @param {string} textContent
      * @private
      */
     setText_: function(node, query, textContent) {
@@ skipping 14 matching lines @@
     updateVisibility_: function(node, query, visible, opt_shownCallback) {
       var item = assert(node.querySelector(query));
       item.hidden = !visible;
       if (visible && opt_shownCallback)
         opt_shownCallback(item);
     },
 
     /**
      * Updates an element to show a list of errors.
      * @param {Element} panel An element to hold the errors.
+     * @param {string} columnType A tag used to identify the column when
+     *     changing focus.
      * @param {Array<RuntimeError>|undefined} errors The errors to be displayed.
      * @private
      */
-    updateErrors_: function(panel, errors) {
+    updateErrors_: function(panel, columnType, errors) {
       // TODO(hcarmona): Look into updating the ExtensionErrorList rather than
       // rebuilding it every time.
       panel.hidden = !errors || errors.length == 0;
       panel.textContent = '';
       if (!panel.hidden) {
-        panel.appendChild(
-            new extensions.ExtensionErrorList(assertInstanceof(errors, Array)));
+        var errorList =
+            new extensions.ExtensionErrorList(assertInstanceof(errors, Array));
+
+        panel.appendChild(errorList);
+
+        var list = errorList.getListElement();
+        if (list)
+          list.setAttribute('column-type', columnType + 'list');
+
+        var button = errorList.getToggleElement();
+        if (button)
+          button.setAttribute('column-type', columnType + 'button');
       }
     },
 
     /**
      * Opens the extension options overlay for the extension with the given id.
      * @param {string} extensionId The id of extension whose options page should
      *     be displayed.
      * @param {boolean} scroll Whether the page should scroll to the extension
      * @private
      */
@@ skipping 37 matching lines @@
       // TODO(dbeam): why do we need to focus <extensionoptions> before and
       // after its showing animation? Makes very little sense to me.
       overlay.setInitialFocus();
     },
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });