[uber extensions] cleansing

1. many fewer lines of code
2. faster dev mode animation (open 300-700ms -> 250ms, close 200ms->100ms)
3. don't clobber the page on dev mode toggling
4. reduce CSS duplication
5. better structure/presentation separation
6. don't animate anything while loading
7. don't allow user to tab to dev mode buttons when they're hidden

BUG=107323,112479
TEST=manual

Review URL: https://chromiumcodereview.appspot.com/9323018

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

4 files changed, 130 insertions, 166 deletions

diff --git a/chrome/browser/resources/extensions/extension_list.js b/chrome/browser/resources/extensions/extension_list.js
index 09087fe..35561c1 100644
--- a/chrome/browser/resources/extensions/extension_list.js
+++ b/chrome/browser/resources/extensions/extension_list.js
@@ -25,8 +25,6 @@ cr.define('options', function() {
    */
   var ExtensionsList = cr.ui.define('div');
 
-  var handlersInstalled = false;
-
   /**
    * @type {Object.<string, boolean>} A map from extension id to a boolean
    *     indicating whether its details section is expanded. This persists
@@ -46,33 +44,12 @@ cr.define('options', function() {
 
     /** @inheritDoc */
     decorate: function() {
-      this.initControlsAndHandlers_();
-
       this.textContent = '';
 
       this.showExtensionNodes_();
     },
 
     /**
-     * Initializes the controls (toggle section and button) and installs
-     * handlers.
-     * @private
-     */
-    initControlsAndHandlers_: function() {
-      // Make sure developer mode section is set correctly as per saved setting.
-      var toggleButton = $('toggle-dev-on');
-      var toggleSection = $('dev');
-      if (this.data_.developerMode) {
-        toggleSection.classList.add('dev-open');
-        toggleSection.classList.remove('dev-closed');
-        toggleButton.checked = true;
-      } else {
-        toggleSection.classList.remove('dev-open');
-        toggleSection.classList.add('dev-closed');
-      }
-    },
-
-    /**
      * Creates all extension items from scratch.
      * @private
      */
@@ -205,52 +182,49 @@ cr.define('options', function() {
       });
       node.querySelector('.enable-controls').appendChild(trash);
 
-      // Developer mode details.
-      if (this.data_.developerMode) {
-        // First we have the id.
-        var idLabel = node.querySelector('.extension-id');
-        idLabel.textContent = ' ' + extension.id;
-
-        // Then the path, if provided by unpacked extension.
-        if (extension.isUnpacked) {
-          var loadPath = node.querySelector('.load-path');
-          loadPath.hidden = false;
-          loadPath.querySelector('span:nth-of-type(2)').textContent =
-              ' ' + extension.path;
-        }
+      // Developer mode ////////////////////////////////////////////////////////
+
+      // First we have the id.
+      var idLabel = node.querySelector('.extension-id');
+      idLabel.textContent = ' ' + extension.id;
 
-        // Then the 'managed, cannot uninstall/disable' message.
-        if (!extension.mayDisable)
-          node.querySelector('.managed-message').hidden = false;
-
-        // Then active views.
-        if (extension.views.length > 0) {
-          var activeViews = node.querySelector('.active-views');
-          activeViews.hidden = false;
-          var link = activeViews.querySelector('a');
-
-          for (var i = 0; i < extension.views.length; ++i) {
-            var view = extension.views[i];
-
-            var label = view.path + (view.incognito ?
-                ' ' + localStrings.getString('viewIncognito') : '');
-            link.textContent = label;
-            link.addEventListener('click', function(e) {
-              // TODO(estade): remove conversion to string?
-              chrome.send('extensionSettingsInspect', [
-                String(view.renderProcessId),
-                String(view.renderViewId)
-              ]);
-            });
-
-            if (i < extension.views.length - 1) {
-              link = link.cloneNode(true);
-              activeViews.appendChild(link);
-            }
+      // Then the path, if provided by unpacked extension.
+      if (extension.isUnpacked) {
+        var loadPath = node.querySelector('.load-path');
+        loadPath.hidden = false;
+        loadPath.querySelector('span:nth-of-type(2)').textContent =
+            ' ' + extension.path;
+      }
+
+      // Then the 'managed, cannot uninstall/disable' message.
+      if (!extension.mayDisable)
+        node.querySelector('.managed-message').hidden = false;
+
+      // Then active views.
+      if (extension.views.length > 0) {
+        var activeViews = node.querySelector('.active-views');
+        activeViews.hidden = false;
+        var link = activeViews.querySelector('a');
+
+        for (var i = 0; i < extension.views.length; ++i) {
+          var view = extension.views[i];
+
+          var label = view.path + (view.incognito ?
+              ' ' + localStrings.getString('viewIncognito') : '');
+          link.textContent = label;
+          link.addEventListener('click', function(e) {
+            // TODO(estade): remove conversion to string?
+            chrome.send('extensionSettingsInspect', [
+              String(view.renderProcessId),
+              String(view.renderViewId)
+            ]);
+          });
+
+          if (i < extension.views.length - 1) {
+            link = link.cloneNode(true);
+            activeViews.appendChild(link);
           }
         }
-
-        node.querySelector('.developer-extras').hidden = false;
       }
 
       this.appendChild(node);
diff --git a/chrome/browser/resources/extensions/extensions.css b/chrome/browser/resources/extensions/extensions.css
index 4eb35f1..93a4565 100644
--- a/chrome/browser/resources/extensions/extensions.css
+++ b/chrome/browser/resources/extensions/extensions.css
@@ -1,74 +1,68 @@
 /* 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.
- */
+ * found in the LICENSE file. */
 
-/* Dev */
+html.loading * {
+  -webkit-transition-duration: 0 !important;
+}
+
+/* Developer mode */
 
-.dev-open {
+#dev-controls {
+  -webkit-padding-end: 3px;
+  -webkit-padding-start: 4px;
+  -webkit-transition: padding 100ms, height 100ms, opacity 100ms;
   border-bottom: 1px solid rgb(205, 205, 205);
+  display: -webkit-box;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+#extension-settings.dev-mode #dev-controls {
+  -webkit-transition-duration: 250ms;
   height: 32px;
+  opacity: 1;
   padding-bottom: 7px;
   padding-top: 13px;
-  -webkit-padding-start: 4px;
-  -webkit-padding-end: 3px;
-  -webkit-transition: padding 300ms, height 300ms, opacity 700ms;
 }
 
-.dev-closed {
-  height: 0;
-  opacity: 0;
-  -webkit-padding-start: 4px;
-  -webkit-padding-end: 3px;
-  -webkit-transition: padding 200ms, height 200ms, opacity 200ms;
+#dev-controls-spacer {
+  -webkit-box-flex: 1;
 }
 
-.dev-button-visible {
-  display: inherit;
-  opacity: 1;
-  -webkit-transition: opacity 200ms;
+#dev-toggle {
+  -webkit-margin-end: 8px;
+  display: block;
+  text-align: end;
+  margin-top: 5px;
 }
 
-.dev-button-hidden {
+#extension-settings:not(.dev-mode) .developer-extras {
   display: none;
 }
 
+/* Contents */
+
 #suggest-gallery {
   -webkit-padding-start: 10px;
 }
 
-#dev-toggle {
-  display: block;
-  text-align: end;
-  margin-top: 5px;
-  -webkit-margin-end: 8px;
-}
-
 #get-more-extensions-container {
   display: -webkit-box;
 }
 
 #get-more-extensions {
+  -webkit-padding-start: 10px;
   padding-top: 5px;
   font-size: 15px;
-  -webkit-padding-start: 10px;
-}
-
-#dev-table tr {
-  white-space: nowrap;
 }
 
