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';
+        pageInfo.parentPage.updateManagedBannerVisibility();
       }
     }
   };
 
   /**
   * 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
     // tabs to have child nodes, e.g. labels in separately-styled spans.
     while (tab && !tab.classList.contains('subpages-nav-tabs') &&
            !tab.classList.contains('inactive-tab')) {
       tab = tab.parentNode;
     }
     if (!tab || !tab.classList.contains('inactive-tab'))
       return;
 
     if (this.activeNavTab != null) {
       this.activeNavTab.classList.remove('active-tab');
       $(this.activeNavTab.getAttribute('tab-contents')).classList.
           remove('active-tab-contents');
     }
 
     tab.classList.add('active-tab');
     $(tab.getAttribute('tab-contents')).classList.add('active-tab-contents');
     this.activeNavTab = tab;
-  }
+  };
 
   /**
    * Registers new options page.
    * @param {OptionsPage} page Page to register.
    */
   OptionsPage.register = function(page) {
     OptionsPage.registeredPages_[page.name] = page;
     // Create and add new page <li> element to navbar.
     var pageNav = document.createElement('li');
     pageNav.id = page.name + 'PageNav';
@@ skipping 73 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';
+        this.updateManagedBannerVisibility();
+      }
+    },
+
+    /**
+     * Updates managed banner visibility state.
+     */
+    updateManagedBannerVisibility: function() {
+      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';
+          this.updateManagedBannerVisibility();
 
           // Recent webkit change no longer allows url change from "chrome://".
-          window.history.pushState({pageName: this.name},
-                                   this.title);
+          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
   };
 
 });