Grouping the extensions and calling out the disabled

ones more prominently.

Also added an unused string for 'getting more extensions',
so we can translate.

Converted 'Developer Tools' references to 'Developer Mode',
to avoid confusion with Chrome's developer tools.

TEST=Load extension b_foo through --load-extension.
Open chrome://extensions/ and notice extension b_foo is
on top, even though another extension a_foo normally would
appear at the top due to alphabetical sorting. Then disable
an extension and notice it should turn all gray. Enable,
and it should no longer be gray.
BUG=http://crbug.com/26699, http://crbug.com/25850

Review URL: http://codereview.chromium.org/365008

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

3 files changed, 73 insertions, 45 deletions

diff --git a/chrome/browser/extensions/extensions_ui.cc b/chrome/browser/extensions/extensions_ui.cc
index 06b9046..e4ef3cf 100644
--- a/chrome/browser/extensions/extensions_ui.cc
+++ b/chrome/browser/extensions/extensions_ui.cc
@@ -52,10 +52,10 @@ void ExtensionsUIHTMLSource::StartDataRequest(const std::string& path,
   DictionaryValue localized_strings;
   localized_strings.SetString(L"title",
       l10n_util::GetString(IDS_EXTENSIONS_TITLE));
-  localized_strings.SetString(L"devToolsLink",
-      l10n_util::GetString(IDS_EXTENSIONS_DEVELOPER_TOOLS_LINK));
-  localized_strings.SetString(L"devToolsPrefix",
-      l10n_util::GetString(IDS_EXTENSIONS_DEVELOPER_TOOLS_PREFIX));
+  localized_strings.SetString(L"devModeLink",
+      l10n_util::GetString(IDS_EXTENSIONS_DEVELOPER_MODE_LINK));
+  localized_strings.SetString(L"devModePrefix",
+      l10n_util::GetString(IDS_EXTENSIONS_DEVELOPER_MODE_PREFIX));
   localized_strings.SetString(L"loadUnpackedButton",
       l10n_util::GetString(IDS_EXTENSIONS_LOAD_UNPACKED_BUTTON));
   localized_strings.SetString(L"packButton",
@@ -66,6 +66,8 @@ void ExtensionsUIHTMLSource::StartDataRequest(const std::string& path,
       l10n_util::GetString(IDS_EXTENSIONS_NONE_INSTALLED));
   localized_strings.SetString(L"extensionDisabled",
       l10n_util::GetString(IDS_EXTENSIONS_DISABLED_EXTENSION));
+  localized_strings.SetString(L"inDevelopment",
+      l10n_util::GetString(IDS_EXTENSIONS_IN_DEVELOPMENT));
   localized_strings.SetString(L"extensionId",
       l10n_util::GetString(IDS_EXTENSIONS_ID));
   localized_strings.SetString(L"extensionVersion",
@@ -468,6 +470,14 @@ DictionaryValue* ExtensionsDOMHandler::CreateExtensionDetailValue(
   extension_data->SetString(L"description", extension->description());
   extension_data->SetString(L"version", extension->version()->GetString());
   extension_data->SetBoolean(L"enabled", enabled);
+
+  // Determine the sort order: Extensions loaded through --load-extensions show
+  // up at the top. Disabled extensions show up at the bottom.
+    if (extension->location() == Extension::LOAD)
+    extension_data->SetInteger(L"order", 1);
+  else
+    extension_data->SetInteger(L"order", 2);
+
   if (!extension->options_url().is_empty())
     extension_data->SetString(L"options_url", extension->options_url().spec());
 
diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html
index b8477c2..4400282 100644
--- a/chrome/browser/resources/extensions_ui.html
+++ b/chrome/browser/resources/extensions_ui.html
@@ -42,7 +42,7 @@ h1 {
 
 div.content {
   font-size: 84%;
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 .section-header {
@@ -90,22 +90,22 @@ body.showDevMode .showInDevMode {
   -webkit-transition: all .1s ease-in;
 }
 
-.wbox-dev-tools {
+.wbox-dev-mode {
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
 }
 
-.developer-tools-image {
+.developer-mode-image {
   margin-top: 2px;
 }
 
-.developer-tools-link {
+.developer-mode-link {
   font-size: 100%;
   margin-right: 3px;
   white-space: nowrap;
 }
 
-.developer-tools {
+.developer-mode {
   background: #f4f6fc;
   border-bottom: 1px solid #edeff5;
   font-size: 85%;
@@ -115,10 +115,20 @@ body.showDevMode .showInDevMode {
   width: 100%;
 }
 
+.extension_disabled td {
+  background: url('gray.png') 0px 0px;
+  color: #a0a0a0;
+  padding-bottom: 4px;
+  padding-top: 5px;
+}
+
+.extension_enabled td {
+  padding-bottom: 4px;
+  padding-top: 5px;
+}
+
 .extension {
-  border-bottom: 1px solid #edeff5;
-  margin-bottom: 9px;
-  padding-bottom: 10px;
+  border-bottom: 1px solid #cdcdcd;
 }
 
 .extension-name {
@@ -244,6 +254,7 @@ var extensionDataFormat = {
       "description": "Extension long format description",
       "version": "1.0.231",
       "enabled": "true",
+      "order": 1,
       "options_url": "options.html",
       "icon": "relative-path-to-icon.png",
       "content_scripts": [
@@ -281,6 +292,7 @@ var extensionDataFormat = {
       "description": "Extension long format description",
       "version": "1.0.231",
       "enabled": "true",
+      "order": 2,
       "icon": "",
       "content_scripts": [
         {
@@ -305,16 +317,16 @@ var extensionDataFormat = {
   ]
 };
 
-// Keeps track of whether the developer tools subsection has been made visible
+// Keeps track of whether the developer mode subsection has been made visible
 // (expanded) or not.
-var devToolsExpanded = false;
+var devModeExpanded = false;
 
 /**
- * Toggles the devToolsExpanded, and notifies the c++ dom_ui to toggle the
+ * Toggles the devModeExpanded, and notifies the c++ dom_ui to toggle the
  * extensions.ui.developer_mode which saved in the preferences.
  */
-function toggleDevToolsExpanded() {
-  devToolsExpanded = !devToolsExpanded;
+function toggleDevModeExpanded() {
+  devModeExpanded = !devModeExpanded;
   chrome.send('toggleDeveloperMode', []);
 }
 
@@ -325,11 +337,16 @@ function toggleDevToolsExpanded() {
  * @param {Object} extensionsData Detailed info about installed extensions
  */
 function showExtensionsData(extensionsData) {
-  // Sort by extension name (case-insensitive)
+  // Sort by order specified in the data or (if equal) then sort by
+  // extension name (case-insensitive).
   extensionsData.extensions.sort(function(a, b) {
-    a = a.name.toLowerCase();
-    b = b.name.toLowerCase();
-    return a < b ? -1 : (a > b ? 1 : 0);
+    if (a.order == b.order) {
+      a = a.name.toLowerCase();
+      b = b.name.toLowerCase();
+      return a < b ? -1 : (a > b ? 1 : 0);
+    } else {
+      return a.order < b.order ? -1 : 1;
+    }
   });
 
   // This is the javascript code that processes the template:
@@ -354,7 +371,7 @@ window.domui_responded_ = false;
 function returnExtensionsData(extensionsData) {
   window.domui_responded_ = true;
 
-  devToolsExpanded = extensionsData.developerMode;
+  devModeExpanded = extensionsData.developerMode;
 
   showExtensionsData(extensionsData);
 
@@ -364,15 +381,14 @@ function returnExtensionsData(extensionsData) {
   document.getElementById('body-container').style.display = "inline";
 
   // Explicitly set the height for each element that wants to be "slid" in and
-  // out when the devToolsExpanded is toggled.
+  // out when the devModeExpanded is toggled.
   var slidables = document.getElementsByClassName('showInDevMode');
-  for (var i = 0; i < slidables.length; i++) {
+  for (var i = 0; i < slidables.length; i++)
     slidables[i].style.height = slidables[i].offsetHeight + "px";
-  }
 
   // If not in developer mode, hide the developer mode elements without the
   // slide/fade transition.
-  if (!devToolsExpanded) {
+  if (!devModeExpanded) {
     document.getElementsByTagName('body')[0].className = "hideDevModeInitial";
   } else {
     document.getElementById('collapse').style.display = "inline";
@@ -473,18 +489,18 @@ function hidePackDialog() {
 }
 
 /*
- * Toggles visibility of the developer tools.
+ * Toggles visibility of the developer mode.
  */
-function toggleDeveloperTools() {
-  toggleDevToolsExpanded();
+function toggleDeveloperMode() {
+  toggleDevModeExpanded();
 
   document.getElementById('collapse').style.display =
-      devToolsExpanded ? "inline" : "none";
+      devModeExpanded ? "inline" : "none";
   document.getElementById('expand').style.display =
-      devToolsExpanded ? "none" : "inline";
+      devModeExpanded ? "none" : "inline";
 
   document.getElementsByTagName('body')[0].className =
-      devToolsExpanded ? "showDevMode" : "hideDevMode";
+      devModeExpanded ? "showDevMode" : "hideDevMode";
 }
 
 /**
@@ -586,16 +602,16 @@ function autoUpdate() {
                     jscontent="extensions.length"></span>)</span>
             </td>
             <td width="18" padding="">
-              <img id="collapse" class="developer-tools-image"
-                   style="display:none" onclick="toggleDeveloperTools();"
+              <img id="collapse" class="developer-mode-image"
+                   style="display:none" onclick="toggleDeveloperMode();"
                    src="minus.png" />
-              <img id="expand" class="developer-tools-image"
-                   onclick="toggleDeveloperTools();" src="plus.png" />
+              <img id="expand" class="developer-mode-image"
+                   onclick="toggleDeveloperMode();" src="plus.png" />
             </td>
             <td width="50" align="right">
-              <div class="developer-tools-link">
-                <a onclick="toggleDeveloperTools();" style="cursor: default"
-                   i18n-content="devToolsLink">DEVTOOLS</a>
+              <div class="developer-mode-link">
+                <a onclick="toggleDeveloperMode();" style="cursor: default"
+                   i18n-content="devModeLink">DEVMODE</a>
               </div>
             </td>
           </tr>
@@ -603,9 +619,9 @@ function autoUpdate() {
         </div>
 
       </div>
-      <div id="developer_tools" class="wbox-dev-tools showInDevMode">
-        <div class="developer-tools">
-          <span i18n-content="devToolsPrefix">DEVELOPER_TOOLS:</span>
+      <div id="developer_tools" class="wbox-dev-mode showInDevMode">
+        <div class="developer-mode">
+          <span i18n-content="devModePrefix">DEVELOPER_MODE:</span>
           <button onclick="loadExtension()"
                   i18n-content="loadUnpackedButton">LOAD</button>
           <button onclick="showPackDialog()"
@@ -622,9 +638,9 @@ function autoUpdate() {
 
         <div jsdisplay="extensions.length > 0">
         <div class="extension" jsselect="extensions">
-          <table width="100%" cellpadding="0" cellspacing="0">
-          <tr>
-          <td width="62" align="center" valign="top">
+          <table width="100%" cellpadding="2" cellspacing="0">
+          <tr jsvalues=".className:enabled ? 'extension_enabled' : 'extension_disabled'">
+          <td width="62" height="50" align="center" valign="top">
             <span jsdisplay="icon"
               ><img
               jsvalues=".src:'chrome-extension://' + id + '/' + icon"
@@ -643,6 +659,8 @@ function autoUpdate() {
               <span jscontent="version">x.x.x.x</span>
               <span jsdisplay="!enabled"
                     i18n-content="extensionDisabled">(DISABLED)</span>
+              <span jsdisplay="order == 1"
+                    i18n-content="inDevelopment">(IN DEVELOPMENT)</span>
             </div>
 
             <div class="extension-description" jscontent="description"></div>
diff --git a/chrome/browser/resources/gray.png b/chrome/browser/resources/gray.png
new file mode 100644
index 0000000..13851ad
--- /dev/null
+++ b/chrome/browser/resources/gray.png