Layout the NTP footer with flexboxes.

chrome/browser/resources/ntp4/recently_closed.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview The recently closed menu: button, model data, and menu.
  */
 
 cr.define('ntp', function() {
   'use strict';
@@ skipping 18 matching lines @@
     __proto__: MenuButton.prototype,
 
     decorate: function() {
       MenuButton.prototype.decorate.call(this);
       this.menu = new Menu;
       cr.ui.decorate(this.menu, Menu);
       this.menu.classList.add('footer-menu');
       document.body.appendChild(this.menu);
 
       this.needsRebuild_ = true;
-      this.hidden = true;
       this.anchorType = cr.ui.AnchorType.ABOVE;
       this.invertLeftRight = true;
     },
 
     /**
      * Shows the menu, first rebuilding it if necessary.
      * TODO(estade): the right of the menu should align with the right of the
      * button.
      * @override
      */
     showMenu: function(shouldSetFocus) {
       if (this.needsRebuild_) {
         this.menu.textContent = '';
         this.dataItems_.forEach(this.addItem_, this);
         this.needsRebuild_ = false;
       }
 
       MenuButton.prototype.showMenu.apply(this, arguments);
     },
 
     /**
      * Sets the menu model data.
      * @param {Array} dataItems Array of objects that describe the apps.
      */
     set dataItems(dataItems) {
       this.dataItems_ = dataItems;
       this.needsRebuild_ = true;
-      this.hidden = !dataItems.length;
+      this.classList.toggle('invisible', !dataItems.length);
     },
 
     /**
      * Adds an app to the menu.
      * @param {Object} data An object encapsulating all data about the app.
      * @private
      */
     addItem_: function(data) {
       var isWindow = data.type == 'window';
       var a = this.ownerDocument.createElement('a');
@@ skipping 33 matching lines @@
 
       this.menu.appendChild(a);
       cr.ui.decorate(a, MenuItem);
     },
   };
 
   return {
     RecentMenuButton: RecentMenuButton,
   };
 });