[Aura] Initial app list webui.

chrome/browser/resources/ntp4/new_tab.js

 // 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 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.
  */
 
@@ skipping 128 matching lines @@
   /**
    * The time in milliseconds for most transitions.  This should match what's
    * in new_tab.css.  Unfortunately there's no better way to try to time
    * something to occur until after a transition has completed.
    * @type {number}
    * @const
    */
   var DEFAULT_TRANSITION_TIME = 500;
 
   /**
-   * Invoked at startup once the DOM is available to initialize the app.
+   * Sets up the app using given config.
+   * @param {Object} config Config object.
    */
-  function initialize() {
+  function setup(config) {
     cr.enablePlatformSpecificCSSRules();
 
     // Load the current theme colors.
     themeChanged();
 
     dotList = getRequiredElement('dot-list');
     dotList.addEventListener('keydown', onDotListKeyDown);
     navDots = dotList.getElementsByClassName('dot');
 
     pageList = getRequiredElement('page-list');
     trash = getRequiredElement('trash');
     new ntp4.Trash(trash);
 
-    shownPage = templateData['shown_page_type'];
-    shownPageIndex = templateData['shown_page_index'];
+    shownPage = config.shownPage;
+    shownPageIndex = config.shownPageIndex;
 
     // Request data on the apps so we can fill them in.
     // Note that this is kicked off asynchronously.  'getAppsCallback' will be
     // invoked at some point after this function returns.
     chrome.send('getApps');
 
     document.addEventListener('keydown', onKeyDown);
     // Prevent touch events from triggering any sort of native scrolling
     document.addEventListener('touchmove', function(e) {
       e.preventDefault();
     }, true);
 
     tilePages = pageList.getElementsByClassName('tile-page');
     appsPages = pageList.getElementsByClassName('apps-page');
 
-    pageSwitcherStart = getRequiredElement('page-switcher-start');
-    ntp4.initializePageSwitcher(pageSwitcherStart);
-    pageSwitcherEnd = getRequiredElement('page-switcher-end');
-    ntp4.initializePageSwitcher(pageSwitcherEnd);
+    if (config.supportsPageSwitchers) {

[Evan Stade, 2011/11/03 16:42:14]

this seems like a heck of a lot of if configs, especially since for the NTP
config.supportsFoo is always true, and for the aura homepage it's always false.

I would say you probably want the shared code in one class and then have the NTP
extend that class. That will also solve the problem that you're using a file
called ntp.js for something that's not an NTP.

This file is mostly organized as a collection of static functions and you'd have
to reorganize the shared functionality into a class (like tile_page.js) but
despite that it's a bit of legwork it shouldn't be too hard.

+      pageSwitcherStart = getRequiredElement('page-switcher-start');
+      ntp4.initializePageSwitcher(pageSwitcherStart);
+      pageSwitcherEnd = getRequiredElement('page-switcher-end');
+      ntp4.initializePageSwitcher(pageSwitcherEnd);
+    }
 
-    notificationContainer = getRequiredElement('notification-container');
-    notificationContainer.addEventListener(
-        'webkitTransitionEnd', onNotificationTransitionEnd);
+    if (config.supportsNotification) {
+      notificationContainer = getRequiredElement('notification-container');
+      notificationContainer.addEventListener(
+          'webkitTransitionEnd', onNotificationTransitionEnd);
+    }
 
     // Initialize the cardSlider without any cards at the moment
     var sliderFrame = getRequiredElement('card-slider-frame');
     cardSlider = new CardSlider(sliderFrame, pageList, sliderFrame.offsetWidth);
     cardSlider.initialize();
 
     // Ensure the slider is resized appropriately with the window
     window.addEventListener('resize', function() {
       cardSlider.resize(sliderFrame.offsetWidth);
       updatePageSwitchers();
     });
 
     // Handle the page being changed
     pageList.addEventListener(
         CardSlider.EventType.CARD_CHANGED,
         cardChangedHandler);
 
-    cr.ui.decorate($('recently-closed-menu-button'), ntp4.RecentMenuButton);
-    chrome.send('getRecentlyClosedTabs');
+    if (config.supportsRecentlyClosed) {
+      cr.ui.decorate($('recently-closed-menu-button'), ntp4.RecentMenuButton);
+      chrome.send('getRecentlyClosedTabs');
+    }
 
-    mostVisitedPage = new ntp4.MostVisitedPage();
-    appendTilePage(mostVisitedPage, localStrings.getString('mostvisited'),
-                   false);
-    chrome.send('getMostVisited');
+    if (config.supportsMostVisited) {
+      mostVisitedPage = new ntp4.MostVisitedPage();
+      appendTilePage(mostVisitedPage, localStrings.getString('mostvisited'),
+                     false);
+      chrome.send('getMostVisited');
+    }
 
     if (localStrings.getString('login_status_message')) {

[Evan Stade, 2011/11/03 16:42:14]

seems this should also be toggled by supportsSyncLogin

       loginBubble = new cr.ui.Bubble;
       loginBubble.anchorNode = $('login-container');
       loginBubble.setArrowLocation(cr.ui.ArrowLocation.TOP_END);
       loginBubble.bubbleAlignment =
           cr.ui.BubbleAlignment.BUBBLE_EDGE_TO_ANCHOR_EDGE;
       loginBubble.deactivateToDismissDelay = 2000;
       loginBubble.setCloseButtonVisible(false);
 
       var bubbleContent = $('login-status-bubble-contents');
       loginBubble.content = bubbleContent;
@@ skipping 27 matching lines @@
       infoBubble.content = bubbleContent;
       bubbleContent.hidden = false;
 
       var learnMoreLink = infoBubble.querySelector('a');
       learnMoreLink.href = localStrings.getString('ntp4_intro_url');
       learnMoreLink.onclick = infoBubble.hide.bind(infoBubble);
 
       infoBubble.show();
     }
 
-    var bookmarkFeatures = localStrings.getString('bookmark_features');
-    if (bookmarkFeatures == 'true') {
+    if (config.supportsBookmarks) {
       bookmarksPage = new ntp4.BookmarksPage();
       appendTilePage(bookmarksPage, localStrings.getString('bookmarksPage'),
                      false);
       chrome.send('getBookmarksData');
     }
 
     var serverpromo = localStrings.getString('serverpromo');

[Evan Stade, 2011/11/03 16:42:14]

and I don't think you want this either

     if (serverpromo) {
       showNotification(parseHtmlSubset(serverpromo), [], function() {
         chrome.send('closeNotificationPromo');
       }, 60000);
       chrome.send('notificationPromoViewed');
     }
 
-    var loginContainer = getRequiredElement('login-container');
-    loginContainer.addEventListener('click', function() {
-      var rect = loginContainer.getBoundingClientRect();
-      chrome.send('showSyncLoginUI',
-                  [rect.left, rect.top, rect.width, rect.height]);
-    });
-    chrome.send('initializeSyncLogin');
+    if (config.supportsSyncLogin) {
+      var loginContainer = getRequiredElement('login-container');
+      loginContainer.addEventListener('click', function() {
+        var rect = loginContainer.getBoundingClientRect();
+        chrome.send('showSyncLoginUI',
+                    [rect.left, rect.top, rect.width, rect.height]);
+      });
+      chrome.send('initializeSyncLogin');
+    }
   }
 
   /**
    * Simple common assertion API
    * @param {*} condition The condition to test.  Note that this may be used to
    *     test whether a value is defined or not, and we don't want to force a
    *     cast to Boolean.
    * @param {string=} opt_message A message to use in any error.
    */
   function assert(condition, opt_message) {
@@ skipping 408 matching lines @@
     }
 
     updatePageSwitchers();
   }
 
   /**
    * Adjusts the size and position of the page switchers according to the
    * layout of the current card.
    */
   function updatePageSwitchers() {
+    if (!pageSwitcherStart || !pageSwitcherEnd)
+      return;
+
     var page = cardSlider.currentCardValue;
 
     pageSwitcherStart.hidden = !page || (cardSlider.currentCard == 0);
     pageSwitcherEnd.hidden = !page ||
         (cardSlider.currentCard == cardSlider.cardCount - 1);
 
     if (!page)
       return;
 
     var pageSwitcherLeft = isRTL() ? pageSwitcherEnd : pageSwitcherStart;
@@ skipping 17 matching lines @@
    * Returns the index of the given page.
    * @param {AppsPage} page The AppsPage for we wish to find.
    * @return {number} The index of |page|, or -1 if it is not here.
    */
   function getAppsPageIndex(page) {
     return Array.prototype.indexOf.call(appsPages, page);
   }
 
   // TODO(estade): rename newtab.css to new_tab_theme.css
   function themeChanged(hasAttribution) {
-    $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now();
+    var themecss = $('themecss');
+    if (!themecss)
+      return;
+
+    themecss.href = 'chrome://theme/css/newtab.css?' + Date.now();
     if (typeof hasAttribution != 'undefined')
       document.documentElement.setAttribute('hasattribution', hasAttribution);
     updateLogo();
     updateAttribution();
   }
 
   /**
    * Sets the proper image for the logo at the bottom left.
    */
   function updateLogo() {
@@ skipping 229 matching lines @@
     bookmarkImportEnded: bookmarkImportEnded,
     bookmarkNodeAdded: bookmarkNodeAdded,
     bookmarkNodeChanged: bookmarkNodeChanged,
     bookmarkNodeChildrenReordered: bookmarkNodeChildrenReordered,
     bookmarkNodeMoved: bookmarkNodeMoved,
     bookmarkNodeRemoved: bookmarkNodeRemoved,
     enterRearrangeMode: enterRearrangeMode,
     getAppsCallback: getAppsCallback,
     getAppsPageIndex: getAppsPageIndex,
     getCardSlider: getCardSlider,
-    initialize: initialize,
     isRTL: isRTL,
     leaveRearrangeMode: leaveRearrangeMode,
     saveAppPageName: saveAppPageName,
     setAppToBeHighlighted: setAppToBeHighlighted,
     setBookmarksData: setBookmarksData,
     setMostVisitedPages: setMostVisitedPages,
     setRecentlyClosedTabs: setRecentlyClosedTabs,
     setStripeColor: setStripeColor,
+    setup: setup,
     showNotification: showNotification,
     themeChanged: themeChanged,
     updateLogin: updateLogin,
     updateOfflineEnabledApps: updateOfflineEnabledApps
   };
 });
 
 // publish ntp globals
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var assert = ntp4.assert;
 var getAppsCallback = ntp4.getAppsCallback;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var themeChanged = ntp4.themeChanged;
 var recentlyClosedTabs = ntp4.setRecentlyClosedTabs;
 var setMostVisitedPages = ntp4.setMostVisitedPages;
 var updateLogin = ntp4.updateLogin;
 
-document.addEventListener('DOMContentLoaded', ntp4.initialize);
 window.addEventListener('online', ntp4.updateOfflineEnabledApps);
 window.addEventListener('offline', ntp4.updateOfflineEnabledApps);