[SplitSettings] Fork a11y page to OS settings

This change:
1) Creates a new os_a11y_page that has the non-OS bits removed
2) Makes a11y_page show the link to the store if OS settings is enabled
to have parity with Win/Mac/Linux

BUG=950007

Change-Id: I54acaefbc4b000ba3c5523c03cf92645ce3acee5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1626028
Auto-Submit: May Lippert <maybelle@chromium.org>
Commit-Queue: May Lippert <maybelle@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#662972}

chrome/browser/resources/settings/a11y_page/a11y_page.html

@@ -17,45 +17,51 @@
   <template>
     <style include="settings-shared"></style>
 <if expr="chromeos">
-    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
-        section="a11y" focus-config="[[focusConfig_]]">
-      <div route-path="default">
-        <settings-toggle-button
-            id="a11yImageLabels"
-            hidden$="[[!showAccessibilityLabelsSetting_]]"
-            pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
-            on-change="onToggleAccessibilityImageLabels_"
-            label="$i18n{accessibleImageLabelsTitle}"
-            sub-label="$i18n{accessibleImageLabelsSubtitle}">
-        </settings-toggle-button>
-        <settings-toggle-button id="optionsInMenuToggle"
-            label="$i18n{optionsInMenuLabel}"
-            pref="{{prefs.settings.a11y.enable_menu}}">
-        </settings-toggle-button>
-        <cr-link-row class="hr" id="subpage-trigger"
-            label="$i18n{manageAccessibilityFeatures}"
-            on-click="onManageAccessibilityFeaturesTap_"
-            sub-label="$i18n{moreFeaturesLinkDescription}">
-        </cr-link-row>
-      </div>
+    <template is="dom-if" if="[[pageVisibility.webstoreLink]]">
+      <settings-animated-pages id="pages" current-route="{{currentRoute}}"
+          section="a11y" focus-config="[[focusConfig_]]">
+        <div route-path="default">
+          <settings-toggle-button
+              id="a11yImageLabels"
+              hidden$="[[!showAccessibilityLabelsSetting_]]"
+              pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
+              on-change="onToggleAccessibilityImageLabels_"
+              label="$i18n{accessibleImageLabelsTitle}"
+              sub-label="$i18n{accessibleImageLabelsSubtitle}">
+          </settings-toggle-button>
+          <settings-toggle-button id="optionsInMenuToggle"
+              label="$i18n{optionsInMenuLabel}"
+              pref="{{prefs.settings.a11y.enable_menu}}">
+          </settings-toggle-button>
+          <cr-link-row class="hr" id="subpage-trigger"
+              label="$i18n{manageAccessibilityFeatures}"
+              on-click="onManageAccessibilityFeaturesTap_"
+              sub-label="$i18n{moreFeaturesLinkDescription}">
+          </cr-link-row>
+        </div>
 
-      <template is="dom-if" route-path="/manageAccessibility">
-        <settings-subpage
-            associated-control="[[$$('#subpage-trigger')]]"
-            page-title="$i18n{manageAccessibilityFeatures}">
-          <settings-manage-a11y-page prefs="{{prefs}}">
-          </settings-manage-a11y-page>
-        </settings-subpage>
-      </template>
-      <template is="dom-if" route-path="/manageAccessibility/tts">
-        <settings-subpage
-            associated-control="[[$$('#subpage-trigger')]]"
-            page-title="$i18n{manageTtsSettings}">
-          <settings-tts-subpage prefs="{{prefs}}">
-          </settings-tts-subpage>
-        </settings-subpage>
-      </template>
-    </settings-animated-pages>
+        <template is="dom-if" route-path="/manageAccessibility">
+          <settings-subpage
+              associated-control="[[$$('#subpage-trigger')]]"
+              page-title="$i18n{manageAccessibilityFeatures}">
+            <settings-manage-a11y-page prefs="{{prefs}}">
+            </settings-manage-a11y-page>
+          </settings-subpage>
+        </template>
+        <template is="dom-if" route-path="/manageAccessibility/tts">
+          <settings-subpage
+              associated-control="[[$$('#subpage-trigger')]]"
+              page-title="$i18n{manageTtsSettings}">
+            <settings-tts-subpage prefs="{{prefs}}">
+            </settings-tts-subpage>
+          </settings-subpage>
+        </template>
+      </settings-animated-pages>
+    </template>
+    <cr-link-row class="hr" label="$i18n{moreFeaturesLink}"
+        on-click="onMoreFeaturesLinkClick_" sub-label="$i18n{a11yWebStore}"
+        hidden="[[pageVisibility.webstoreLink]]"
+        external></cr-link-row>
 </if>
 
 <if expr="not chromeos">

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -307,7 +307,9 @@
                 restamp>
               <settings-section page-title="$i18n{a11yPageTitle}"
                   section="a11y">
