ntp4 - Recently closed menu

this basically matches the old ntp's minimized recently-closed menu

BUG=none
TEST=manual

Review URL: http://codereview.chromium.org/6693106

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

14 files changed, 194 insertions, 136 deletions

diff --git a/chrome/browser/resources/bookmark_manager/main.html b/chrome/browser/resources/bookmark_manager/main.html
index 06d9667..556b7c7 100644
--- a/chrome/browser/resources/bookmark_manager/main.html
+++ b/chrome/browser/resources/bookmark_manager/main.html
@@ -19,6 +19,7 @@ found in the LICENSE file.
 
 <script src="chrome://resources/css/tree.css.js"></script>
 <script src="css/bmm.css.js"></script>
+<script src="chrome://resources/js/event_tracker.js"></script>
 
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/event_target.js"></script>
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 57aeac1..59c1bca 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -279,6 +279,7 @@ i18nTemplate.process(document, templateData);
 <script src="shared/js/parse_html_subset.js"></script>
 
 <script src="shared/js/cr.js"></script>
+<script src="shared/js/event_tracker.js"></script>
 <script src="shared/js/cr/ui.js"></script>
 <script src="shared/js/cr/ui/command.js"></script>
 <script src="shared/js/cr/ui/menu_item.js"></script>
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index c2911ac..ded8302 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -13,8 +13,6 @@ html {
 
 body {
   background-size: auto 100%;
-  font-family: segoe ui, arial, helvetica, sans-serif;
-  font-size: 14px;
   margin: 0;
   /* Don't highlight links when they're tapped.  Safari has bugs here that
      show up as flicker when dragging in some situations */
@@ -23,6 +21,12 @@ body {
   -webkit-user-select: none;
 }
 
+body,
+button span {
+  font-family: segoe ui, arial, helvetica, sans-serif;
+  font-size: 14px;
+}
+
 /* The frame is what the slider fits into
  */
 #apps-frame {
@@ -144,7 +148,7 @@ body {
 }
 
 /* TODO(estade): theme this color. */
-#footer-content > span {
+#footer-content span {
   color: #888;
 }
 
@@ -223,8 +227,3 @@ body {
 #footer.rearrange-mode #trash {
   -webkit-transform: translate(0, 0);
 }
-
-/* Ensure template items are never drawn when the page initially loads */
-#app-template {
-  display: none;
-}
diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html
index cb68e90..52578f5 100644
--- a/chrome/browser/resources/ntp4/new_tab.html
+++ b/chrome/browser/resources/ntp4/new_tab.html
@@ -12,16 +12,26 @@
 <meta name="viewport"
       content="user-scalable=no, width=device-width, maximum-scale=1.0">
 
+<link rel="stylesheet" href="../shared/css/menu.css">
 <link rel="stylesheet" href="new_tab.css">
+<link rel="stylesheet" href="recently_closed.css">
 <link id="themecss" rel="stylesheet">
 
-<script src="../shared/js/cr.js"></script>
+<script src="../shared/js/event_tracker.js"></script>
 <script src="../shared/js/util.js"></script>
+
+<script src="../shared/js/cr.js"></script>
+<script src="../shared/js/cr/ui.js"></script>
+<script src="../shared/js/cr/ui/menu.js"></script>
+<script src="../shared/js/cr/ui/menu_item.js"></script>
+<script src="../shared/js/cr/ui/position_util.js"></script>
+<script src="../shared/js/cr/ui/menu_button.js"></script>
+
 <script src="apps_page.js"></script>
 <script src="card_slider.js"></script>
-<script src="event_tracker.js"></script>
 <script src="grabber.js"></script>
 <script src="new_tab.js"></script>
+<script src="recently_closed.js"></script>
 <script src="touch_handler.js"></script>
 </head>
 
@@ -44,7 +54,10 @@
         <li class="dot" tabindex="0" role="button"></li>
       </ul>
 
