Further polish to extensions_ui page.

This changes the details text from gray to black. It also persists in the preferences the state of devMode (whether the developer tools are showing). Lastly, it adds a fade/slide effect on page elements which are shown in devMode.

BUG=25471

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

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

chrome/browser/browser_prefs.cc

@@ -12,6 +12,7 @@
 #include "chrome/browser/dom_ui/new_tab_ui.h"
 #include "chrome/browser/download/download_manager.h"
 #include "chrome/browser/extensions/extension_dom_ui.h"
+#include "chrome/browser/extensions/extensions_ui.h"
 #include "chrome/browser/external_protocol_handler.h"
 #include "chrome/browser/form_field_history_manager.h"
 #include "chrome/browser/google_url_tracker.h"
@@ -79,6 +80,7 @@ void RegisterAllPrefs(PrefService* user_prefs, PrefService* local_state) {
   TabContents::RegisterUserPrefs(user_prefs);
   TemplateURLPrepopulateData::RegisterUserPrefs(user_prefs);
   ExtensionDOMUI::RegisterUserPrefs(user_prefs);
+  ExtensionsUI::RegisterUserPrefs(user_prefs);
   NewTabUI::RegisterUserPrefs(user_prefs);
   BlockedPopupContainer::RegisterUserPrefs(user_prefs);
   DevToolsManager::RegisterUserPrefs(user_prefs);

chrome/browser/extensions/extensions_ui.cc

@@ -28,6 +28,8 @@
 #include "chrome/common/jstemplate_builder.h"
 #include "chrome/common/notification_service.h"
 #include "chrome/common/notification_type.h"
+#include "chrome/common/pref_names.h"
+#include "chrome/common/pref_service.h"
 #include "chrome/common/url_constants.h"
 #include "net/base/net_util.h"
 
@@ -88,6 +90,8 @@ ExtensionsDOMHandler::ExtensionsDOMHandler(ExtensionsService* extension_service)
 void ExtensionsDOMHandler::RegisterMessages() {
   dom_ui_->RegisterMessageCallback("requestExtensionsData",
       NewCallback(this, &ExtensionsDOMHandler::HandleRequestExtensionsData));
+  dom_ui_->RegisterMessageCallback("toggleDeveloperMode",
+      NewCallback(this, &ExtensionsDOMHandler::HandleToggleDeveloperMode));
   dom_ui_->RegisterMessageCallback("inspect",
       NewCallback(this, &ExtensionsDOMHandler::HandleInspectMessage));
   dom_ui_->RegisterMessageCallback("reload",
@@ -133,6 +137,10 @@ void ExtensionsDOMHandler::HandleRequestExtensionsData(const Value* value) {
   }
   results.Set(L"extensions", extensions_list);
 
+  bool developer_mode = dom_ui_->GetProfile()->GetPrefs()
+      ->GetBoolean(prefs::kExtensionsUIDeveloperMode);
+  results.SetBoolean(L"developerMode", developer_mode);
+
   dom_ui_->CallJavascriptFunction(L"returnExtensionsData", results);
 
   // Register for notifications that we need to reload the page.
@@ -147,6 +155,13 @@ void ExtensionsDOMHandler::HandleRequestExtensionsData(const Value* value) {
       NotificationService::AllSources());
 }
 
+void ExtensionsDOMHandler::HandleToggleDeveloperMode(const Value* value) {
+  bool developer_mode = dom_ui_->GetProfile()->GetPrefs()
+      ->GetBoolean(prefs::kExtensionsUIDeveloperMode);
+  dom_ui_->GetProfile()->GetPrefs()->SetBoolean(
+      prefs::kExtensionsUIDeveloperMode, !developer_mode);
+}
+
 void ExtensionsDOMHandler::HandleInspectMessage(const Value* value) {
   std::string render_process_id_str;
   std::string render_view_id_str;
@@ -514,3 +529,8 @@ RefCountedMemory* ExtensionsUI::GetFaviconResourceBytes() {
   return ResourceBundle::GetSharedInstance().
       LoadImageResourceBytes(IDR_PLUGIN);
 }
+
+// static
+void ExtensionsUI::RegisterUserPrefs(PrefService* prefs) {
+  prefs->RegisterBooleanPref(prefs::kExtensionsUIDeveloperMode, false);
+}

chrome/browser/extensions/extensions_ui.h

@@ -20,6 +20,7 @@ class DictionaryValue;
 class Extension;
 class ExtensionsService;
 class FilePath;
+class PrefService;
 class UserScript;
 class Value;
 
@@ -83,6 +84,9 @@ class ExtensionsDOMHandler
   // Callback for "requestExtensionsData" message.
   void HandleRequestExtensionsData(const Value* value);
 
+  // Callback for "toggleDeveloperMode" message.
+  void HandleToggleDeveloperMode(const Value* value);
+
   // Callback for "inspect" message.
   void HandleInspectMessage(const Value* value);
 
@@ -153,6 +157,8 @@ class ExtensionsUI : public DOMUI {
 
   static RefCountedMemory* GetFaviconResourceBytes();
 
+  static void RegisterUserPrefs(PrefService* prefs);
+
  private:
   DISALLOW_COPY_AND_ASSIGN(ExtensionsUI);
 };

chrome/browser/resources/extensions_ui.html

@@ -74,8 +74,27 @@ div.content {
   -webkit-box-flex: 1;
 }
 
+.showInDevMode {
+  overflow: hidden;
+}
+
+body.hideDevModeInitial .showInDevMode {
+  height: 0 !important;
+  opacity: 0;
+}
+
+body.hideDevMode .showInDevMode {
+  height: 0 !important;
+  opacity: 0;
+  -webkit-transition: all .5s ease-out;
+}
+
+body.showDevMode .showInDevMode {
+  opacity: 1;
+  -webkit-transition: all .5s ease-in;
+}
+
 .wbox-dev-tools {
-  display: none;
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
 }
@@ -111,14 +130,11 @@ div.content {
 }
 
 .extension-description {
-  color: gray;
   margin-top: 0.4em;
 }
 
 .extension-details {
-  color: gray;
   margin-top: 0.5em;
-  display: none;
 }
 
 .extension-actions {
@@ -224,6 +240,7 @@ button {
  * expects to correctly populate the page.
  */
 var extensionDataFormat = {
+  "developerMode": false,
   "extensions": [
     {
       "id": "0000000000000000000000000000000000000000",
@@ -296,6 +313,15 @@ var extensionDataFormat = {
 // (expanded) or not.
 var devToolsExpanded = false;
 
+/**
+ * Toggles the devToolsExpanded, and notifies the c++ dom_ui to toggle the 
+ * extensions.ui.developer_mode which saved in the preferences.
+ */
+function toggleDevToolsExpanded() {
+  devToolsExpanded = !devToolsExpanded;
+  chrome.send('toggleDeveloperMode', []);
+}
+
 /**
  * Takes the |extensionsData| input argument which represents data about the
  * currently installed/running extensions and populates the html jstemplate with
@@ -331,12 +357,31 @@ window.domui_responded_ = false;
 
 function returnExtensionsData(extensionsData) {
   window.domui_responded_ = true;
+
+  devToolsExpanded = extensionsData.developerMode;
+
   showExtensionsData(extensionsData);
 
   // We are currently hiding the body because the first call to jstProcess() to
   // insert localized strings happens prior to this call which runs during the
   // body.onload event, causes a flickering.
   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.
+  var slidables = document.getElementsByClassName('showInDevMode');
+  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) {
+    document.getElementsByTagName('body')[0].className = "hideDevModeInitial";
+  } else {
+    document.getElementById('collapse').style.display = "inline";
+    document.getElementById('expand').style.display = "none";
+  }
 }
 
 /**
@@ -435,19 +480,15 @@ function hidePackDialog() {
  * Toggles visibility of the developer tools.
  */
 function toggleDeveloperTools() {
-  devToolsExpanded = !devToolsExpanded;
+  toggleDevToolsExpanded();
 
   document.getElementById('collapse').style.display =
       devToolsExpanded ? "inline" : "none";
   document.getElementById('expand').style.display =
       devToolsExpanded ? "none" : "inline";
-  document.getElementById('developer_tools').style.display =
-      devToolsExpanded ? "-webkit-box" : "none";
 
-  // Show/hide extra details for the extension.
-  var details = document.getElementsByClassName('extension-details');
-  for (var i = 0; i < details.length; ++i)
-    details[i].style.display = devToolsExpanded ? "block" : "none";
+  document.getElementsByTagName('body')[0].className =
+      devToolsExpanded ? "showDevMode" : "hideDevMode";
 }
 
 /**
@@ -534,7 +575,7 @@ function autoUpdate() {
     <div id="extensionTemplate">
 
       <div id="container" class="vbox-container">
-      <div id="top" class="wbox">
+      <div id="top" class="wbox" style="padding-right: 10px">
 
         <div class="section-header">
           <table cellpadding="0" cellspacing="0" width="100%">
@@ -562,7 +603,7 @@ function autoUpdate() {
         </div>
 
       </div>
-      <div id="developer_tools" class="wbox-dev-tools">
+      <div id="developer_tools" class="wbox-dev-tools showInDevMode">
         <div class="developer-tools">
           Developer Tools:
           <button onclick="loadExtension()">Load unpacked Extension...</button>
@@ -600,18 +641,22 @@ function autoUpdate() {
             </div>
 
             <div class="extension-description" jscontent="description"></div>
-            <div class="extension-details">ID: <span jscontent="id" ></span>
-            </div>
-            <div class="extension-details">
-            <span jsdisplay="views.length > 0">
-              Inspect active views:
-            </span>
-            <ul class="extension-views">
-              <li jsselect="views">
-                <a jsvalues=".extensionView:$this" href="#"
-                 onclick="sendInspectMessage(this.extensionView); return false;"
-                    ><span jscontent="path"></span></a>
-            </ul>
+            <div class="showInDevMode">
+              <div class="extension-details">ID: <span jscontent="id"></span>
+              </div>
+              <div class="extension-details">
+                <span jsdisplay="views.length > 0">
+                  Inspect active views:
+                </span>
+                <ul class="extension-views">
+                  <li jsselect="views">
+                    <a jsvalues=".extensionView:$this" href="#"
+                       onclick="sendInspectMessage(this.extensionView); return false;">
+                       <span jscontent="path"></span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
             </div>
           </td>
           <td width="300">

chrome/common/pref_names.cc

@@ -267,6 +267,10 @@ const wchar_t kCurrentThemeTints[] = L"extensions.theme.tints";
 const wchar_t kCurrentThemeDisplayProperties[] =
     L"extensions.theme.properties";
 
+// Boolean pref which persists whether the extensions_ui is in developer mode
+// (showing developer packing tools and extensions details)
+const wchar_t kExtensionsUIDeveloperMode[] = L"extensions.ui.developer_mode";
+
 // Boolean that indicates whether we should check if we are the default browser
 // on start-up.
 const wchar_t kCheckDefaultBrowser[] = L"browser.check_default_browser";

chrome/common/pref_names.h

@@ -109,6 +109,7 @@ extern const wchar_t kCurrentThemeImages[];
 extern const wchar_t kCurrentThemeColors[];
 extern const wchar_t kCurrentThemeTints[];
 extern const wchar_t kCurrentThemeDisplayProperties[];
+extern const wchar_t kExtensionsUIDeveloperMode[];
 extern const wchar_t kCheckDefaultBrowser[];
 extern const wchar_t kUseCustomChromeFrame[];
 extern const wchar_t kShowOmniboxSearchHint[];