Support extension highlighting on the extensions page.

BUG=153137
TEST=Add a ?id=<extension_id> to the chrome://extensions page url and that extension should become highlighted.
Review URL: https://codereview.chromium.org/11434024

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@170561 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/extensions/extension_list.js

@@ -42,6 +42,10 @@ cr.define('options', function() {
       this.showExtensionNodes_();
     },
 
+    getIdQueryParam_: function() {
+      return parseQueryParams(document.location)['id'];
+    },
+
     /**
      * Creates all extension items from scratch.
      * @private
@@ -50,6 +54,20 @@ cr.define('options', function() {
       // Iterate over the extension data and add each item to the list.
       this.data_.extensions.forEach(this.createNode_, this);
 
+      var id_to_highlight = this.getIdQueryParam_();
+      if (id_to_highlight) {
+        // 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 scroll_fudge = 1.2;
+        var offset = $(id_to_highlight).offsetTop -
+                     (scroll_fudge * $(id_to_highlight).clientHeight);
+        var wrapper = this.parentNode;
+        var list = wrapper.parentNode;
+        list.scrollTop = offset;
+      }
+
       if (this.data_.extensions.length == 0)
         this.classList.add('empty-extension-list');
       else
@@ -74,6 +92,10 @@ cr.define('options', function() {
       if (!extension.userModifiable)
         node.classList.add('may-not-disable');
 
+      var id_to_highlight = this.getIdQueryParam_();
+      if (node.id == id_to_highlight)
+        node.classList.add('extension-highlight');
+
       var item = node.querySelector('.extension-list-item');
       item.style.backgroundImage = 'url(' + extension.icon + ')';
 

chrome/browser/resources/extensions/extensions.css

@@ -275,6 +275,14 @@ html[dir='rtl'] #extension-settings .trash {
   visibility: hidden;
 }
 
+.extension-highlight {
+  background: rgb(238, 238, 238);
+  background-position: auto;
+  background-repeat: auto;
+  border-radius: 3px;
+  padding: 5px 0 5px 5px;
+}
+
 .may-not-disable .optional-controls .optional-controls-disableable {
   display: none;
 }