Open embedded extension options from the extension action context menu

chrome/browser/resources/extensions/extension_list.js

Index: chrome/browser/resources/extensions/extension_list.js
diff --git a/chrome/browser/resources/extensions/extension_list.js b/chrome/browser/resources/extensions/extension_list.js
index 012bc877c1db3980ea653d768cecf0e0f2b3cb95..98e3273d73fd33f5a6ad5ff5278645eaf26ee9af 100644
--- a/chrome/browser/resources/extensions/extension_list.js
+++ b/chrome/browser/resources/extensions/extension_list.js
@@ -33,6 +33,15 @@ cr.define('options', function() {
   ExtensionsList.prototype = {
     __proto__: HTMLDivElement.prototype,
 
+    /**
+     * 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,
+
     /** @override */
     decorate: function() {
       this.textContent = '';
@@ -44,6 +53,10 @@ cr.define('options', function() {
       return parseQueryParams(document.location)['id'];
     },
 
+    getOptionsQueryParam_: function() {
+      return parseQueryParams(document.location)['options'];
+    },
+
     /**
      * Creates all extension items from scratch.
      * @private
@@ -53,16 +66,12 @@ cr.define('options', function() {
       this.data_.extensions.forEach(this.createNode_, this);
 
       var idToHighlight = this.getIdQueryParam_();
-      if (idToHighlight && $(idToHighlight)) {
-        // 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 = $(idToHighlight).offsetTop - scrollFudge *
-            $(idToHighlight).clientHeight;
-        setScrollTopForDocument(document, scrollTop);
-      }
+      if (idToHighlight && $(idToHighlight))
+        this.scrollToNode_(idToHighlight);
+
+      var idToOpenOptions = this.getOptionsQueryParam_();
+      if (idToOpenOptions && $(idToOpenOptions))
+        this.showEmbeddedExtensionOptions_(idToOpenOptions);
 
       if (this.data_.extensions.length == 0)
         this.classList.add('empty-extension-list');
@@ -71,6 +80,22 @@ cr.define('options', function() {
     },
 
     /**
+     * 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 {Object} extension A dictionary of extension metadata.
@@ -194,10 +219,7 @@ cr.define('options', function() {
         var options = node.querySelector('.options-link');
         options.addEventListener('click', function(e) {
           if (this.data_.enableEmbeddedExtensionOptions) {
-            extensions.ExtensionOptionsOverlay.getInstance().
-                setExtensionAndShowOverlay(extension.id,
-                                           extension.name,
-                                           extension.icon);
+            this.showEmbeddedExtensionOptions_(extension.id);
           } else {
             chrome.send('extensionSettingsOptions', [extension.id]);
           }
@@ -417,6 +439,38 @@ cr.define('options', function() {
         setScrollTopForDocument(document, topScroll);
       }
     },
+
+    /**
+     * 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.
+     * @private
+     */
+    showEmbeddedExtensionOptions_: function(extensionId) {
+      if (this.optionsShown_)
+        return;
+
+      // Get the extension from the given id.
+      var extension = this.data_.extensions.filter(function(extension) {
+        return extension.id == extensionId;
+      })[0];
+
+      if (!extension)
+        return;
+
+      this.scrollToNode_(extensionId);
+      // Add the options query string. Corner case: if both the 'id' query
+      // string and the 'options' query string are in URL, 'options' will
+      // clobber 'id' in the URL, but the extension will remain highlighted.
+      // However, this should't happen unless the URL is manually typed in.

[not at google - send to devlin, 2014/08/25 21:53:29]

There is another case where this happens actually, when you go to Manage then
click on Options. It kills the ID part.

That's not worth worrying about. So I'd just ignore past-me and delete this
comment :)

[ericzeng, 2014/08/25 22:04:04]

Done.

+      uber.replaceState({}, '?options=' + extensionId);
+
+      extensions.ExtensionOptionsOverlay.getInstance().
+          setExtensionAndShowOverlay(extensionId,
+                                     extension.name,
+                                     extension.icon);
+      this.optionsShown_ = true;
+    },
   };
 
   return {