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

4 files changed, 85 insertions, 51 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 3520ec7..c205d5d 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -2590,14 +2590,14 @@ each locale. -->
       </message>
 
       <!-- chrome://extensions page -->
-      <message name="IDS_EXTENSIONS_DEVELOPER_TOOLS_LINK" desc="Text of the link for developer tools.">
-        Developer tools
+      <message name="IDS_EXTENSIONS_DEVELOPER_MODE_LINK" desc="Text of the link for developer mode.">
+        Developer mode
       </message>
-      <message name="IDS_EXTENSIONS_DEVELOPER_TOOLS_PREFIX" desc="Text of the prefix for the developer tools buttons.">
-        Developer tools:
+      <message name="IDS_EXTENSIONS_DEVELOPER_MODE_PREFIX" desc="Text of the prefix for the developer mode buttons.">
+        Developer mode:
       </message>
-      <message name="IDS_EXTENSIONS_LOAD_UNPACKED_BUTTON" desc="Text of the 'Load unpacked Extension' button.">
-        Load unpacked Extension...
+      <message name="IDS_EXTENSIONS_LOAD_UNPACKED_BUTTON" desc="Text of the 'Load Extension' button.">
+        Load Extension...
       </message>
       <message name="IDS_EXTENSIONS_PACK_BUTTON" desc="Text for the 'Pack Extension' button.">
         Pack Extension...
@@ -2611,6 +2611,9 @@ each locale. -->
       <message name="IDS_EXTENSIONS_DISABLED_EXTENSION" desc="Text that signifies that the extension is currently disabled.">
         (Disabled)
       </message>
+      <message name="IDS_EXTENSIONS_IN_DEVELOPMENT" desc="Text that signifies that the extension is currently in development.">
+        (Development Mode)
+      </message>
       <message name="IDS_EXTENSIONS_ID" desc="The ID label in front if the extension ID.">
         ID:
       </message>
@@ -2635,6 +2638,9 @@ each locale. -->
       <message name="IDS_EXTENSIONS_OPTIONS" desc="The button text for the options button.">
         Options
       </message>
+      <message name="IDS_GET_MORE_EXTENSIONS" desc="The link for getting more extensions.">
+        Get more extensions >>
+      </message>
       <message name="IDS_EXTENSION_LOAD_FROM_DIRECTORY" desc="Title of directory browse dialog when user wants to load an extension from a directory.">
         Select the extension directory.
       </message>
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