DOMUI: Make tab strips not jiggle as you select different tabs.

BUG=none
TEST=click different tabs in e.g. content settings, the ones to the right don't move around
Review URL: http://codereview.chromium.org/4628001

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

7 files changed, 149 insertions, 47 deletions

diff --git a/chrome/browser/resources/options/advanced_options.js b/chrome/browser/resources/options/advanced_options.js
index db7cf1d..785e5ba 100644
--- a/chrome/browser/resources/options/advanced_options.js
+++ b/chrome/browser/resources/options/advanced_options.js
@@ -28,7 +28,7 @@ var OptionsPage = options.OptionsPage;
       // Call base class implementation to starts preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
-      // Setup click handlers for buttons.
+      // Set up click handlers for buttons.
       $('privacyContentSettingsButton').onclick = function(event) {
         OptionsPage.showPageByName('content');
         OptionsPage.showTab($('cookies-nav-tab'));
diff --git a/chrome/browser/resources/options/certificate_manager.html b/chrome/browser/resources/options/certificate_manager.html
index 187c503c..973d685 100644
--- a/chrome/browser/resources/options/certificate_manager.html
+++ b/chrome/browser/resources/options/certificate_manager.html
@@ -7,14 +7,30 @@
 
   <!-- Navigation tabs -->
   <div class="subpages-nav-tabs">
-    <span i18n-content="personalCertsTabTitle" id="personal-certs-nav-tab"
-        class="inactive-tab" tab-contents="personalCertsTab"></span><span
-        i18n-content="serverCertsTabTitle" id="server-certs-nav-tab"
-        class="inactive-tab" tab-contents="serverCertsTab"></span><span
-        i18n-content="caCertsTabTitle" id="ca-certs-nav-tab"
-        class="inactive-tab" tab-contents="caCertsTab"></span><span
-        i18n-content="unknownCertsTabTitle" id="other-certs-nav-tab"
-        class="inactive-tab" tab-contents="otherCertsTab"></span>
+    <span id="personal-certs-nav-tab" class="inactive-tab"
+        tab-contents="personalCertsTab">
+      <span class="inactive-tab-label"
+          i18n-content="personalCertsTabTitle"></span>
+      <span class="active-tab-label"
+          i18n-content="personalCertsTabTitle"></span>
+    </span>
+    <span id="server-certs-nav-tab" class="inactive-tab"
+        tab-contents="serverCertsTab">
+      <span class="inactive-tab-label"
+          i18n-content="serverCertsTabTitle"></span>
+      <span class="active-tab-label" i18n-content="serverCertsTabTitle"></span>
+    </span>
+    <span id="ca-certs-nav-tab" class="inactive-tab"
+        tab-contents="caCertsTab">
+      <span class="inactive-tab-label" i18n-content="caCertsTabTitle"></span>
+      <span class="active-tab-label" i18n-content="caCertsTabTitle"></span>
+    </span>
+    <span id="other-certs-nav-tab" class="inactive-tab"
+        tab-contents="otherCertsTab">
+      <span class="inactive-tab-label"
+          i18n-content="unknownCertsTabTitle"></span>
+      <span class="active-tab-label" i18n-content="unknownCertsTabTitle"></span>
+    </span>
   </div>
 
   <!-- TODO(mattm): get rid of use of tables? -->
diff --git a/chrome/browser/resources/options/chromeos_internet_detail.html b/chrome/browser/resources/options/chromeos_internet_detail.html
index 98c4b46..f5fe513 100644
--- a/chrome/browser/resources/options/chromeos_internet_detail.html
+++ b/chrome/browser/resources/options/chromeos_internet_detail.html
@@ -2,16 +2,35 @@
   <h1 id="inetTitle"></h1>
   <!-- Navigation tabs -->
   <div class="subpages-nav-tabs" id="details-tab-strip">
-    <span i18n-content="wifiNetworkTabLabel" id="wifiNetworkNavTab"
-          class="inactive-tab wifi-details" tab-contents="wifiNetworkTab"></span><span
-          i18n-content="cellularPlanTabLabel" id="cellularPlanNavTab"
-          class="inactive-tab cellular-details" tab-contents="cellularPlanTab"></span><span
-          i18n-content="cellularConnTabLabel" id="cellularConnNavTab"
-          class="inactive-tab cellular-details" tab-contents="cellularConnTab"></span><span
-          i18n-content="cellularDeviceTabLabel" id="cellularDeviceNavTab"
-          class="inactive-tab cellular-details" tab-contents="cellularDeviceTab"></span><span
-          i18n-content="networkTabLabel" id="internetNavTab"
-          class="inactive-tab" tab-contents="internetTab"></span>
+    <span id="wifiNetworkNavTab" class="inactive-tab wifi-details"
+        tab-contents="wifiNetworkTab">
+      <span class="inactive-tab-label"
+          i18n-content="wifiNetworkTabLabel"></span>
+      <span class="active-tab-label" i18n-content="wifiNetworkTabLabel"></span>
+    </span>
+    <span id="cellularPlanNavTab" class="inactive-tab cellular-details"
+        tab-contents="cellularPlanTab">
+      <span class="inactive-tab-label"
+          i18n-content="cellularPlanTabLabel"></span>
+      <span class="active-tab-label" i18n-content="cellularPlanTabLabel"></span>
+    </span>
+    <span id="cellularConnNavTab" class="inactive-tab cellular-details"
+        tab-contents="cellularConnTab">
+      <span class="inactive-tab-label"
+          i18n-content="cellularConnTabLabel"></span>
+      <span class="active-tab-label" i18n-content="cellularConnTabLabel"></span>
+    </span>
+    <span id="cellularDeviceNavTab" class="inactive-tab cellular-details"
+        tab-contents="cellularDeviceTab">
+      <span class="inactive-tab-label"
+          i18n-content="cellularDeviceTabLabel"></span>
+      <span class="active-tab-label"
+          i18n-content="cellularDeviceTabLabel"></span>
+    </span>
+    <span id="internetNavTab" class="inactive-tab" tab-contents="internetTab">
+      <span class="inactive-tab-label" i18n-content="networkTabLabel"></span>
+      <span class="active-tab-label" i18n-content="networkTabLabel"></span>
+    </span>
   </div>
   <div id="wifiNetworkTab" class="subpages-tab-contents wifi-details">
     <section>
diff --git a/chrome/browser/resources/options/content_settings.html b/chrome/browser/resources/options/content_settings.html
index 12640da..49e4317 100644
--- a/chrome/browser/resources/options/content_settings.html
+++ b/chrome/browser/resources/options/content_settings.html
@@ -7,20 +7,44 @@
 
   <!-- Navigation tabs -->
   <div class="subpages-nav-tabs">
-    <span i18n-content="cookies_tab_label" id="cookies-nav-tab"
-          class="inactive-tab" tab-contents="cookiesFilterTab"></span><span
-          i18n-content="images_tab_label" id="images-nav-tab"
-          class="inactive-tab" tab-contents="imagesFilterTab"></span><span
-          i18n-content="javascript_tab_label" id="javascript-nav-tab"
-          class="inactive-tab" tab-contents="javascriptFilterTab"></span><span
-          i18n-content="plugins_tab_label" id="plugins-nav-tab"
-          class="inactive-tab" tab-contents="pluginsFilterTab"></span><span
-          i18n-content="popups_tab_label" id="popups-nav-tab"
-          class="inactive-tab" tab-contents="popupsFilterTab"></span><span
-          i18n-content="location_tab_label" id="location-nav-tab"
-          class="inactive-tab" tab-contents="locationFilterTab"></span><span
-          i18n-content="notifications_tab_label" id="notifications-nav-tab"
-          class="inactive-tab" tab-contents="notificationsFilterTab"></span>
+    <span id="cookies-nav-tab" class="inactive-tab"
+        tab-contents="cookiesFilterTab">
+      <span class="inactive-tab-label" i18n-content="cookies_tab_label"></span>
+      <span class="active-tab-label" i18n-content="cookies_tab_label"></span>
+    </span>
+    <span id="images-nav-tab" class="inactive-tab"
+        tab-contents="imagesFilterTab">
+      <span class="inactive-tab-label" i18n-content="images_tab_label"></span>
+      <span class="active-tab-label" i18n-content="images_tab_label"></span>
+    </span>
+    <span id="javascript-nav-tab" class="inactive-tab"
+        tab-contents="javascriptFilterTab">
+      <span class="inactive-tab-label"
+          i18n-content="javascript_tab_label"></span>
+      <span class="active-tab-label" i18n-content="javascript_tab_label"></span>
+    </span>
+    <span id="plugins-nav-tab" class="inactive-tab"
+        tab-contents="pluginsFilterTab">
+      <span class="inactive-tab-label" i18n-content="plugins_tab_label"></span>
+      <span class="active-tab-label" i18n-content="plugins_tab_label"></span>
+    </span>
+    <span id="popups-nav-tab" class="inactive-tab"
+        tab-contents="popupsFilterTab">
+      <span class="inactive-tab-label" i18n-content="popups_tab_label"></span>
+      <span class="active-tab-label" i18n-content="popups_tab_label"></span>
+    </span>
+    <span id="location-nav-tab" class="inactive-tab"
+        tab-contents="locationFilterTab">
+      <span class="inactive-tab-label" i18n-content="location_tab_label"></span>
+      <span class="active-tab-label" i18n-content="location_tab_label"></span>
+    </span>
+    <span id="notifications-nav-tab" class="inactive-tab"
+        tab-contents="notificationsFilterTab">
+      <span class="inactive-tab-label"
+          i18n-content="notifications_tab_label"></span>
+      <span class="active-tab-label"
+          i18n-content="notifications_tab_label"></span>
+    </span>
   </div>
 
   <!-- Cookie filter tab contents -->
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 4059117..ba830d0 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -94,7 +94,13 @@ cr.define('options', function() {
   * @param {!Element} tab The tab that the user clicked.
   */
   OptionsPage.showTab = function(tab) {
-    if (!tab.classList.contains('inactive-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) {
diff --git a/chrome/browser/resources/options/passwords_exceptions.html b/chrome/browser/resources/options/passwords_exceptions.html
index f45c263..5a62111 100644
--- a/chrome/browser/resources/options/passwords_exceptions.html
+++ b/chrome/browser/resources/options/passwords_exceptions.html
@@ -7,11 +7,18 @@
 
   <!-- Navigation tabs -->
   <div class="subpages-nav-tabs">
-    <span i18n-content="passwordsTabTitle" id="passwords-nav-tab"
-        class="inactive-tab" tab-contents="passwordsTab"></span>
-    <span i18n-content="passwordExceptionsTabTitle"
-        id="password-exceptions-nav-tab"
-        class="inactive-tab" tab-contents="passwordExceptionsTab"></span>
+    <span id="passwords-nav-tab" class="inactive-tab"
+        tab-contents="passwordsTab">
+      <span class="inactive-tab-label" i18n-content="passwordsTabTitle"></span>
+      <span class="active-tab-label" i18n-content="passwordsTabTitle"></span>
+    </span>
+    <span id="password-exceptions-nav-tab" class="inactive-tab"
+        tab-contents="passwordExceptionsTab">
+      <span class="inactive-tab-label"
+          i18n-content="passwordExceptionsTabTitle"></span>
+      <span class="active-tab-label"
+          i18n-content="passwordExceptionsTabTitle"></span>
+    </span>
   </div>
 
   <!-- Passwords tab contents -->
diff --git a/chrome/browser/resources/options/subpages_tab_controls.css b/chrome/browser/resources/options/subpages_tab_controls.css
index 273078a..24e6a66 100644
--- a/chrome/browser/resources/options/subpages_tab_controls.css
+++ b/chrome/browser/resources/options/subpages_tab_controls.css
@@ -5,27 +5,57 @@ found in the LICENSE file.
 */
 
 .subpages-nav-tabs .inactive-tab {
-  background: -webkit-gradient(linear,
-                               left top,
-                               left bottom,
-                               from(white),
-                               to(#f3f3f3));
+  position: relative;
   padding: 4px 8px;
 }
 
 .subpages-nav-tabs .active-tab {
+  position: relative;
   background: white;
-  border: 1px solid #a0a0a0;
+  border: 1px solid #A0A0A0;  /* light gray */
   border-bottom: 1px solid white;
   -webkit-border-top-left-radius: 3px;
   -webkit-border-top-right-radius: 3px;
+}
+
+/* To avoid tabs changing size when they are clicked and their labels become
+ * bold, we actually put two labels inside each tab: an inactive label and an
+ * active label. Only one is visible at a time, but the bold label is used to
+ * size the tab even when it's not visible. This keeps the tab size constant. */
+.subpages-nav-tabs .active-tab-label {
   font-weight: bold;
 }
 
+.subpages-nav-tabs .inactive-tab-label {
+  position: absolute;
+  top: 5px;
+  left: 9px;
+}
+
+html[dir=rtl] .subpages-nav-tabs .inactive-tab-label {
+  right: 9px;
+}
+
+.subpages-nav-tabs .active-tab-label,
+.subpages-nav-tabs .active-tab .inactive-tab-label {
+  visibility: hidden;
+}
+
+/* .inactive-tab is not removed when .active-tab is added, so we must
+ * override the hidden visibility above in the active tab case. */
+/* BUG(62409): rename .inactive-tab to help avoid this confusion */
+.subpages-nav-tabs .active-tab .active-tab-label {
+  visibility: visible;
+}
+
 .subpages-nav-tabs {
   padding: 4px;
-  border-bottom: 1px solid #A0A0A0;
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#F3F3F3));
+  border-bottom: 1px solid #A0A0A0;  /* light gray */
+  background: -webkit-gradient(linear,
+                               left top,
+                               left bottom,
+                               from(white),
+                               to(#F3F3F3));  /* very light gray */
   margin-bottom: 15px;
 }