-                <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
+                <settings-a11y-page prefs="{{prefs}}"
+                    page-visibility="[[pageVisibility.a11y]]">
+                </settings-a11y-page>
               </settings-section>
             </template>
 <if expr="not chromeos">

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -62,6 +62,7 @@ if (optimize_webui) {
 
 group("closure_compile") {
   deps = [
+    "os_a11y_page:closure_compile",
     "os_people_page:closure_compile",
     "os_privacy_page:closure_compile",
     "os_reset_page:closure_compile",

chrome/browser/resources/settings/chromeos/lazy_load.html

 <html>
 <head></head>
 <body>
-  <link rel="import" href="../a11y_page/a11y_page.html">
+  <link rel="import" href="os_a11y_page/os_a11y_page.html">
   <link rel="import" href="../date_time_page/date_time_page.html">
   <link rel="import" href="../languages_page/languages_page.html">
   <link rel="import" href="../printing_page/printing_page.html">

chrome/browser/resources/settings/chromeos/os_a11y_page/BUILD.gn

+# Copyright 2019 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":os_a11y_page",
+    "../../a11y_page:externs",
+    "../../a11y_page:manage_a11y_page",
+    "../../a11y_page:tts_subpage",
+  ]
+}
+
+js_library("os_a11y_page") {
+  deps = [
+    "../../:route",
+    "../../settings_page:settings_animated_pages",
+    "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
+  ]
+}

chrome/browser/resources/settings/chromeos/os_a11y_page/os_a11y_page.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="../../i18n_setup.html">
+<link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="../../a11y_page/manage_a11y_page.html">
+<link rel="import" href="../../controls/settings_toggle_button.html">
+<link rel="import" href="../../settings_page/settings_animated_pages.html">
+<link rel="import" href="../../settings_page/settings_subpage.html">
+<link rel="import" href="../../a11y_page/tts_subpage.html">
+
+<dom-module id="os-settings-a11y-page">
+  <template>
+    <style include="settings-shared"></style>
+    <settings-animated-pages id="pages" current-route="{{currentRoute}}"
+        section="a11y" focus-config="[[focusConfig_]]">
+      <div route-path="default">
+        <settings-toggle-button
+            id="a11yImageLabels"
+            hidden$="[[!showAccessibilityLabelsSetting_]]"
+            pref="{{prefs.settings.a11y.enable_accessibility_image_labels}}"
+            on-change="onToggleAccessibilityImageLabels_"
+            label="$i18n{accessibleImageLabelsTitle}"
+            sub-label="$i18n{accessibleImageLabelsSubtitle}">
+        </settings-toggle-button>
+        <settings-toggle-button id="optionsInMenuToggle"
+            label="$i18n{optionsInMenuLabel}"
+            pref="{{prefs.settings.a11y.enable_menu}}">
+        </settings-toggle-button>
+        <cr-link-row class="hr" id="subpage-trigger"
+            label="$i18n{manageAccessibilityFeatures}"
+            on-click="onManageAccessibilityFeaturesTap_"
+            sub-label="$i18n{moreFeaturesLinkDescription}">
+        </cr-link-row>
+      </div>
+
+      <template is="dom-if" route-path="/manageAccessibility">
+        <settings-subpage
+            associated-control="[[$$('#subpage-trigger')]]"
+            page-title="$i18n{manageAccessibilityFeatures}">
+          <settings-manage-a11y-page prefs="{{prefs}}">
+          </settings-manage-a11y-page>
+        </settings-subpage>
+      </template>
+      <template is="dom-if" route-path="/manageAccessibility/tts">
+        <settings-subpage
+            associated-control="[[$$('#subpage-trigger')]]"
+            page-title="$i18n{manageTtsSettings}">
+          <settings-tts-subpage prefs="{{prefs}}">
+          </settings-tts-subpage>
+        </settings-subpage>
+      </template>
+    </settings-animated-pages>
+  </template>
+  <script src="os_a11y_page.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/os_a11y_page/os_a11y_page.js

+// Copyright 2019 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
+ * 'os-settings-a11y-page' is the small section of advanced settings containing
+ * a subpage with Accessibility settings for ChromeOS.
+ */
+Polymer({
+  is: 'os-settings-a11y-page',
+
+  behaviors: [WebUIListenerBehavior],
+
+  properties: {
+    /**
+     * The current active route.
+     */
+    currentRoute: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * Preferences state.
+     */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * Whether to show accessibility labels settings.
+     */
+    showAccessibilityLabelsSetting_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /** @private {!Map<string, string>} */
+    focusConfig_: {
+      type: Object,
+      value: function() {
+        const map = new Map();
+        if (settings.routes.MANAGE_ACCESSIBILITY) {
+          map.set(
+              settings.routes.MANAGE_ACCESSIBILITY.path, '#subpage-trigger');
+        }
+        return map;
+      },
+    },
+
+    /**
+     * Whether to show experimental accessibility features.
+     * @private {boolean}
+     */
+    showExperimentalFeatures_: {
+      type: Boolean,
+      value: function() {
+        return loadTimeData.getBoolean('showExperimentalA11yFeatures');
+      },
+    },
+  },
+
+  /** @override */
+  ready: function() {
+    this.addWebUIListener(
+        'screen-reader-state-changed',
+        this.onScreenReaderStateChanged_.bind(this));
+    chrome.send('getScreenReaderState');
+  },
+
+  /**
+   * @private
+   * @param {boolean} hasScreenReader Whether a screen reader is enabled.
+   */
+  onScreenReaderStateChanged_: function(hasScreenReader) {
+    // TODO(katie): Remove showExperimentalA11yLabels flag before launch.
+    this.showAccessibilityLabelsSetting_ = hasScreenReader &&
+        loadTimeData.getBoolean('showExperimentalA11yLabels');
+  },
+
+  /** @private */
+  onToggleAccessibilityImageLabels_: function() {
+    const a11yImageLabelsOn = this.$.a11yImageLabels.checked;
+    if (a11yImageLabelsOn) {
+      chrome.send('confirmA11yImageLabels');
+    }
+    chrome.metricsPrivate.recordBoolean(
+        'Accessibility.ImageLabels.FromSettings.ToggleSetting',
+        a11yImageLabelsOn);
+  },
+
+  /** @private */
+  onManageAccessibilityFeaturesTap_: function() {
+    settings.navigateTo(settings.routes.MANAGE_ACCESSIBILITY);
+  },
+
+});

chrome/browser/resources/settings/chromeos/os_settings_page/os_settings_page.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="../os_a11y_page/os_a11y_page.html">
 <link rel="import" href="../os_people_page/os_people_page.html">
 <link rel="import" href="../os_search_page/os_search_page.html">
 <link rel="import" href="../personalization_page/personalization_page.html">
@@ -259,7 +260,8 @@
                 restamp>
               <settings-section page-title="$i18n{a11yPageTitle}"
                   section="a11y">
-                <settings-a11y-page prefs="{{prefs}}"></settings-a11y-page>
+                <os-settings-a11y-page prefs="{{prefs}}">
+                </os-settings-a11y-page>
               </settings-section>
             </template>
             <template is="dom-if" if="[[showPage_(pageVisibility.reset)]]"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -13,11 +13,11 @@
   <release seq="1">
     <structures>
       <structure name="IDR_OS_SETTINGS_A11Y_PAGE_JS"
-                 file="a11y_page/a11y_page.js"
+                 file="chromeos/os_a11y_page/os_a11y_page.js"
                  preprocess="true"
                  type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_A11Y_PAGE_HTML"
-                 file="a11y_page/a11y_page.html"
+                 file="chromeos/os_a11y_page/os_a11y_page.html"
                  type="chrome_html"
                  preprocess="true"
                  allowexternalscript="true" />

chrome/browser/resources/settings/page_visibility.js

@@ -8,6 +8,7 @@
  * project is completed this can be changed to only consider incognito and
  * guest mode. https://crbug.com/950007
  * @typedef {{
+ *   a11y: (boolean|undefined|A11yPageVisibility),
  *   advancedSettings: (boolean|undefined),
  *   appearance: (boolean|undefined|AppearancePageVisibility),
  *   autofill: (boolean|undefined),
@@ -27,6 +28,13 @@
  */
 let PageVisibility;
 
+/**
+ * @typedef {{
+ *   webstoreLink: boolean,
+ * }}
+ */
+let A11yPageVisibility;
+
 /**
  * @typedef {{
  *   bookmarksBar: boolean,
@@ -129,6 +137,9 @@ cr.define('settings', function() {
         googleDrive: false,
         smbShares: false,
       },
+      a11y: {
+        webstoreLink: showOSSettings,
+      },
       extensions: false,
       printing: showOSSettings,
     };
@@ -172,6 +183,9 @@ cr.define('settings', function() {
         googleDrive: showOSSettings,
         smbShares: showOSSettings,
       },
+      a11y: {
+        webstoreLink: showOSSettings,
+      },
       extensions: true,
       printing: showOSSettings,
     };