-      <span i18n-content="recentlyclosed"></span>
+      <button id="recently-closed-menu-button">
+        <span i18n-content="recentlyclosed"></span>
+        <img src="../ntp/ntp_disclosure_triangle.png">
+      </button>
       <div id="footer-divider-2" class="footer-divider"></div>
       <!-- TODO(estade): replace this with actual user login. -->
       <span id="user-login">example at gmail.com</span>
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 9b7a665..30ff6c4 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /**
- * @fileoverview Touch-based new tab page
+ * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
@@ -162,6 +162,9 @@ var ntp = (function() {
       trash.classList.remove('hover');
     });
     trash.addEventListener(Grabber.EventType.DROP, appTrash);
+
+    cr.ui.decorate($('recently-closed-menu-button'), ntp4.RecentMenuButton);
+    chrome.send('getRecentlyClosedTabs');
   }
 
   /**
@@ -674,17 +677,23 @@ var ntp = (function() {
   }
 
   // TODO(estade): remove |hasAttribution|.
+  // TODO(estade): rename newtab.css to new_tab_theme.css
   function themeChanged(hasAttribution) {
     $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now();
   }
 
+  function setRecentlyClosedTabs(dataItems) {
+    $('recently-closed-menu-button').dataItems = dataItems;
+  }
+
   // Return an object with all the exports
   return {
     assert: assert,
     appsPrefChangeCallback: appsPrefChangeCallback,
     getAppsCallback: getAppsCallback,
     initialize: initialize,
-    themeChanged: themeChanged
+    themeChanged: themeChanged,
+    setRecentlyClosedTabs: setRecentlyClosedTabs,
   };
 })();
 
@@ -695,5 +704,6 @@ var assert = ntp.assert;
 var getAppsCallback = ntp.getAppsCallback;
 var appsPrefChangeCallback = ntp.appsPrefChangeCallback;
 var themeChanged = ntp.themeChanged;
+var recentlyClosedTabs = ntp.setRecentlyClosedTabs;
 
 document.addEventListener('DOMContentLoaded', ntp.initialize);
diff --git a/chrome/browser/resources/ntp4/recently_closed.css b/chrome/browser/resources/ntp4/recently_closed.css
new file mode 100644
index 0000000..d7a63a5
--- /dev/null
+++ b/chrome/browser/resources/ntp4/recently_closed.css
@@ -0,0 +1,37 @@
+/* Copyright (c) 2011 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.
+ */
+
+#recently-closed-menu-button {
+  background: none;
+  border: 0;
+  -webkit-appearance: none;
+}
+
+#recently-closed-menu-button img {
+  -webkit-transform: rotate(270deg);
+}
+
+.recent-menu-item {
+  background: no-repeat 0% 50%;
+  background-size: 16px 16px;
+  box-sizing: border-box;
+  display: block;
+  font-size: 100%;
+  line-height: 20px;
+  margin: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-margin-start: 18px;
+}
+
+.recent-window {
+  background-image: url('../ntp/closed_window.png');
+}
+
+.recent-menu-item:visited,
+.recent-menu-item:link {
+  color: hsl(213, 90%, 24%);
+}
diff --git a/chrome/browser/resources/ntp4/recently_closed.js b/chrome/browser/resources/ntp4/recently_closed.js
new file mode 100644
index 0000000..5e54899
--- /dev/null
+++ b/chrome/browser/resources/ntp4/recently_closed.js
@@ -0,0 +1,91 @@
+// Copyright (c) 2011 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('ntp4', function() {
+  'use strict';
+
+  var Menu = cr.ui.Menu;
+  var MenuItem = cr.ui.MenuItem;
+  var MenuButton = cr.ui.MenuButton;
+  var RecentMenuButton = cr.ui.define('button');
+
+  RecentMenuButton.prototype = {
+    __proto__: MenuButton.prototype,
+
+    decorate: function() {
+      MenuButton.prototype.decorate.call(this);
+      this.menu = new Menu;
+      cr.ui.decorate(this.menu, Menu);
+      document.body.appendChild(this.menu);
+
+      this.needsRebuild_ = true;
+      this.hidden = 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() {
+      if (this.needsRebuild_) {
+        this.menu.textContent = '';
+        this.dataItems_.forEach(this.addItem_, this);
+        this.needsRebuild_ = false;
+      }
+
+      MenuButton.prototype.showMenu.call(this);
+    },
+
+    /**
+     * 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 == 0;
+    },
+
+    /**
+     * 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');
+      a.className = 'recent-menu-item';
+      if (isWindow) {
+        a.href = '';
+        a.classList.add('recent-window');
+        a.textContent = formatTabsText(data.tabs.length);
+      } else {
+        a.href = data.url;
+        a.style.backgroundImage = 'url(chrome://favicon/' + data.url + ')';
+        a.textContent = data.title;
+        // TODO(estade): add app ping url.
+      }
+
+      function onActivate(e) {
+        // TODO(estade): don't convert to string.
+        chrome.send('reopenTab', [String(data.sessionId)]);
+        e.preventDefault();
+      }
+      a.addEventListener('activate', onActivate);
+
+      this.menu.appendChild(a);
+      cr.ui.decorate(a, MenuItem);
+    },
+  };
+
+  return {
+    RecentMenuButton: RecentMenuButton,
+  };
+});
diff --git a/chrome/browser/resources/ntp4/tools/check.sh b/chrome/browser/resources/ntp4/tools/check.sh
index a062431..8f4ab7d 100755
--- a/chrome/browser/resources/ntp4/tools/check.sh
+++ b/chrome/browser/resources/ntp4/tools/check.sh
@@ -10,7 +10,7 @@
 # See http://code.google.com/closure/compiler/ and
 # http://code.google.com/closure/utilities/ for details on these tools.
 
-SOURCES="event_tracker.js touch_handler.js card_slider.js new_tab.js grabber.js apps_page.js"
+SOURCES="event_tracker.js touch_handler.js card_slider.js new_tab.js grabber.js apps_page.js recently_closed.js"
 
 # First run the closure compiler looking for syntactic issues.
 # Note that we throw away the output from jscompiler since it's use
diff --git a/chrome/browser/resources/shared/js/cr/ui/menu_button.js b/chrome/browser/resources/shared/js/cr/ui/menu_button.js
index def7309..bb21d56 100644
--- a/chrome/browser/resources/shared/js/cr/ui/menu_button.js
+++ b/chrome/browser/resources/shared/js/cr/ui/menu_button.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Copyright (c) 2011 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.
 
@@ -27,6 +27,10 @@ cr.define('cr.ui', function() {
       var menu;
       if ((menu = this.getAttribute('menu')))
         this.menu = menu;
+
+      // An event tracker for events we only connect to while the menu is
+      // displayed.
+      this.showingEvents_ = new EventTracker();
     },
 
     /**
@@ -97,33 +101,34 @@ cr.define('cr.ui', function() {
      * Shows the menu.
      */
     showMenu: function() {
+      this.hideMenu();
+
       this.menu.style.display = 'block';
       this.setAttribute('menu-shown', '');
 
       // when the menu is shown we steal all keyboard events.
       var doc = this.ownerDocument;
       var win = doc.defaultView;
-      doc.addEventListener('keydown', this, true);
-      doc.addEventListener('mousedown', this, true);
-      doc.addEventListener('blur', this, true);
-      win.addEventListener('resize', this);
-      this.menu.addEventListener('activate', this);
+      this.showingEvents_.add(doc, 'keydown', this, true);
+      this.showingEvents_.add(doc, 'mousedown', this, true);
+      this.showingEvents_.add(doc, 'blur', this, true);
+      this.showingEvents_.add(win, 'resize', this);
+      this.showingEvents_.add(this.menu, 'activate', this);
       this.positionMenu_();
     },
 
     /**
-     * Hides the menu.
+     * Hides the menu. If your menu can go out of scope, make sure to call this
+     * first.
      */
     hideMenu: function() {
+      if (!this.isMenuShown())
+        return;
+
       this.removeAttribute('menu-shown');
       this.menu.style.display = 'none';
-      var doc = this.ownerDocument;
-      var win = doc.defaultView;
-      doc.removeEventListener('keydown', this, true);
-      doc.removeEventListener('mousedown', this, true);
-      doc.removeEventListener('blur', this, true);
-      win.removeEventListener('resize', this);
-      this.menu.removeEventListener('activate', this);
+
+      this.showingEvents_.removeAll();
       this.menu.selectedIndex = -1;
     },
 
@@ -131,7 +136,7 @@ cr.define('cr.ui', function() {
      * Whether the menu is shown.
      */
     isMenuShown: function() {
-      return window.getComputedStyle(this.menu).display != 'none';
+      return this.hasAttribute('menu-shown');
     },
 
     /**
diff --git a/chrome/browser/resources/ntp4/event_tracker.js b/chrome/browser/resources/shared/js/event_tracker.js
index bb76f5e..b4fb294 100644
--- a/chrome/browser/resources/ntp4/event_tracker.js
+++ b/chrome/browser/resources/shared/js/event_tracker.js
@@ -3,13 +3,11 @@
 // found in the LICENSE file.
 
 /** @fileoverview EventTracker is a simple class that manages the addition and
- *  removal of DOM event listeners.  In particular, it keeps track of all
+ *  removal of DOM event listeners. In particular, it keeps track of all
  *  listeners that have been added and makes it easy to remove some or all of
- *  them without requiring all the information again.  This is particularly
+ *  them without requiring all the information again. This is particularly
  *  handy when the listener is a generated function such as a lambda or the
- *  result of calling Function.bind.  The goal of this class is to make it
- *  easier to avoid memory leaks caused by DOM<->JS cycles - removing event
- *  listeners breakes the DOM->JS part of the cycle.
+ *  result of calling Function.bind.
  */
 
 // Use an anonymous function to enable strict mode just for this file (which
diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd
index 6ebd623..20a8195 100644
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -98,6 +98,8 @@ without changes to the corresponding grd file. paaaae -->
                file="shared/js/cr/ui/tabs.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_CR_UI_TREE"
                file="shared/js/cr/ui/tree.js" type="BINDATA" />
+      <include name="IDR_SHARED_JS_EVENT_TRACKER"
+               file="shared/js/event_tracker.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_I18N_TEMPLATE"
                file="shared/js/i18n_template.js" type="BINDATA" />
       <include name="IDR_SHARED_JS_LOCAL_STRINGS"
diff --git a/chrome/browser/resources/touch_ntp/eventtracker.js b/chrome/browser/resources/touch_ntp/eventtracker.js
deleted file mode 100644
index bb76f5e..0000000
--- a/chrome/browser/resources/touch_ntp/eventtracker.js
+++ /dev/null
@@ -1,99 +0,0 @@
-// Copyright (c) 2011 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 EventTracker is a simple class that manages the addition and
- *  removal of DOM event listeners.  In particular, it keeps track of all
- *  listeners that have been added and makes it easy to remove some or all of
- *  them without requiring all the information again.  This is particularly
- *  handy when the listener is a generated function such as a lambda or the
- *  result of calling Function.bind.  The goal of this class is to make it
- *  easier to avoid memory leaks caused by DOM<->JS cycles - removing event
- *  listeners breakes the DOM->JS part of the cycle.
- */
-
-// Use an anonymous function to enable strict mode just for this file (which
-// will be concatenated with other files when embedded in Chrome)
-var EventTracker = (function() {
-  'use strict';
-
-  /**
-   *  Create an EventTracker to track a set of events.
-   *  EventTracker instances are typically tied 1:1 with other objects or
-   *  DOM elements whose listeners should be removed when the object is disposed
-   *  or the corresponding elements are removed from the DOM.
-   *  @constructor
-   */
-  function EventTracker() {
-    /**
-     *  @type {Array.<EventTracker.Entry>}
-     *  @private
-     */
-    this.listeners_ = [];
-  }
-
-  /**
-   * The type of the internal tracking entry.
-   *  @typedef {{node: !Node,
-   *            eventType: string,
-   *            listener: Function,
-   *            capture: boolean}}
-   */
-  EventTracker.Entry;
-
-  EventTracker.prototype = {
-    /**
-     * Add an event listener - replacement for Node.addEventListener.
-     * @param {!Node} node The DOM node to add a listener to.
-     * @param {string} eventType The type of event to subscribe to.
-     * @param {Function} listener The listener to add.
-     * @param {boolean} capture Whether to invoke during the capture phase.
-     */
-    add: function(node, eventType, listener, capture) {
-      var h = {
-        node: node,
-        eventType: eventType,
-        listener: listener,
-        capture: capture
-      };
-      this.listeners_.push(h);
-      node.addEventListener(eventType, listener, capture);
-    },
-
-    /**
-     * Remove any specified event listeners added with this EventTracker.
-     * @param {!Node} node The DOM node to remove a listener from.
-     * @param {string} eventType The type of event to remove.
-     */
-    remove: function(node, eventType) {
-      this.listeners_ = this.listeners_.filter(function(h) {
-        if (h.node == node && h.eventType == eventType) {
-          EventTracker.removeEventListener_(h);
-          return false;
-        }
-        return true;
-      });
-    },
-
-    /**
-     * Remove all event listeners added with this EventTracker.
-     */
-    removeAll: function() {
-      this.listeners_.forEach(EventTracker.removeEventListener_);
-      this.listeners_ = [];
-    }
-  };
-
-  /**
-   * Remove a single event listener given it's tracker entry.  It's up to the
-   * caller to ensure the entry is removed from listeners_.
-   * @param {EventTracker.Entry} h The entry describing the listener to remove.
-   * @private
-   */
-  EventTracker.removeEventListener_ = function(h) {
-    h.node.removeEventListener(h.eventType, h.listener, h.capture);
-  };
-
-  return EventTracker;
-})();
-
diff --git a/chrome/browser/resources/touch_ntp/newtab.html b/chrome/browser/resources/touch_ntp/newtab.html
index e8b659c..9d4eb80 100644
--- a/chrome/browser/resources/touch_ntp/newtab.html
+++ b/chrome/browser/resources/touch_ntp/newtab.html
@@ -52,10 +52,10 @@
   </script>
 
   <script src="../shared/js/util.js"></script>
-  <script src="eventtracker.js"></script>
+  <script src="../shared/js/event_tracker.js"></script>
   <script src="touchhandler.js"></script>
   <script src="slider.js"></script>
   <script src="grabber.js"></script>
   <script src="newtab.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/chrome/browser/resources/touch_ntp/tools/check.sh b/chrome/browser/resources/touch_ntp/tools/check.sh
index e11bba8..9d1e2a1 100755
--- a/chrome/browser/resources/touch_ntp/tools/check.sh
+++ b/chrome/browser/resources/touch_ntp/tools/check.sh
@@ -10,7 +10,7 @@
 # See http://code.google.com/closure/compiler/ and
 # http://code.google.com/closure/utilities/ for details on these tools.
 
-SOURCES="eventtracker.js touchhandler.js slider.js newtab.js grabber.js "
+SOURCES="touchhandler.js slider.js newtab.js grabber.js "
 SOURCES+="standalone/standalone_hack.js"
 
 # First run the closure compiler looking for syntactic issues.