uber managed pref banners

1. improve appearance (match Glen mock)
2. make them appear in overlays as appropriate
3. move below title.

BUG=114711
TEST=manual

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

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

chrome/browser/resources/options2/browser_options.js

@@ -481,52 +481,11 @@ cr.define('options', function() {
      * @private
      */
     hideAdvancedSettings_: function() {
-      $('advanced-settings').style.height = '0px'
+      $('advanced-settings').style.height = '0px';
       $('advanced-settings-expander').innerHTML =
           localStrings.getString('showAdvancedSettings');
     },
 
-    /**
-     * Updates managed banner visibility state. This function iterates over
-     * all input fields of all subpages and if any of these is marked as managed
-     * it triggers the managed banner to be visible.
-     * @private
-     */
-    updateManagedBannerVisibility_: function() {
-      var bannerDiv = $('managed-prefs-banner');
-
-      var controlledByPolicy = false;
-      var controlledByExtension = false;
-      var inputElements = document.querySelectorAll('input[controlled-by]');
-      var mainPages = document.querySelectorAll('#page-container .page');
-      for (var i = 0, len = inputElements.length; i < len; i++) {
-        if (inputElements[i].controlledBy == 'policy')
-          controlledByPolicy = true;
-        else if (inputElements[i].controlledBy == 'extension')
-          controlledByExtension = true;
-      }
-      if (!controlledByPolicy && !controlledByExtension) {
-        bannerDiv.hidden = true;
-        for (var i = 0; i < mainPages.length; i++)
-          mainPages[i].classList.remove('under-managed-prefs-banner');
-      } else {
-        bannerDiv.hidden = false;
-        for (var i = 0; i < mainPages.length; i++)
-          mainPages[i].classList.add('under-managed-prefs-banner');
-
-        if (controlledByPolicy && !controlledByExtension) {
-          $('managed-prefs-text').textContent =
-              templateData.policyManagedPrefsBannerText;
-        } else if (!controlledByPolicy && controlledByExtension) {
-          $('managed-prefs-text').textContent =
-              templateData.extensionManagedPrefsBannerText;
-        } else if (controlledByPolicy && controlledByExtension) {
-          $('managed-prefs-text').textContent =
-              templateData.policyAndExtensionManagedPrefsBannerText;
-        }
-      }
-    },
-
     /**
      * Initializes a button for controlling screen brightness.
      * @param {string} id Button ID.

chrome/browser/resources/options2/content_settings.js

@@ -159,7 +159,7 @@ cr.define('options', function() {
           (dict['cookies']['value'] == 'session');
     }
     ContentSettings.getInstance().updateSessionRestoreContentSettings();
-    BrowserOptions.updateManagedBannerVisibility();
+    OptionsPage.updateManagedBannerVisibility();
   };
 
   /**

chrome/browser/resources/options2/options.html

@@ -139,24 +139,36 @@
 
 <div id="main-content">
   <div id="mainview">
-     <div id="managed-prefs-banner" class="managed-prefs-banner" hidden>
-       <span id="managed-prefs-icon" class="managed-prefs-icon"></span>
-       <span id="managed-prefs-text" class="managed-prefs-text"></span>
-     </div>
-     <!-- TODO(csilv): Remove subpage-backdrop -->
-     <div id="subpage-backdrop" hidden></div>
-     <div id="mainview-content">
-       <div id="page-container">
-         <include src="search_page.html">
-         <include src="browser_options.html">
-       </div>
-       <!-- TODO(csilv): Remove subpage-sheet-container-1 -->
-       <div id="subpage-sheet-container-1"
-           class="subpage-sheet-container transparent" hidden>
-       </div>
-     </div>
+    <!-- TODO(csilv): Remove subpage-backdrop -->
+    <div id="subpage-backdrop" hidden></div>
+    <div id="mainview-content">
+      <div id="page-container">
+        <!-- Please keep the main pages in desired order of display.  This will
+             allow search results to display in the desired order. -->
+        <include src="search_page.html">
+        <include src="browser_options.html">
+      </div>
+      <!-- TODO(csilv): Remove subpage-sheet-container-1 -->
+      <div id="subpage-sheet-container-1"
+          class="subpage-sheet-container transparent" hidden>
+        <div id="subpage-sheet-1" class="subpage-sheet">
+          <div class="subpage-sheet-contents">
+            <include src="advanced_options.html">
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
+
+<div id="templates" hidden>
+  <div id="managed-prefs-banner" class="managed-prefs-banner">
+    <div class="managed-prefs-gradient">
+      <span id="managed-prefs-text" class="managed-prefs-text"></span>
+    </div>
+  </div>
+</div>
+
 <script src="chrome://settings-frame/strings.js"></script>
 <script src="chrome://resources/js/i18n_template.js"></script>
 <script src="chrome://resources/js/i18n_process.js"></script>

chrome/browser/resources/options2/options_page.css

@@ -42,24 +42,6 @@ html.hide-menu #mainview {
   min-width: 600px;
 }
 
-#page-container .page {
-  -webkit-transition-duration: 200ms;
-  -webkit-transition-property: margin-top;
-}
-
-#page-container .page.under-managed-prefs-banner {
-  margin-top: 31px;
-}
-
-#page-container header {
-  -webkit-transition-duration: 200ms;
-  -webkit-transition-property: top;
-}
-
-#page-container .page.under-managed-prefs-banner header {
-  top: 31px;
-}
-
 div.disabled {
   color: #888;
 }
@@ -177,43 +159,47 @@ html[touch-optimized] body {
 }
 
 .managed-prefs-banner {
-  -webkit-transition-duration: 200ms;
-  -webkit-transition-property: height;
-  background: -webkit-linear-gradient(rgb(255, 242, 183),
-                                      rgb(250, 230, 145) 97%,
-                                      rgb(135, 135, 135));
-  height: 31px;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  vertical-align: middle;
+  background-color: white;
   width: 100%;
   z-index: 2;
 }
 
-.managed-prefs-banner[hidden] {
-  height: 0;
+.page:not(.showing-banner) .managed-prefs-banner {
+  display: none;
 }
 
-.managed-prefs-banner.clickable:active {
-  background: -webkit-linear-gradient(rgb(135, 135, 135),
-                                      rgb(250, 230, 145) 3%,
-                                      rgb(255, 242, 183));
+.managed-prefs-gradient {
+  background: -webkit-linear-gradient(rgb(255, 242, 183),
+                                      rgb(250, 230, 145));
+  border: 1px solid rgb(201, 189, 141);
+  border-radius: 3px;
+  height: 25px;
+  margin: 9px 9px 0 9px;
 }
 
-.managed-prefs-icon {
+.main-page-banner .managed-prefs-gradient {
+  -webkit-margin-end: 100px;
+  -webkit-margin-start: 0;
+  margin-bottom: 9px;
+  margin-top: 0;
+}
+
+.managed-prefs-text {
   background-image: url('chrome://theme/IDR_WARNING');
-  background-position: center;
+  background-position: 3px center;
   background-repeat: no-repeat;
-  display: inline-block;
-  height: 21px;
-  padding: 5px;
-  vertical-align: middle;
-  width: 24px;
+  display: block;
+  line-height: 25px;
+  padding-left: 31px;
 }
 
-.managed-prefs-text {
-  vertical-align: middle;
+.managed-prefs-banner.clickable:active .managed-prefs-text {
+  background: -webkit-linear-gradient(rgb(250, 230, 145),
+                                      rgb(255, 242, 183));
+}
+
+#page-container .page.showing-banner {
+  margin-top: 36px;
 }
 
 .overlay .page h1 {

chrome/browser/resources/options2/options_page.js

@@ -905,6 +905,57 @@ cr.define('options', function() {
      */
     initializePage: function() {},
 
+    /**
+     * Updates managed banner visibility state. This function iterates over
+     * all input fields of a page and if any of these is marked as managed
+     * it triggers the managed banner to be visible. The banner can be enforced
+     * being on through the managed flag of this class but it can not be forced
+     * being off if managed items exist.
+     */
+    updateManagedBannerVisibility: function() {
+      var bannerDiv = this.pageDiv.querySelector('.managed-prefs-banner');
+      // Create a banner for the overlay if we don't have one.
+      if (!bannerDiv) {
+        bannerDiv = $('managed-prefs-banner').cloneNode(true);
+        bannerDiv.id = null;
+
+        if (this.isOverlay) {
+          var content = this.pageDiv.querySelector('.content-area');
+          this.pageDiv.insertBefore(bannerDiv, content);
+        } else {
+          bannerDiv.classList.add('main-page-banner');
+          var header = this.pageDiv.querySelector('header');
+          header.appendChild(bannerDiv);
+        }
+      }
+
+      var controlledByPolicy = false;
+      var controlledByExtension = false;
+      var inputElements = this.pageDiv.querySelectorAll('input[controlled-by]');
+      for (var i = 0; i < inputElements.length; i++) {
+        if (inputElements[i].controlledBy == 'policy')
+          controlledByPolicy = true;
+        else if (inputElements[i].controlledBy == 'extension')
+          controlledByExtension = true;
+      }
+
+      if (!controlledByPolicy && !controlledByExtension) {
+        this.pageDiv.classList.remove('showing-banner');
+      } else {
+        this.pageDiv.classList.add('showing-banner');
+
+        var text = bannerDiv.querySelector('.managed-prefs-text');
+        if (controlledByPolicy && !controlledByExtension) {
+          text.textContent = templateData.policyManagedPrefsBannerText;
+        } else if (!controlledByPolicy && controlledByExtension) {
+          text.textContent = templateData.extensionManagedPrefsBannerText;
+        } else if (controlledByPolicy && controlledByExtension) {
+          text.textContent =
+              templateData.policyAndExtensionManagedPrefsBannerText;
+        }
+      }
+    },
+
     /**
      * Gets page visibility state.
      */
@@ -923,6 +974,7 @@ cr.define('options', function() {
       this.setContainerVisibility_(visible);
 
       OptionsPage.updatePageFreezeStates();
+      OptionsPage.updateManagedBannerVisibility();
 
       // A subpage was shown or hidden.
       if (!this.isOverlay && this.nestingLevel > 0)

chrome/browser/resources/options2/pref_ui.js

@@ -57,7 +57,7 @@ cr.define('options', function() {
 
     el.controlledBy = event.value['controlledBy'];
 
-    BrowserOptions.updateManagedBannerVisibility();
+    OptionsPage.updateManagedBannerVisibility();
   }
 
   /////////////////////////////////////////////////////////////////////////////
@@ -622,7 +622,7 @@ cr.define('options', function() {
      * directly to save dialog preferences.
      */
     savePrefState: function() {
-      switch(this.dataType) {
+      switch (this.dataType) {
         case 'number':
           Preferences.setIntegerPref(this.pref, this.value, this.metric);
           break;

chrome/browser/resources/shared/css/chrome_shared2.css

@@ -131,13 +131,13 @@ html[touch-optimized] input[type='search']::-webkit-search-cancel-button {
 header > .search-field-container,
 header > button {
   position: absolute;
-  right: 0;
-  top: 18px;
+  right: 100px;
+  top: 21px;
 }
 
 html[dir='rtl'] header > .search-field-container,
 html[dir='rtl'] header > button {
-  left: 0;
+  left: 100px;
   right: auto;
 }
 

chrome/browser/resources/uber/uber_shared.css

@@ -24,36 +24,18 @@ body.uber-frame > .page {
 body.uber-frame header {
   background: white;
   left: 155px;
-  min-width: 600px;
+  min-width: 700px;
   /* <section>s in options currently amount to 638px total, broken up into
    * 600px max-width + 18px -webkit-padding-start + 20px -webkit-margin-end
    * so we mirror this value here so the headers match width and horizontal
    * alignment when scrolling sideways. */
-  max-width: 638px;
+  max-width: 738px;
   position: fixed;
   right: 155px;
   top: 0;
   z-index: 2;
 }
 
-/* This is to make it appear that <headers> cover options <section> text when
- * vertically scrolling. Without it, some text is visible beside a <header>. */
-html[dir="ltr"] body.uber-frame header:after,
-html[dir="rtl"] body.uber-frame header:before {
-  background: white;
-  content: " ";
-  display: block;
-  height: 100%;
-  position: absolute;
-  width: 100px;
-}
-
-body.uber-frame header,
-body.uber-frame header > * {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-}
-
 body.uber-frame header > h1 {
   border-bottom: 1px solid #eee;
   margin: 0;