Shortcut Customization: Replace pages by single page

- Now that the nav supports multiple of the same page type,
  just use a single page. All the content will be auto
  generated in future.
- Delete the specific nav pages.
- The title on the page was removed since it was only a placeholder
- Follow up CL will call getLayoutInfo() to dynamically populate
  the navigation section.

Bug: 1060690
Test: browser_tests, ash_webui_unittests
Change-Id: I1c9f08f9cb551fce66997eb96c34bcf16671499e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3062000
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Cr-Commit-Position: refs/heads/master@{#907311}

ash/webui/shortcut_customization_ui/resources/BUILD.gn

@@ -17,16 +17,13 @@ polymer_element_files = [
   "accelerator_row.js",
   "accelerator_subsection.js",
   "accelerator_view.js",
-  "accessibility_shortcuts_page.js",
-  "android_shortcuts_page.js",
-  "browser_shortcuts_page.js",
-  "chromeos_shortcuts_page.js",
   "icons.js",
   "input_key.js",
   "shortcut_customization_fonts_css.js",
   "shortcut_customization_shared_css.js",
   "shortcut_customization_app.js",
   "shortcut_input.js",
+  "shortcuts_page.js",
 ]
 
 generate_grd("build_grd") {
@@ -53,10 +50,6 @@ js_type_check("closure_compile") {
     ":accelerator_edit_view",
     ":accelerator_row",
     ":accelerator_view",
-    ":accessibility_shortcuts_page",
-    ":android_shortcuts_page",
-    ":browser_shortcuts_page",
-    ":chromeos_shortcuts_page",
     ":fake_shortcut_provider",
     ":icons",
     ":input_key",
@@ -65,6 +58,7 @@ js_type_check("closure_compile") {
     ":shortcut_customization_fonts_css",
     ":shortcut_input",
     ":shortcut_types",
+    ":shortcuts_page",
   ]
 }
 
@@ -100,42 +94,13 @@ js_library("accelerator_view") {
   ]
 }
 
-js_library("accessibility_shortcuts_page") {
-  deps = [
-    ":shortcut_input",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-js_library("android_shortcuts_page") {
-  deps = [
-    ":accelerator_edit_dialog",
-    ":shortcut_input",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("accelerator_subsection") {
   deps = [
     ":accelerator_row",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
 
-js_library("browser_shortcuts_page") {
-  deps = [
-    ":shortcut_input",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
-js_library("chromeos_shortcuts_page") {
-  deps = [
-    ":shortcut_input",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("fake_data") {
   deps = [ ":shortcut_types" ]
 }
@@ -201,6 +166,13 @@ preprocess_if_expr("preprocess_generated") {
   in_files = polymer_element_files
 }
 
+js_library("shortcuts_page") {
+  deps = [
+    ":shortcut_input",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 html_to_js("web_components") {
   js_files = polymer_element_files
 }

ash/webui/shortcut_customization_ui/resources/shortcut_customization_app.js

@@ -2,16 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './accelerator_edit_dialog.js'
 import './shortcut_input.js';
-import './browser_shortcuts_page.js'
-import './chromeos_shortcuts_page.js'
-import './android_shortcuts_page.js'
-import './accessibility_shortcuts_page.js'
+import './shortcuts_page.js'
 import './shortcut_customization_fonts_css.js'
-import './accelerator_edit_dialog.js'
+import 'chrome://resources/ash/common/navigation_view_panel.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import 'chrome://resources/ash/common/navigation_view_panel.js';
 
 /**
  * @fileoverview
@@ -54,16 +51,18 @@ export class ShortcutCustomizationAppElement extends PolymerElement {
 
   ready() {
     super.ready();
-    this.$.navigationPanel.addSelector('Chrome OS',
-                                       'chromeos-shortcuts-page',
-                                       'navigation-selector:laptop-chromebook');
-    this.$.navigationPanel.addSelector('Browser', 'browser-shortcuts-page',
-                                       'navigation-selector:laptop-chromebook');
-    this.$.navigationPanel.addSelector('Android', 'android-shortcuts-page',
-                                       'navigation-selector:laptop-chromebook');
-    this.$.navigationPanel.addSelector('Accessibility',
-                                       'accessibility-shortcuts-page',
-                                       'navigation-selector:laptop-chromebook');
+    this.$.navigationPanel.addSelector(
+        'Chrome OS', 'shortcuts-page', 'navigation-selector:laptop-chromebook',
+        'chromeos-page-id');
+    this.$.navigationPanel.addSelector(
+        'Browser', 'shortcuts-page', 'navigation-selector:laptop-chromebook',
+        'browser-page-id');
+    this.$.navigationPanel.addSelector(
+        'Android', 'shortcuts-page', 'navigation-selector:laptop-chromebook',
+        'android-page-id');
+    this.$.navigationPanel.addSelector(
+        'Accessibility', 'shortcuts-page',
+        'navigation-selector:laptop-chromebook', 'a11y-page-id');
   }
 
   /** @override */
@@ -101,5 +100,5 @@ export class ShortcutCustomizationAppElement extends PolymerElement {
   }
 }
 
-customElements.define(ShortcutCustomizationAppElement.is,
-                      ShortcutCustomizationAppElement);
+customElements.define(
+    ShortcutCustomizationAppElement.is, ShortcutCustomizationAppElement);

ash/webui/shortcut_customization_ui/resources/shortcuts_page.html

@@ -0,0 +1 @@
+<shortcut-input></shortcut-input>

ash/webui/shortcut_customization_ui/resources/android_shortcuts_page.js → ash/webui/shortcut_customization_ui/resources/shortcuts_page.js

@@ -8,19 +8,19 @@ import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/poly
 
 /**
  * @fileoverview
- * 'android-shortcuts-page' is responsible for containing all shortcuts
- * related to Android apps.
+ * 'shortcuts-page' is a generic page that is capable of rendering the
+ * shortcuts for a specific category.
+ *
  * TODO(jimmyxgong): Implement this skeleton element.
  */
-export class AndroidShortcutsPageElement extends PolymerElement {
+export class ShortcutsPageElement extends PolymerElement {
   static get is() {
-    return 'android-shortcuts-page';
+    return 'shortcuts-page';
   }
 
   static get template() {
     return html`{__html_template__}`;
   }
 }
 
-customElements.define(AndroidShortcutsPageElement.is,
-                      AndroidShortcutsPageElement);
+customElements.define(ShortcutsPageElement.is, ShortcutsPageElement);