[Aura] Initial app list webui.

chrome/browser/resources/ntp4/dot_list.js

Index: chrome/browser/resources/ntp4/dot_list.js
diff --git a/chrome/browser/resources/ntp4/dot_list.js b/chrome/browser/resources/ntp4/dot_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..45b615af5f6ffc2cc0e9ae4217ce754718b12f3e
--- /dev/null
+++ b/chrome/browser/resources/ntp4/dot_list.js
@@ -0,0 +1,80 @@
+// 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 DotList implementation
+ */
+
+cr.define('ntp4', function() {
+  'use strict';
+
+  /**
+   * Live list of the navigation dots.
+   * @type {!NodeList|undefined}
+   */
+  var navDots;
+
+  /**
+   * Creates a new DotList object.
+   * @constructor
+   * @extends {HTMLUListElement}
+   */
+  var DotList = cr.ui.define('ul');
+
+  DotList.prototype = {
+    __proto__: HTMLUListElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.addEventListener('keydown', this.onKeyDown_.bind(this));
+      navDots = this.getElementsByClassName('dot');
+    },
+
+    /**
+     * Live list of the navigation dots.
+     * @type {!NodeList|undefined}
+     */
+    get dots() {
+      return navDots;
+    },
+
+    /**
+     * Handler for key events on the dot list. These keys will change the focus
+     * element.
+     * @param {Event} e The KeyboardEvent.
+     */
+    onKeyDown_: function(e) {
+      if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey)
+        return;
+
+      var direction = 0;
+      if (e.keyIdentifier == 'Left')
+        direction = -1;
+      else if (e.keyIdentifier == 'Right')
+        direction = 1;
+      else
+        return;
+
+      var focusDot = this.querySelector('.dot:focus');
+      if (!focusDot)
+        return;
+      var focusIndex = Array.prototype.indexOf.call(navDots, focusDot);
+      var newFocusIndex = focusIndex + direction;
+      if (focusIndex == newFocusIndex)
+        return;
+
+      newFocusIndex = (newFocusIndex + navDots.length) % navDots.length;
+      navDots[newFocusIndex].tabIndex = 3;
+      navDots[newFocusIndex].focus();
+      focusDot.tabIndex = -1;
+
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+
+  return {
+    DotList: DotList
+  };
+});