-/* Support full keyboard accessibility without making things ugly
-   for users who click, by hiding some focus outlines when the user
-   clicks anywhere, but showing them when the user presses any key. */
-body.hide-some-focus-outlines .extension-zippy-container {
-  outline: none;
+#extension-settings {
+  max-width: 700px;
+  min-width: 500px;
 }
 
-/**************************************************************************/
-/* TODO(estade): rules above this line are old and should probably be
- * retired.*/
-
 .extension-list-item-wrapper {
   margin: 23px 0;
 }
diff --git a/chrome/browser/resources/extensions/extensions.html b/chrome/browser/resources/extensions/extensions.html
index 8cc11c1..854e0ce 100644
--- a/chrome/browser/resources/extensions/extensions.html
+++ b/chrome/browser/resources/extensions/extensions.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html i18n-values="dir:textdirection;">
+<html i18n-values="dir:textdirection;" class="loading">
 <head>
 <meta charset="utf-8">
 
@@ -30,42 +30,30 @@
 <div class="page" id="extension-settings">
   <header id="page-header"><h1 i18n-content="extensionSettings"></h1></header>
   <div id="dev-toggle">
-    <input id="toggle-dev-on" type="checkbox" value="off">
-    <label for="toggle-dev-on" i18n-content="extensionSettingsDeveloperMode">
+    <label>
+      <input id="toggle-dev-on" type="checkbox">
+      <span i18n-content="extensionSettingsDeveloperMode">
     </label>
   </div>
