extensions: clean up hiding/showing of developer controls.

chrome/browser/resources/extensions/extensions.js

 // 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.
 
 <include src="../uber/uber_utils.js">
 <include src="extension_code.js">
 <include src="extension_commands_overlay.js">
 <include src="extension_error_overlay.js">
 <include src="extension_focus_manager.js">
 <include src="extension_list.js">
@@ skipping 119 matching lines @@
 
       // Set the title.
       uber.setTitle(loadTimeData.getString('extensionSettings'));
 
       // This will request the data to show on the page and will get a response
       // back in returnExtensionsData.
       chrome.send('extensionSettingsRequestExtensionsData');
 
       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]);

[Dan Beam, 2015/01/30 19:41:31]

sending a true/false arg makes it harder for the JS/C++ to get out of sync

+      }.bind(this));
+
+      window.addEventListener('resize', function() {

[Dan Beam, 2015/01/30 19:41:31]

this happens when zoomed

+        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));
       $('update-extensions-now').addEventListener('click',
           this.handleUpdateExtensionNow_.bind(this));
 
       // Set up the close dialog for the apps developer tools promo.
       $('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();

[Dan Beam, 2015/01/30 19:41:30]

this moves the focus if the keyboard was used to hide the promo (before the
focus was just dropped)

       }.bind(this));
 
       if (!loadTimeData.getBoolean('offStoreInstallEnabled')) {
         this.dragWrapper_ = new cr.ui.DragWrapper(document.documentElement,
                                                   dragWrapperHandler);
       }
 
       extensions.PackExtensionOverlay.getInstance().initializePage();
 
       // Hook up the configure commands link to the overlay.
@@ skipping 31 matching lines @@
       var path = document.location.pathname;
       if (path.length > 1) {
         // Skip starting slash and remove trailing slash (if any).
         var overlayName = path.slice(1).replace(/\/$/, '');
         if (overlayName == 'configureCommands')
           this.showExtensionCommandsConfigUi_();
       }
     },
 
     /**
-     * Updates the Chrome Apps and Extensions Developer Tools promotion's
-     * visibility.
-     * @private
-     */
-    updatePromoVisibility_: function() {

[Dan Beam, 2015/01/30 19:41:31]

combined updatePromoVisibility_ and handleToggleDevMode_ as they're very related
(it was becoming circular)

-      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.
      * @private
      */
     handlePackExtension_: function(e) {
       ExtensionSettings.showOverlay($('pack-extension-overlay'));
       chrome.send('metricsHandler:recordAction', ['Options_PackExtension']);
     },
 
     /**
@@ skipping 19 matching lines @@
     /**
      * Handles the Update Extension Now button.
      * @param {Event} e Change event.
      * @private
      */
     handleUpdateExtensionNow_: function(e) {
       chrome.send('extensionSettingsAutoupdate');
     },
 
     /**
-     * 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));
     },
   };
 
   /**
    * Called by the dom_ui_ to re-populate the page with data representing
    * the current state of installed extensions.
    * @param {ExtensionDataResponse} extensionsData
    */
   ExtensionSettings.returnExtensionsData = function(extensionsData) {
     // We can get called many times in short order, thus we need to
@@ skipping 14 matching lines @@
       extensionsData.extensions.sort(function(a, b) {
         function compare(x, y) {
           return x < y ? -1 : (x > y ? 1 : 0);
         }
         return compare(a.order, b.order) ||
                compare(a.name.toLowerCase(), b.name.toLowerCase()) ||
                compare(a.id, b.id);
       });
     }
 
+    var supervised = extensionsData.profileIsSupervised;
+
     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;
-    }
+    pageDiv.classList.toggle('profile-is-supervised', supervised);
+    pageDiv.classList.toggle('showing-banner', supervised);
 
-    pageDiv.style.marginTop = marginTop + 'px';
+    var devControlsCheckbox = $('toggle-dev-on');
+    devControlsCheckbox.checked = extensionsData.developerMode;
+    devControlsCheckbox.disabled = 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;
-    }
-
-    ExtensionSettings.getInstance().displayPromo_ =
-        extensionsData.promoteAppsDevTools;
-    ExtensionSettings.getInstance().updatePromoVisibility_();
+    var instance = ExtensionSettings.getInstance();
+    instance.displayPromo_ = extensionsData.promoteAppsDevTools;
+    instance.updateDevControlsVisibility_(false);

[Dan Beam, 2015/01/30 19:41:30]

most of this is purely simplifications or moving from JS -> CSS where possible

 
     $('load-unpacked').disabled = extensionsData.loadUnpackedDisabled;
 
     ExtensionsList.prototype.data_ = extensionsData;
     var extensionList = $('extension-settings-list');
     ExtensionsList.decorate(extensionList);
   };
 
   // Indicate that warning |message| has occured for pack of |crx_path| and
   // |pem_path| files.  Ask if user wants override the warning.  Send
@@ skipping 98 matching lines @@
 
   // Export
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 window.addEventListener('load', function(e) {
   extensions.ExtensionSettings.getInstance().initialize();
 });