dom-ui settings: prefer to add/remove class 'hidden' rather than manipulate t...

chrome/browser/resources/options/options_page.js

 // Copyright (c) 2010 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.
 
 cr.define('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
@@ skipping 91 matching lines @@
   /**
    * Closes any currently-open subpage.
    */
   OptionsPage.closeSubPage = function() {
     for (var name in OptionsPage.registeredSubPages_) {
       var pageInfo = OptionsPage.registeredSubPages_[name];
       if (pageInfo.page.visible) {
         pageInfo.page.visible = false;
         // Since the managed pref banner lives outside the overlay, and the
         // parent is not changing visibility, update the banner explicitly.
-        var banner = $('managed-prefs-banner');
-        banner.style.display = pageInfo.parentPage.managed ? 'block' : 'none';
+        if (pageInfo.parentPage.managed) {
+          $('managed-prefs-banner').classList.remove('hidden');
+        } else {
+          $('managed-prefs-banner').classList.add('hidden');
+        }

[stuartmorgan, 2010/11/16 23:42:55]

Since we have this duplicated three times, how about moving it to an instance
method in OptionsPage to update the banner?

[csilv, 2010/11/17 00:15:24]

Done.

       }
     }
   };
 
   /**
   * Shows the tab contents for the given navigation tab.
   * @param {!Element} tab The tab that the user clicked.
   */
   OptionsPage.showTab = function(tab) {
     // Search parents until we find a tab, or the nav bar itself. This allows
@@ skipping 101 matching lines @@
      * Initializes page content.
      */
     initializePage: function() {},
 
     /**
      * Sets managed banner visibility state.
      */
     setManagedBannerVisibility: function(visible) {
       this.managed = visible;
       if (this.visible) {
-        $('managed-prefs-banner').style.display = visible ? 'block' : 'none';
+        if (this.managed) {
+          $('managed-prefs-banner').classList.remove('hidden');
+        } else {
+          $('managed-prefs-banner').classList.add('hidden');
+        }
       }
     },
 
     /**
      * Gets page visibility state.
      */
     get visible() {
       var page = $(this.pageDivName);
       return page && page.ownerDocument.defaultView.getComputedStyle(
           page).display == 'block';
     },
 
     /**
      * Sets page visibility.
      */
     set visible(visible) {
       if ((this.visible && visible) || (!this.visible && !visible))
         return;
 
       if (visible) {
-        this.pageDiv.style.display = 'block';
+        this.pageDiv.classList.remove('hidden');
         if (this.isOverlay) {
-          var overlay = $('overlay');
-          overlay.classList.remove('hidden');
+          $('overlay').classList.remove('hidden');
           document.addEventListener('keydown',
                                     OptionsPage.clearOverlaysOnEsc_);
         } else {
           if (this.isSubPageSheet)
             $('subpage-sheet-container').classList.remove('hidden');
 
-          var banner = $('managed-prefs-banner');
-          banner.style.display = this.managed ? 'block' : 'none';
+          if (this.managed) {
+            $('managed-prefs-banner').classList.remove('hidden');
+          } else {
+            $('managed-prefs-banner').classList.add('hidden');
+          }
 
           // Recent webkit change no longer allows url change from "chrome://".
           window.history.pushState({pageName: this.name},
                                    this.title);
         }
         if (this.tab) {
           this.tab.classList.add('navbar-item-selected');
         }
       } else {
+        this.pageDiv.classList.add('hidden');
         if (this.isOverlay) {
-          var overlay = $('overlay');
-          overlay.classList.add('hidden');
+          $('overlay').classList.add('hidden');
           document.removeEventListener('keydown',
                                        OptionsPage.clearOverlaysOnEsc_);
         } else if (this.isSubPageSheet) {
           $('subpage-sheet-container').classList.add('hidden');
         }
-        this.pageDiv.style.display = 'none';
         if (this.tab) {
           this.tab.classList.remove('navbar-item-selected');
         }
       }
 
       cr.dispatchPropertyChange(this, 'visible', visible, !visible);
     },
 
     /**
      * Handles a hash value in the URL (such as bar in
      * chrome://options/foo#bar). Called on page load. By default, this shows
      * an overlay that matches the hash name, but can be overriden by individual
      * OptionsPage subclasses to get other behavior.
      * @param {string} hash The hash value.
      */
     handleHash: function(hash) {
       OptionsPage.showOverlay(hash);
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 
 });