-  <div class="displaytable">
-    <div id="dev" class="dev-closed">
-      <table id="dev-table" width="100%">
-        <tr>
-          <td>
-            <button id="load-unpacked"
-                i18n-content="extensionSettingsLoadUnpackedButton"></button>
-            <button id="pack-extension"
-                i18n-content="extensionSettingsPackButton"></button>
-          </td>
-          <td align="right">
-            <button id="update-extensions-now"
-                i18n-content="extensionSettingsUpdateButton"></button>
-          </td>
-        </tr>
-      </table>
-    </div>
-    <section class="extension-settings-content">
-      <div id="extension-settings-list"></div>
-    </section>
+  <div id="dev-controls" hidden>
+    <button id="load-unpacked"
+        i18n-content="extensionSettingsLoadUnpackedButton"></button>
+    <button id="pack-extension"
+        i18n-content="extensionSettingsPackButton"></button>
+    <div id="dev-controls-spacer"></div>
+    <button id="update-extensions-now"
+        i18n-content="extensionSettingsUpdateButton"></button>
+  </div>
+  <div id="extension-settings-list"></div>
+  <div>
+    <strong id="no-extensions" i18n-content="extensionSettingsNoExtensions"
+        hidden></strong>
+  </div>
+  <div id="suggest-gallery" hidden></div>
+  <div id="get-more-extensions-container" hidden>
+    <img src="chrome://theme/IDR_WEBSTORE_ICON_32">
+    <div id="get-more-extensions"></div>
   </div>
-  <section>
-    <div>
-      <strong id="no-extensions" i18n-content="extensionSettingsNoExtensions"
-          hidden></strong>
-    </div>
-    <div id="suggest-gallery" hidden></div>
-    <div id="get-more-extensions-container" hidden>
-      <img src="chrome://theme/IDR_WEBSTORE_ICON_32">
-      <div id="get-more-extensions"></div>
-    </div>
-  </section>
 </div>
 
 <div id="template-collection" hidden>
@@ -78,7 +66,7 @@
           <span class="extension-version"></span>
         </div>
         <p class="extension-description"></p>
-        <div class="developer-extras" hidden>
+        <div class="developer-extras">
           <div>
             <span i18n-content="extensionSettingsExtensionId"></span>
             <span class="extension-id"></span>
