Support extension highlighting on the extensions page.

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.
 
 cr.define('options', function() {
   'use strict';
 
   /**
    * A lookup helper function to find the first node that has an id (starting
    * at |node| and going up the parent chain).
@@ skipping 32 matching lines @@
     },
 
     /**
      * Creates all extension items from scratch.
      * @private
      */
     showExtensionNodes_: function() {
       // Iterate over the extension data and add each item to the list.
       this.data_.extensions.forEach(this.createNode_, this);
 
+      var id_to_highlight = parseQueryParams(document.location)['id'];
+      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 offset = $(id_to_highlight).offsetTop -
+                     (1.2 * $(id_to_highlight).clientHeight);

[James Hawkins, 2012/11/30 20:11:05]

nit: Pull 1.2 out into a constant.

[Finnur, 2012/11/30 21:49:28]

const are not allowed in strict mode, but I factored this out of the equation. 

On 2012/11/30 20:11:05, James Hawkins wrote:

+        var wrapper = this.parentNode;
+        var list = wrapper.parentNode;
+        list.scrollTop = offset;
+      }
+
       if (this.data_.extensions.length == 0)
         this.classList.add('empty-extension-list');
       else
         this.classList.remove('empty-extension-list');
     },
 
     /**
      * Synthesizes and initializes an HTML element for the extension metadata
      * given in |extension|.
      * @param {Object} extension A dictionary of extension metadata.
      * @private
      */
     createNode_: function(extension) {
       var template = $('template-collection').querySelector(
           '.extension-list-item-wrapper');
       var node = template.cloneNode(true);
       node.id = extension.id;
 
       if (!extension.enabled || extension.terminated)
         node.classList.add('inactive-extension');
 
       if (!extension.userModifiable)
         node.classList.add('may-not-disable');
 
+      var id_to_highlight = parseQueryParams(document.location)['id'];

[James Hawkins, 2012/11/30 20:11:05]

Optional nit: Pull parseQueryParams...; out into a helper method to reduce
fragility, e.g., getIdQueryParam() or something.

[Finnur, 2012/11/30 21:49:28]

Done.

+      if (node.id == id_to_highlight)
+        node.classList.add('extension-highlight');
+
       var item = node.querySelector('.extension-list-item');
       item.style.backgroundImage = 'url(' + extension.icon + ')';
 
       var title = node.querySelector('.extension-title');
       title.textContent = extension.name;
 
       var version = node.querySelector('.extension-version');
       version.textContent = extension.version;
 
       var disableReason = node.querySelector('.extension-disable-reason');
@@ skipping 193 matching lines @@
       }
 
       this.appendChild(node);
     }
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });