extensions: clean up hiding/showing of developer controls.

Also adds better support for zoom/wrapping.

BUG=438815
R=kalman@chromium.org

Review URL: https://codereview.chromium.org/887803003

Cr-Commit-Position: refs/heads/master@{#314016}

chrome/browser/resources/extensions/extensions.css

@@ -3,7 +3,7 @@
  * found in the LICENSE file. */
 
 html.loading * {
-  -webkit-transition-duration: 0 !important;
+  transition-duration: 0 !important;
 }
 
 html:not(.focus-outline-visible)
@@ -16,26 +16,33 @@ html:not(.focus-outline-visible)
   overflow-y: hidden;
 }
 
+#extension-settings.showing-banner {
+  margin-top: 45px;
+}
+
 /* Developer mode */
 
 #dev-controls {
   -webkit-margin-end: 20px;
-  -webkit-transition: padding 100ms, height 100ms, opacity 100ms;
-  border-bottom: 1px solid #eee;
   height: 0;
-  opacity: 0;
   overflow: hidden;
 }
 
-#dev-controls .buttons-container {
-  -webkit-padding-end: 3px;
-  -webkit-padding-start: 4px;
+#dev-controls.animated {
+  transition: height 150ms;
 }
 
-#dev-controls .buttons-container {
-  display: -webkit-box;
-  height: 32px;  /* height + padding-top matches #dev-controls height. */
-  padding-top: 13px;
+.dev-mode #dev-controls {
+  border-bottom: 1px solid #eee;
+}
+
+#dev-controls > * {
+  padding: 8px 3px;
+}
+
+#dev-controls .button-container {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 #dev-controls button {
@@ -43,21 +50,18 @@ html:not(.focus-outline-visible)
 }
 
 #apps-developer-tools-promo {
-  -webkit-padding-end: 3px;
   align-items: center;
   border-top: 1px solid #eee;
   display: flex;
   font-size: 13px;
-  margin-top: 7px;  /* This matches #dev-controls padding-bottom. */
-  padding-top: 5px;
 }
 
 #apps-developer-tools-promo img {
+  -webkit-margin-end: 5px;
+  -webkit-margin-start: -5px;
   content: url(apps_developer_tools_promo_48.png);
-}
-
-#apps-developer-tools-promo-text {
-  -webkit-margin-start: 5px;
+  margin-bottom: -5px;
+  margin-top: -5px;
 }
 
 #apps-developer-tools-promo-close-wrapper {
@@ -82,19 +86,8 @@ html:not(.focus-outline-visible)
   background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
 }
 
-#extension-settings.dev-mode #dev-controls {
-  -webkit-transition-duration: 250ms;
-  height: 45px;
-  opacity: 1;
-  padding-bottom: 7px;
-}
-
-#extension-settings.dev-mode.adt-promo #dev-controls {
-  height: 105px;  /* Allow more height for the Apps Developer Tools promo. */
-}
-
 #dev-controls-spacer {
-  -webkit-box-flex: 1;
+  flex: 1;
 }
 
 #dev-toggle {
@@ -123,10 +116,6 @@ html:not(.focus-outline-visible)
   text-align: right;
 }
 
-#extension-settings:not(.dev-mode) .developer-extras {
-  display: none;
-}
-
 .developer-extras > div,
 .permanent-warnings > div {
   margin: 5px 0;
@@ -317,11 +306,11 @@ html[dir='rtl'] .extension-list-item {
 
 .error-collection-control {
   -webkit-margin-start: 5px;
-  display: none;
 }
 
-#extension-settings.dev-mode .error-collection-control {
-  display: initial;
+#extension-settings:not(.dev-mode) .developer-extras,
+#extension-settings:not(.dev-mode) .error-collection-control {
+  display: none;
 }
 
 #font-measuring-div {
@@ -367,12 +356,12 @@ html[dir=rtl] .extension-commands-config {
 /* Trash */
 
 #extension-settings .trash {
-  -webkit-transition: opacity 200ms;
   height: 22px;
   opacity: 0.8;
   position: relative;
   right: 0;
   top: 6px;
+  transition: opacity 200ms;
 }
 
 html[dir='rtl'] #extension-settings .trash {

chrome/browser/resources/extensions/extensions.html

@@ -68,7 +68,8 @@
 </div>
 
 <div class="page" id="extension-settings">
-  <header id="page-header"><h1 i18n-content="extensionSettings"></h1>
+  <header id="page-header">
+    <h1 i18n-content="extensionSettings"></h1>
     <div id="header-controls" class="header-extras">
       <div id="dev-toggle" class="checkbox">
         <label>
@@ -84,8 +85,8 @@
       </div>
     </div>
   </header>
-  <div id="dev-controls" hidden>
-    <div class="buttons-container">
+  <div id="dev-controls">
+    <div class="button-container">
       <button id="load-unpacked"
           i18n-content="extensionSettingsLoadUnpackedButton"></button>
       <button id="pack-extension"
@@ -98,6 +99,8 @@
       <button id="update-extensions-now"
           i18n-content="extensionSettingsUpdateButton"></button>
     </div>
+    <!-- NOTE: the code that shows/hides #dev-controls assumes the ADT promo is
+         directly underneath .button-container. -->
     <div id="apps-developer-tools-promo">
       <img alt=""></img>
       <span id="apps-developer-tools-promo-text"

chrome/browser/resources/extensions/extensions.js

@@ -137,14 +137,19 @@ cr.define('extensions', function() {
 
       var extensionLoader = extensions.ExtensionLoader.getInstance();
 
-      $('toggle-dev-on').addEventListener('change',
-          this.handleToggleDevMode_.bind(this));
-      $('dev-controls').addEventListener('webkitTransitionEnd',
-          this.handleDevControlsTransitionEnd_.bind(this));
+      $('toggle-dev-on').addEventListener('change', function(e) {
+        this.updateDevControlsVisibility_(true);
+        chrome.send('extensionSettingsToggleDeveloperMode',
+                    [$('toggle-dev-on').checked]);
+      }.bind(this));
+
+      window.addEventListener('resize', function() {
+        this.updateDevControlsVisibility_(false);
+      }.bind(this));
 
       // Set up the three dev mode buttons (load unpacked, pack and update).
       $('load-unpacked').addEventListener('click', function(e) {
-          extensionLoader.loadUnpacked();
+        extensionLoader.loadUnpacked();
       });
       $('pack-extension').addEventListener('click',
           this.handlePackExtension_.bind(this));
@@ -155,8 +160,11 @@ cr.define('extensions', function() {
       $('apps-developer-tools-promo').querySelector('.close-button').
           addEventListener('click', function(e) {
         this.displayPromo_ = false;
-        this.updatePromoVisibility_();
+        this.updateDevControlsVisibility_(true);
         chrome.send('extensionSettingsDismissADTPromo');
+
+        if (cr.ui.FocusOutlineManager.forDocument(document).visible)
+          $('update-extensions-now').focus();
       }.bind(this));
 
       if (!loadTimeData.getBoolean('offStoreInstallEnabled')) {
@@ -207,26 +215,6 @@ cr.define('extensions', function() {
       }
     },
 
-    /**
-     * Updates the Chrome Apps and Extensions Developer Tools promotion's
-     * visibility.
-     * @private
-     */
-    updatePromoVisibility_: function() {
-      var extensionSettings = $('extension-settings');
-      var visible = extensionSettings.classList.contains('dev-mode') &&
-                    this.displayPromo_;
-
-      var adtPromo = $('apps-developer-tools-promo');
-      var controls = adtPromo.querySelectorAll('a, button');
-      Array.prototype.forEach.call(controls, function(control) {
-        control[visible ? 'removeAttribute' : 'setAttribute']('tabindex', '-1');
-      });
-
-      adtPromo.setAttribute('aria-hidden', !visible);
-      extensionSettings.classList.toggle('adt-promo', visible);
-    },
-
     /**
      * Handles the Pack Extension button.
      * @param {Event} e Change event.
@@ -267,34 +255,37 @@ cr.define('extensions', function() {
     },
 
     /**
-     * Handles the Toggle Dev Mode button.
-     * @param {Event} e Change event.
+     * Updates the visibility of the developer controls based on whether the
+     * [x] Developer mode checkbox is checked. Also called if a user dismisses
+     * the apps developer tools promo.
+     * @param {boolean} animated Whether to animate any updates.
      * @private
      */
-    handleToggleDevMode_: function(e) {
-      if ($('toggle-dev-on').checked) {
-        $('dev-controls').hidden = false;
-        window.setTimeout(function() {
-          $('extension-settings').classList.add('dev-mode');
-        }, 0);
-      } else {
-        $('extension-settings').classList.remove('dev-mode');
-      }
-      window.setTimeout(this.updatePromoVisibility_.bind(this), 0);
+    updateDevControlsVisibility_: function(animated) {
+      var showDevControls = $('toggle-dev-on').checked;
+      $('extension-settings').classList.toggle('dev-mode', showDevControls);
 
-      chrome.send('extensionSettingsToggleDeveloperMode');
-    },
+      var devControls = $('dev-controls');
+      devControls.classList.toggle('animated', animated);
 
-    /**
-     * 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;
-      }
+      var buttons = devControls.querySelector('.button-container');
+      var adtPromo = $('apps-developer-tools-promo');
+      [
+        {root: buttons, focusable: showDevControls},
+        {root: adtPromo, focusable: showDevControls && this.displayPromo_},
+      ].forEach(function(entry) {
+        var controls = entry.root.querySelectorAll('a, button');
+        Array.prototype.forEach.call(controls, function(control) {
+          control.tabIndex = entry.focusable ? 0 : -1;
+        });
+        entry.root.setAttribute('aria-hidden', !entry.focusable);
+      });
+
+      window.requestAnimationFrame(function() {
+        devControls.style.height = !showDevControls ? '' :
+            (this.displayPromo_ ? adtPromo.offsetHeight : 0) +
+            buttons.offsetHeight + 'px';
+      }.bind(this));
     },
   };
 
@@ -329,36 +320,19 @@ cr.define('extensions', function() {
       });
     }
 
-    var pageDiv = $('extension-settings');
-    var marginTop = 0;
-    if (extensionsData.profileIsSupervised) {
-      pageDiv.classList.add('profile-is-supervised');
-    } else {
-      pageDiv.classList.remove('profile-is-supervised');
-    }
-    if (extensionsData.profileIsSupervised) {
-      pageDiv.classList.add('showing-banner');
-      $('toggle-dev-on').disabled = true;
-      marginTop += 45;
-    } else {
-      pageDiv.classList.remove('showing-banner');
-      $('toggle-dev-on').disabled = false;
-    }
+    var supervised = extensionsData.profileIsSupervised;
 
-    pageDiv.style.marginTop = marginTop + 'px';
+    var pageDiv = $('extension-settings');
+    pageDiv.classList.toggle('profile-is-supervised', supervised);
+    pageDiv.classList.toggle('showing-banner', supervised);
 
-    if (extensionsData.developerMode) {
-      pageDiv.classList.add('dev-mode');
-      $('toggle-dev-on').checked = true;
-      $('dev-controls').hidden = false;
-    } else {
-      pageDiv.classList.remove('dev-mode');
-      $('toggle-dev-on').checked = false;
-    }
+    var devControlsCheckbox = $('toggle-dev-on');
+    devControlsCheckbox.checked = extensionsData.developerMode;
+    devControlsCheckbox.disabled = supervised;
 
-    ExtensionSettings.getInstance().displayPromo_ =
-        extensionsData.promoteAppsDevTools;
-    ExtensionSettings.getInstance().updatePromoVisibility_();
+    var instance = ExtensionSettings.getInstance();
+    instance.displayPromo_ = extensionsData.promoteAppsDevTools;
+    instance.updateDevControlsVisibility_(false);
 
     $('load-unpacked').disabled = extensionsData.loadUnpackedDisabled;
 

chrome/browser/ui/webui/extensions/extension_settings_browsertest.js

@@ -74,22 +74,22 @@ AsyncExtensionSettingsWebUITest.prototype = {
 };
 
 TEST_F('AsyncExtensionSettingsWebUITest', 'testDeveloperModeA11y', function() {
-  var devControl = $('dev-controls');
+  var devControls = $('dev-controls');
 
   // Make sure developer controls are hidden before checkbox is clicked.
-  assertTrue(devControl.hidden);
+  assertEquals(0, devControls.offsetHeight);
   $('toggle-dev-on').click();
 
   document.addEventListener('webkitTransitionEnd', function f(e) {
-    if (e.target == devControl) {
+    if (e.target == devControls) {
       // Make sure developer controls are not hidden after checkbox is clicked.
-      assertFalse(devControl.hidden);
+      assertGT(devControls.offsetHeight, 0);
 
       document.removeEventListener(f, 'webkitTransitionEnd');
       testDone();
     }
   });
-  ensureTransitionEndEvent(devControl, 4000);
+  ensureTransitionEndEvent(devControls, 4000);
 });
 
 /**

chrome/browser/ui/webui/extensions/extension_settings_handler.cc

@@ -990,10 +990,10 @@ void ExtensionSettingsHandler::HandleToggleDeveloperMode(
   if (profile->IsSupervised())
     return;
 
-  bool developer_mode =
-      !profile->GetPrefs()->GetBoolean(prefs::kExtensionsUIDeveloperMode);
+  bool developer_mode_on;
+  CHECK(args->GetBoolean(0, &developer_mode_on));
   profile->GetPrefs()->SetBoolean(prefs::kExtensionsUIDeveloperMode,
-                                  developer_mode);
+                                  developer_mode_on);
 }
 
 void ExtensionSettingsHandler::HandleInspectMessage(