diff --git a/chrome/browser/resources/extensions/extensions.js b/chrome/browser/resources/extensions/extensions.js
index 1eabc567b..0ac0cf3 100644
--- a/chrome/browser/resources/extensions/extensions.js
+++ b/chrome/browser/resources/extensions/extensions.js
@@ -40,10 +40,10 @@ cr.define('extensions', function() {
       // back in returnExtensionsData.
       chrome.send('extensionSettingsRequestExtensionsData');
 
-      // Set up the developer mode button.
-      var toggleDevMode = $('toggle-dev-on');
-      toggleDevMode.addEventListener('click',
+      $('toggle-dev-on').addEventListener('change',
           this.handleToggleDevMode_.bind(this));
+      $('dev-controls').addEventListener('webkitTransitionEnd',
+          this.handleDevControlsTransitionEnd_.bind(this));
 
       // Setup the gallery related links and text.
       $('suggest-gallery').innerHTML =
@@ -128,35 +128,31 @@ cr.define('extensions', function() {
      * @private
      */
     handleToggleDevMode_: function(e) {
-      var dev = $('dev');
-      if (!dev.classList.contains('dev-open')) {
-        // Make the Dev section visible.
-        dev.classList.add('dev-open');
-        dev.classList.remove('dev-closed');
-
-        $('load-unpacked').classList.add('dev-button-visible');
-        $('load-unpacked').classList.remove('dev-button-hidden');
-        $('pack-extension').classList.add('dev-button-visible');
-        $('pack-extension').classList.remove('dev-button-hidden');
-        $('update-extensions-now').classList.add('dev-button-visible');
-        $('update-extensions-now').classList.remove('dev-button-hidden');
+      if ($('toggle-dev-on').checked) {
+        $('dev-controls').hidden = false;
+        window.setTimeout(function() {
+          $('extension-settings').classList.add('dev-mode');
+        }, 0);
       } else {
-        // Hide the Dev section.
-        dev.classList.add('dev-closed');
-        dev.classList.remove('dev-open');
-
-        $('load-unpacked').classList.add('dev-button-hidden');
-        $('load-unpacked').classList.remove('dev-button-visible');
-        $('pack-extension').classList.add('dev-button-hidden');
-        $('pack-extension').classList.remove('dev-button-visible');
-        $('update-extensions-now').classList.add('dev-button-hidden');
-        $('update-extensions-now').classList.remove('dev-button-visible');
+        $('extension-settings').classList.remove('dev-mode');
       }
 
       chrome.send('extensionSettingsToggleDeveloperMode', []);
     },
 
     /**
+     * Called when a transition has ended for #dev-controls.
+     * @param {Event} e webkitTransitionEnd event.
+     * @private
+     */
+    handleDevControlsTransitionEnd_: function(e) {
+      if (e.propertyName == 'height' &&
+          !$('extension-settings').classList.contains('dev-mode')) {
+        $('dev-controls').hidden = true;
+      }
+    },
+
+    /**
      * Called when the page is scrolled; moves elements that are position:fixed
      * but should only behave as if they are fixed for vertical scrolling.
      * @private
@@ -218,10 +214,22 @@ cr.define('extensions', function() {
       $('suggest-gallery').hidden = false;
     }
 
-    ExtensionsList.prototype.data_ = extensionsData;
+    if (extensionsData.developerMode) {
+      $('toggle-dev-on').checked = true;
+      $('extension-settings').classList.add('dev-mode');
+        $('dev-controls').hidden = false;
+    } else {
+      $('toggle-dev-on').checked = false;
+      $('extension-settings').classList.remove('dev-mode');
+    }
 
+    ExtensionsList.prototype.data_ = extensionsData;
     var extensionList = $('extension-settings-list');
     ExtensionsList.decorate(extensionList);
+
+    window.setTimeout(function() {
+      document.documentElement.classList.remove('loading');
+    }, 0);
   }
 
   // Indicate that warning |message| has occured for pack of |crx_path| and