Use a specialized new tab page in TOUCH_UI builds

chrome/browser/resources/touch_ntp/standalone/standalone_hack.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 NTP Standalone hack
+ *  This file contains the code necessary to make the Touch NTP work
+ *  as a stand-alone application (either in Chrome or mobile Safari).
+ *  This is useful for rapid development and testing.
+ */
+
+/**
+ * For Safari, create a dummy chrome object
+ */
+if (!window.chrome) {
+  var chrome = {};
+}
+
+/**
+ *  A replacement chrome.send method that supplies static data for the
+ *  key APIs used by the NTP.
+ *
+ *  Note that the real chrome object also supplies data for most-viewed and
+ *  recently-closed pages, but the tangent NTP doesn't use that data so we
+ *  don't bother simulating it here.
+ *
+ *  We create this object by applying an anonymous function so that we can have
+ *  local variables (avoid polluting the global object)
+ */
+chrome.send = (function() {
+
+    var apps = [{
+        app_launch_index: 2,
+        description: 'The prickly puzzle game where popping balloons has ' +
+            'never been so much fun!',
+        icon_big: 'standalone/poppit-icon.png',
+        icon_small: 'standalone/poppit-favicon.png',
+        id: 'mcbkbpnkkkipelfledbfocopglifcfmi',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://poppit.pogo.com/hd/PoppitHD.html',
+        name: 'Poppit',
+        options_url: ''
+    },
+    {
+        app_launch_index: 1,
+        description: 'Fast, searchable email with less spam.',
+        icon_big: 'standalone/gmail-icon.png',
+        icon_small: 'standalone/gmail-favicon.png',
+        id: 'pjkljhegncpnkpknbcohdijeoejaedia',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'https://mail.google.com/',
+        name: 'Gmail',
+        options_url: 'https://mail.google.com/mail/#settings'
+    },
+    {
+        app_launch_index: 3,
+        description: 'Read over 3 million Google eBooks on the web.',
+        icon_big: 'standalone/googlebooks-icon.png',
+        icon_small: 'standalone/googlebooks-favicon.png',
+        id: 'mmimngoggfoobjdlefbcabngfnmieonb',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://books.google.com/ebooks?source=chrome-app',
+        name: 'Google Books',
+        options_url: ''
+    },
+    {
+        app_launch_index: 4,
+        description: 'Find local business information, directions, and ' +
+            'street-level imagery around the world with Google Maps.',
+        icon_big: 'standalone/googlemaps-icon.png',
+        icon_small: 'standalone/googlemaps-favicon.png',
+        id: 'lneaknkopdijkpnocmklfnjbeapigfbh',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://maps.google.com/',
+        name: 'Google Maps',
+        options_url: ''
+    },
+    {
+        app_launch_index: 5,
+        description: 'Create the longest path possible and challenge your ' +
+            'friends in the game of Entanglement.',
+        icon_big: 'standalone/entaglement-icon.png',
+        id: 'aciahcmjmecflokailenpkdchphgkefd',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://entanglement.gopherwoodstudios.com/',
+        name: 'Entanglement',
+        options_url: ''
+    },
+    {
+        name: 'NYTimes',
+        app_launch_index: 6,
+        description: 'The New York Times App for the Chrome Web Store.',
+        icon_big: 'standalone/nytimes-icon.png',
+        id: 'ecmphppfkcfflgglcokcbdkofpfegoel',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://www.nytimes.com/chrome/',
+        options_url: '',
+        page_index: 2
+    },
+    {
+        app_launch_index: 7,
+        description: 'The world\'s most popular online video community.',
+        id: 'blpcfgokakmgnkcojhhkbfbldkacnbeo',
+        icon_big: 'standalone/youtube-icon.png',
+        launch_container: 2,
+        launch_type: 1,
+        launch_url: 'http://www.youtube.com/',
+        name: 'YouTube',
+        options_url: '',
+        name: 'YouTube',
+        page_index: 3
+    }];
+
+    // For testing
+    apps = spamApps(apps);
+
+    /**
+     * Invoke the getAppsCallback function with a snapshot of the current app
+     * database.
+     */
+    function sendGetAppsCallback()
+    {
+        // We don't want to hand out our array directly because the NTP will
+        // assume it owns the array and is free to modify it.  For now we make a
+        // one-level deep copy of the array (since cloning the whole thing is
+        // more work and unnecessary at the moment).
+        var appsData = {
+            showPromo: false,
+            showLauncher: true,
+            apps: apps.slice(0)
+        };
+        getAppsCallback(appsData);
+    }
+
+    /**
+     * To make testing real-world scenarios easier, this expands our list of
+     * apps by duplicating them a number of times
+     */
+    function spamApps(apps)
+    {
+        // Create an object that extends another object
+        // This is an easy/efficient way to make slightly modified copies of our
+        // app objects without having to do a deep copy
+        function createObject(proto) {
+            /** @constructor */
+            var F = function() {};
+            F.prototype = proto;
+            return new F();
+        }
+
+        var newApps = [];
+        var pages = Math.floor(Math.random() * 8) + 1;
+        var idx = 1;
+        for (var p = 0; p < pages; p++) {
+            var count = Math.floor(Math.random() * 18) + 1;
+            for (var a = 0; a < count; a++) {
+                var i = Math.floor(Math.random() * apps.length);
+                var newApp = createObject(apps[i]);
+                newApp.page_index = p;
+                newApp.app_launch_index = idx;
+                // Uniqify the ID
+                newApp.id = apps[i].id + '-' + idx;
+                idx++;
+                newApps.push(newApp);
+            }
+        }
+        return newApps;
+    }
+
+    /**
+     * Like Array.prototype.indexOf but calls a predicate to test for match
+     *
+     * @param {Array} array The array to search.
+     * @param {function(Object): boolean} predicate The function to invoke on
+     *     each element.
+     * @return {number} First index at which predicate returned true, or -1.
+     */
+    function indexOfPred(array, predicate)
+    {
+        for (var i = 0; i < array.length; i++) {
+            if (predicate(array[i])) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    /**
+     * Get index into apps of an application object
+     * Requires the specified app to be present
+     *
+     * @param {string} id The ID of the application to locate.
+     * @return {number} The index in apps for an object with the specified ID.
+     */
+    function getAppIndex(id)
+    {
+        var i = indexOfPred(apps, function(e) { return e.id === id;});
+        if (i == -1) {
+            alert('Error: got unexpected App ID');
+        }
+        return i;
+    }
+
+    /**
+     * Get an application object given the application ID
+     * Requires
+     * @param {string} id The application ID to search for.
+     * @return {Object} The corresponding application object.
+     */
+    function getApp(id)
+    {
+        return apps[getAppIndex(id)];
+    }
+
+    /**
+     * Simlulate the launching of an application
+     *
+     * @param {string} id The ID of the application to launch.
+     */
+    function launchApp(id)
+    {
+        // Note that we don't do anything with the icon location.
+        // That's used by Chrome only on Windows to animate the icon during
+        // launch.
+        var app = getApp(id);
+        switch (parseInt(app.launch_type, 10)) {
+            case 0: // pinned
+            case 1: // regular
+
+                // Replace the current tab with the app.
+                // Pinned seems to omit the tab title, but I doubt it's
+                // possible for us to do that here
+                window.location = (app.launch_url);
+                break;
+
+            case 2: // fullscreen
+            case 3: // window
+                // attempt to launch in a new window
+                window.close();
+                window.open(app.launch_url, app.name,
+                'resizable=yes,scrollbars=yes,status=yes');
+                break;
+
+            default:
+                alert('Unexpected launch type: ' + app.launch_type);
+        }
+    }
+
+    /**
+     * Simulate uninstall of an app
+     * @param {string} id The ID of the application to uninstall.
+     */
+    function uninstallApp(id) {
+        var i = getAppIndex(id);
+        // This confirmation dialog doesn't look exactly the same as the
+        // standard NTP one, but it's close enough.
+        if (window.confirm('Uninstall \"' + apps[i].name + '\"?')) {
+            apps.splice(i, 1);
+            sendGetAppsCallback();
+        }
+    }
+
+    /**
+     * Update the app_launch_index of all apps
+     * @param {Array.<string>} appIds All app IDs in their desired order.
+     */
+    function reorderApps(movedAppId, appIds) {
+      assert(apps.length == appIds.length, 'Expected all apps in reorderApps');
+
+      // Clear the launch indicies so we can easily verify no dups
+      apps.forEach(function(a) {
+        a.app_launch_index = -1;
+        });
+
+      for (var i = 0; i < appIds.length; i++) {
+        var a = getApp(appIds[i]);
+        assert(a.app_launch_index == -1,
+               'Found duplicate appId in reorderApps');
+        a.app_launch_index = i;
+      }
+      sendGetAppsCallback();
+    }
+
+    /**
+     * Update the page number of an app
+     * @param {string} id The ID of the application to move.
+     * @param {number} page The page index to place the app.
+     */
+    function setPageIndex(id, page) {
+      var app = getApp(id);
+      app.page_index = page;
+    }
+
+    // The 'send' function
+    /**
+     * The chrome server communication entrypoint.
+     *
+     * @param {string} command Name of the command to send.
+     * @param {Array} args Array of command-specific arguments.
+     */
+    return function(command, args) {
+      // Chrome API is async
+      window.setTimeout(function() {
+        switch (command) {
+          // called to populate the list of applications
+          case 'getApps':
+            sendGetAppsCallback();
+            break;
+
+          // Called when an app is launched
+          // Ignore additional arguments - they've been changing over time and
+          // we don't use them in our NTP anyway.
+          case 'launchApp':
+            launchApp(args[0]);
+            break;
+
+          // Called when an app is uninstalled
+          case 'uninstallApp':
+            uninstallApp(args[0]);
+            break;
+
+          // Called when an app is repositioned in the touch NTP
+          case 'reorderApps':
+            reorderApps(args[0], args[1]);
+            break;
+
+          // Called when an app is moved to a different page
+          case 'setPageIndex':
+            setPageIndex(args[0], parseInt(args[1], 10));
+            break;
+
+          default:
+              throw new Error('Unexpected chrome command: ' + command);
+              break;
+        }
+      }, 0);
+    };
+})();
+
+/* A static templateData with english resources */
+var templateData = {
+  title: 'Standalone New Tab',
+  web_store_title: 'Web Store',
+  web_store_url: 'https://chrome.google.com/webstore?hl=en-US'
+};
+
+/* Hook construction of chrome://theme URLs */
+function themeUrlMapper(resourceName) {
+  if (resourceName == 'IDR_WEBSTORE_ICON') {
+    return 'standalone/webstore_icon.png';
+  }
+  return undefined;
+}
+
+/*
+ * On iOS we need a hack to avoid spurious click events
+ * In particular, if the user delays briefly between first touching and starting
+ * to drag, when the user releases a click event will be generated.
+ * Note that this seems to happen regardless of whether we do preventDefault on
+ * touchmove events.
+ */
+if (/iPhone|iPod|iPad/.test(navigator.userAgent) &&
+      !(/Chrome/.test(navigator.userAgent))) {
+  // We have a real iOS device (no a ChromeOS device pretending to be iOS)
+  (function() {
+    // True if a gesture is occuring that should cause clicks to be swallowed
+    var gestureActive = false;
+
+    // The position a touch was last started
+    var lastTouchStartPosition;
+
+    // Distance which a touch needs to move to be considered a drag
+    var DRAG_DISTANCE = 3;
+
+    document.addEventListener('touchstart', function(event) {
+        lastTouchStartPosition = {
+          x: event.touches[0].clientX,
+          y: event.touches[0].clientY
+        };
+        // A touchstart ALWAYS preceeds a click (valid or not), so cancel any
+        // outstanding gesture. Also, any multi-touch is a gesture that should
+        // prevent clicks.
+        gestureActive = event.touches.length > 1;
+      }, true);
+
+    document.addEventListener('touchmove', function(event) {
+        // When we see a move, measure the distance from the last touchStart
+        // If this is a multi-touch then the work here is irrelevant
+        // (gestureActive is already true)
+        var t = event.touches[0];
+        if (Math.abs(t.clientX - lastTouchStartPosition.x) > DRAG_DISTANCE ||
+            Math.abs(t.clientY - lastTouchStartPosition.y) > DRAG_DISTANCE) {
+          gestureActive = true;
+        }
+      }, true);
+
+    document.addEventListener('click', function(event) {
+        // If we got here without gestureActive being set then it means we had
+        // a touchStart without any real dragging before touchEnd - we can allow
+        // the click to proceed.
+        if (gestureActive) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      }, true);
+
+  })();
+}
+
+/*  Hack to add Element.classList to older browsers that don't yet support it.

[arv (Not doing code reviews), 2011/03/10 19:25:59]

Why do we care about old browsers?

[Rick Byers, 2011/03/11 02:44:33]

See the comment at the top of this file - which I've expanded on now.

Since we don't quite yet have a stable touch-screen based platform to run Chrome
on, I've been doing some of my testing on an iPad.  I've tried to keep any need
for support of older browsers contained to standalone_hack.js (which is just a
tool in the source tree - not built into the product).

+    From https://developer.mozilla.org/en/DOM/element.classList.
+*/
+if (typeof Element !== 'undefined' &&
+    !Element.prototype.hasOwnProperty('classList')) {
+  (function() {
+    var classListProp = 'classList',
+        protoProp = 'prototype',
+        elemCtrProto = Element[protoProp],
+        objCtr = Object,
+        strTrim = String[protoProp].trim || function() {
+            return this.replace(/^\s+|\s+$/g, '');
+        },
+        arrIndexOf = Array[protoProp].indexOf || function(item) {
+            for (var i = 0, len = this.length; i < len; i++) {
+                if (i in this && this[i] === item) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+        // Vendors: please allow content code to instantiate DOMExceptions
+        /** @constructor  */
+        DOMEx = function(type, message) {
+            this.name = type;
+            this.code = DOMException[type];
+            this.message = message;
+        },
+        checkTokenAndGetIndex = function(classList, token) {
+            if (token === '') {
+                throw new DOMEx(
+                      'SYNTAX_ERR',
+                      'An invalid or illegal string was specified'
+                );
+            }
+            if (/\s/.test(token)) {
+                throw new DOMEx(
+                      'INVALID_CHARACTER_ERR',
+                      'String contains an invalid character'
+                );
+            }
+            return arrIndexOf.call(classList, token);
+        },
+        /** @constructor
+         *  @extends Array */
+        ClassList = function(elem) {
+            var trimmedClasses = strTrim.call(elem.className),
+                classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [];
+
+            for (var i = 0, len = classes.length; i < len; i++) {
+                this.push(classes[i]);
+            }
+            this._updateClassName = function() {
+                elem.className = this.toString();
+            };
+        },
+        classListProto = ClassList[protoProp] = [],
+        classListGetter = function() {
+            return new ClassList(this);
+        };
+
+    // Most DOMException implementations don't allow calling DOMException's
+    // toString() on non-DOMExceptions. Error's toString() is sufficient here.
+    DOMEx[protoProp] = Error[protoProp];
+    classListProto.item = function(i) {
+        return this[i] || null;
+    };
+    classListProto.contains = function(token) {
+        token += '';
+        return checkTokenAndGetIndex(this, token) !== -1;
+    };
+    classListProto.add = function(token) {
+        token += '';
+        if (checkTokenAndGetIndex(this, token) === -1) {
+            this.push(token);
+            this._updateClassName();
+        }
+    };
+    classListProto.remove = function(token) {
+        token += '';
+        var index = checkTokenAndGetIndex(this, token);
+        if (index !== -1) {
+            this.splice(index, 1);
+            this._updateClassName();
+        }
+    };
+    classListProto.toggle = function(token) {
+        token += '';
+        if (checkTokenAndGetIndex(this, token) === -1) {
+            this.add(token);
+        } else {
+            this.remove(token);
+        }
+    };
+    classListProto.toString = function() {
+        return this.join(' ');
+    };
+
+    if (objCtr.defineProperty) {
+        var classListDescriptor = {
+              get: classListGetter,
+              enumerable: true,
+              configurable: true
+        };
+        objCtr.defineProperty(elemCtrProto, classListProp, classListDescriptor);
+    } else if (objCtr[protoProp].__defineGetter__) {
+        elemCtrProto.__defineGetter__(classListProp, classListGetter);
+    }
+  }());
+}
+
+/* Hack to add Function.bind to older browsers that don't yet support it. From:

[arv (Not doing code reviews), 2011/03/10 19:25:59]

Why do we care about old browsers?

[Rick Byers, 2011/03/11 02:44:33]

See above.

[arv (Not doing code reviews), 2011/03/11 20:08:46]

Mobile Safari does not have classList or bind?

[Rick Byers, 2011/03/15 21:47:54]

Right.  I just double-checked that the recent iOS 4.3 update doesn't help.  At
least this ugliness is contained to something that's not part of the product -
just a testing tool.

+   https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
+*/
+if (!Function.prototype.bind) {
+  /**
+   * @param {Object} selfObj Specifies the object which |this| should
+   *     point to when the function is run. If the value is null or undefined,
+   *     it will default to the global object.
+   * @param {...*} var_args Additional arguments that are partially
+   *     applied to the function.
+   * @return {!Function} A partially-applied form of the function bind() was
+   *     invoked as a method of.
+   *  @suppress {duplicate}
+   */
+  Function.prototype.bind = function(selfObj, var_args) {
+    var slice = [].slice,
+        args = slice.call(arguments, 1),
+        self = this,
+        /** @constructor  */
+        nop = function() {},
+        bound = function() {
+          return self.apply(this instanceof nop ? this : (selfObj || {}),
+                              args.concat(slice.call(arguments)));
+        };
+    nop.prototype = self.prototype;
+    bound.prototype = new nop();
+    return bound;
+  };
+}
+