Show extension name for dependent 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">
 
 cr.define('options', function() {
   'use strict';
 
   /**
@@ skipping 303 matching lines @@
           // Then the 'This is a corrupt extension' message.
           node.querySelector('.corrupt-install-message').hidden = false;
         }
       }
 
       if (extension.dependentExtensions.length > 0) {
         var dependentMessage =
             node.querySelector('.dependent-extensions-message');
         dependentMessage.hidden = false;
         var dependentList = dependentMessage.querySelector('ul');
-        extension.dependentExtensions.forEach(function(id) {
+        extension.dependentExtensions.forEach(function(elem) {
           var li = document.createElement('li');
-          li.innerText = id;
+          var nameSpan = document.createElement('span');
+          var idSpan = document.createElement('span');
+          nameSpan.innerText = elem.name;
+          idSpan.innerText = ' (' + elem.id + ')';

[not at google - send to devlin, 2014/08/13 01:42:31]

You should use .textContent not .innerText.

Anyhow, showing the extension's name seems like the right thing to do. You could
imagine showing more information than that (I imagine we will want to show
things like this about_page thing at some point? what ever happened to that).

I'm wondering whether you should define a template for this, even though it's
only a couple of things, it might be good practice.

See how template are defined in here and
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res....

[elijahtaylor1, 2014/08/13 18:02:59]

great, a template is what I was looking for (instead of adding class names and
structure in JS)

+          idSpan.className = 'developer-extras';
+          li.appendChild(nameSpan);
+          li.appendChild(idSpan);
           dependentList.appendChild(li);
         });
       }
 
       // Then active views.
       if (extension.views.length > 0) {
         var activeViews = node.querySelector('.active-views');
         activeViews.hidden = false;
         var link = activeViews.querySelector('a');
 
@@ skipping 69 matching lines @@
           topScroll -= pad / 2;
         setScrollTopForDocument(document, topScroll);
       }
     },
   };
 
   return {
     ExtensionsList: ExtensionsList
   };
 });