Fix NTP footer flexbox to allow left/right to shrink.

BUG=189187


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

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

6 files changed, 23 insertions, 26 deletions

diff --git a/chrome/browser/policy/policy_browsertest.cc b/chrome/browser/policy/policy_browsertest.cc
index 608baa9..662e7e3 100644
--- a/chrome/browser/policy/policy_browsertest.cc
+++ b/chrome/browser/policy/policy_browsertest.cc
@@ -394,8 +394,7 @@ bool ContainsVisibleElement(content::WebContents* contents,
   EXPECT_TRUE(content::ExecuteScriptAndExtractBool(
       contents,
       "var elem = document.getElementById('" + id + "');"
-      "domAutomationController.send("
-      "    !!elem && !elem.classList.contains('invisible'));",
+      "domAutomationController.send(!!elem && !elem.hidden);",
       &result));
   return result;
 }
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index 87fa6b9..a6ba2e0 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -407,11 +407,6 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
   line-height: 49px;
 }
 
-#footer-menu-container .invisible {
-  -webkit-order: -1;
-  visibility: hidden;
-}
-
 #chrome-web-store-link:hover {
   color: #666;
 }
@@ -421,21 +416,19 @@ html[dir='rtl'] #chrome-web-store-title {
 }
 
 #vertical-separator {
-  -webkit-order: -1;
+  -webkit-order: 2;
   background-color: rgb(178, 178, 178);
-  display: inline-block;
+  display: none;
   height: 20px;
   margin: 0;
   vertical-align: middle;
-  visibility: hidden;
   width: 1px;
 }
 
 /* Show the separator only if one of the menus is visible. */
-.footer-menu-button:not(.invisible) ~ #chrome-web-store-link:not(.invisible)
-                                    ~ #vertical-separator {
-  -webkit-order: 2;
-  visibility: visible;
+.footer-menu-button:not([hidden]) ~ #chrome-web-store-link:not([hidden])
+                                  ~ #vertical-separator {
+  display: inline-block;
 }
 
 /* In trash mode, hide the menus and web store link. */
@@ -455,11 +448,11 @@ html[dir='rtl'] #chrome-web-store-title {
   margin: 0;
 }
 
-#recently-closed-menu-button:not(.invisible) {
+#recently-closed-menu-button {
   -webkit-order: 1;
 }
 
-#other-sessions-menu-button:not(.invisible) {
+#other-sessions-menu-button {
   -webkit-order: 0;
 }
 
diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html
index 99f8fa7..8e81efe 100644
--- a/chrome/browser/resources/ntp4/new_tab.html
+++ b/chrome/browser/resources/ntp4/new_tab.html
@@ -117,12 +117,12 @@
 
       <div id="footer-menu-container" class="menu-container">
         <button id="other-sessions-menu-button"
-            class="footer-menu-button custom-appearance invisible">
+            class="footer-menu-button custom-appearance" hidden>
           <span i18n-content="otherSessions"></span>
           <div class="disclosure-triangle"></div>
         </button>
         <button id="recently-closed-menu-button"
-            class="footer-menu-button custom-appearance invisible">
+            class="footer-menu-button custom-appearance" hidden>
           <span i18n-content="recentlyclosed"></span>
           <div class="disclosure-triangle"></div>
         </button>
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index a0da4fe..78c6321 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -193,7 +193,7 @@ cr.define('ntp', function() {
       var webStoreIcon = $('chrome-web-store-link');
       // Not all versions of the NTP have a footer, so this may not exist.
       if (webStoreIcon)
-        webStoreIcon.classList.add('invisible');
+        webStoreIcon.hidden = true;
     } else {
       var webStoreLink = loadTimeData.getString('webStoreLink');
       var url = appendParam(webStoreLink, 'utm_source', 'chrome-ntp-launcher');
@@ -373,9 +373,9 @@ cr.define('ntp', function() {
     var menu = $('footer-menu-container');
     var logo = $('logo-img');
     if (menu.clientWidth > logo.clientWidth)
-      logo.style.width = menu.clientWidth + 'px';
+      logo.style.WebkitFlex = '0 1 ' + menu.clientWidth + 'px';
     else
-      menu.style.width = logo.clientWidth + 'px';
+      menu.style.WebkitFlex = '0 1 ' + logo.clientWidth + 'px';
   }
 
   function themeChanged(opt_hasAttribution) {
@@ -530,6 +530,7 @@ cr.define('ntp', function() {
 
   function setRecentlyClosedTabs(dataItems) {
     $('recently-closed-menu-button').dataItems = dataItems;
+    layoutFooter();
   }
 
   function setMostVisitedPages(data, hasBlacklistedUrls) {
@@ -589,8 +590,10 @@ cr.define('ntp', function() {
     } else if (loginBubble) {
       loginBubble.reposition();
     }
-    if (otherSessionsButton)
+    if (otherSessionsButton) {
       otherSessionsButton.updateSignInState(isUserSignedIn);
+      layoutFooter();
+    }
   }
 
   /**
@@ -646,8 +649,10 @@ cr.define('ntp', function() {
   }
 
   function setForeignSessions(sessionList, isTabSyncEnabled) {
-    if (otherSessionsButton)
+    if (otherSessionsButton) {
       otherSessionsButton.setForeignSessions(sessionList, isTabSyncEnabled);
+      layoutFooter();
+    }
   }
 
   function getAppsCallback() {
diff --git a/chrome/browser/resources/ntp4/other_sessions.js b/chrome/browser/resources/ntp4/other_sessions.js
index e4399d8..ac36b04 100644
--- a/chrome/browser/resources/ntp4/other_sessions.js
+++ b/chrome/browser/resources/ntp4/other_sessions.js
@@ -247,7 +247,7 @@ cr.define('ntp', function() {
       }
 
       // The menu button is shown iff tab sync is enabled.
-      this.classList.toggle('invisible', !isTabSyncEnabled);
+      this.hidden = !isTabSyncEnabled;
     },
 
     /**
@@ -259,7 +259,7 @@ cr.define('ntp', function() {
       if (signedIn)
         chrome.send('getForeignSessions');
       else
-        this.classList.add('invisible');
+        this.hidden = true;
     },
   };
 
diff --git a/chrome/browser/resources/ntp4/recently_closed.js b/chrome/browser/resources/ntp4/recently_closed.js
index 0450b63..741ceaf 100644
--- a/chrome/browser/resources/ntp4/recently_closed.js
+++ b/chrome/browser/resources/ntp4/recently_closed.js
@@ -63,7 +63,7 @@ cr.define('ntp', function() {
     set dataItems(dataItems) {
       this.dataItems_ = dataItems;
       this.needsRebuild_ = true;
-      this.classList.toggle('invisible', !dataItems.length);
+      this.hidden = !dataItems.length;
     },
 
     /**