oobe: create OOBEFocusBehavior

Create behavior which is responsible for initial focus on the screen.

Bug: 1165730
Change-Id: If9cf77761acd4a405202ead87cfb3caf952f338c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2622394
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843129}

chrome/browser/browser_resources.grd

@@ -43,6 +43,8 @@
         <!-- OOBE Components -->
         <structure name="IDR_OOBE_COMPONENTS_I18N_BEHAVIOR_HTML" file="resources/chromeos/login/components/oobe_i18n_behavior/oobe_i18n_behavior.html" type="chrome_html" />
         <structure name="IDR_OOBE_COMPONENTS_I18N_BEHAVIOR_JS" file="resources/chromeos/login/components/oobe_i18n_behavior/oobe_i18n_behavior.js" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_FOCUS_BEHAVIOR_HTML" file="resources/chromeos/login/components/oobe_focus_behavior/oobe_focus_behavior.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_FOCUS_BEHAVIOR_JS" file="resources/chromeos/login/components/oobe_focus_behavior/oobe_focus_behavior.js" type="chrome_html" />
         <structure name="IDR_OOBE_COMPONENTS_COMMON_STYLES_HTML" file="resources/chromeos/login/components/common_styles/common_styles.html" type="chrome_html" flattenhtml="true"/>
         <structure name="IDR_OOBE_COMPONENTS_HD_IRON_ICON_HTML" file="resources/chromeos/login/components/hd_iron_icon/hd_iron_icon.html" type="chrome_html" />
         <structure name="IDR_OOBE_COMPONENTS_HD_IRON_ICON_JS" file="resources/chromeos/login/components/hd_iron_icon/hd_iron_icon.js" type="chrome_html" />

chrome/browser/resources/chromeos/login/components/BUILD.gn

@@ -10,6 +10,7 @@ group("closure_compile") {
     ":closure_compile_local",
     "hd_iron_icon:closure_compile",
     "oobe_carousel:closure_compile",
+    "oobe_focus_behavior:closure_compile",
     "oobe_i18n_behavior:closure_compile",
     "oobe_slide:closure_compile",
     "progress_list_item:closure_compile",

chrome/browser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog_old.html

@@ -10,6 +10,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/oobe_dialog.html">
+<link rel="import" href="/components/oobe_focus_behavior.html">
 
 <!--
   oobe-dialog wrap which is used to unify usage of oobe-adaptive-dialog during

chrome/browser/resources/chromeos/login/components/oobe_adaptive_dialog/oobe_adaptive_dialog_old.js

@@ -5,6 +5,8 @@
 Polymer({
   is: 'oobe-adaptive-dialog',
 
+  behaviors: [OobeFocusBehavior],
+
   properties: {
     /**
      * Hide the box shadow on the top of oobe-bottom
@@ -48,7 +50,17 @@ Polymer({
   },
 
   focus() {
-    this.$.dialog.focus();
+    /* When Network Selection Dialog is shown because user pressed "Back"
+       button on EULA screen, display_manager does not inform this dialog that
+       it is shown. It ouly focuses this dialog.
+       So this emulates show().
+       TODO (crbug.com/1159721): fix this once event flow is updated.
+    */
+    this.show();
+  },
+
+  show() {
+    this.focusMarkedElement(this);
   },
 
   onBeforeShow() {
@@ -61,12 +73,4 @@ Polymer({
   scrollToBottom() {
     this.$.dialog.scrollToBottom();
   },
-
-  /**
-   * This is called from oobe_welcome when this dialog is shown.
-   */
-  show() {
-    this.$.dialog.show();
-  },
-
 });

chrome/browser/resources/chromeos/login/components/oobe_focus_behavior/BUILD.gn

+# Copyright 2021 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 = [ ":oobe_focus_behavior" ]
+}
+
+js_library("oobe_focus_behavior") {
+}

chrome/browser/resources/chromeos/login/components/oobe_focus_behavior/oobe_focus_behavior.html

+<script src="oobe_focus_behavior.js"></script>

chrome/browser/resources/chromeos/login/components/oobe_focus_behavior/oobe_focus_behavior.js

+// Copyright 2021 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
+ * 'OobeFocusBehavior' is a special behavior which supports focus transferring
+ * when new screen is shown.
+ */
+
+/** @polymerBehavior */
+const OobeFocusBehavior = {
+  /**
+   * @private
+   * Focuses the element. As cr-input uses focusInput() instead of focus() due
+   * to bug, we have to handle this separately.
+   * TODO(crbug.com/882612): Replace this with focus() in focusMarkedElement().
+   */
+  focusElement_(element) {
+    if (element.focusInput) {
+      element.focusInput();
+      return;
+    }
+    element.focus();
+  },
+
+  /**
+   * Called when the screen is shown to handle initial focus.
+   */
+  focusMarkedElement(root) {
+    if (!root) {
+      return;
+    }
+    var focusedElements = root.getElementsByClassName('focus-on-show');
+    var focused = false;
+    for (var i = 0; i < focusedElements.length; ++i) {
+      if (focusedElements[i].hidden)
+        continue;
+
+      focused = true;
+      Polymer.RenderStatus.afterNextRender(
+          this, () => this.focusElement_(focusedElements[i]));
+      break;
+    }
+    if (!focused && focusedElements.length > 0) {
+      Polymer.RenderStatus.afterNextRender(
+          this, () => this.focusElement_(focusedElements[0]));
+    }
+
+    this.fire('show-dialog');
+  },
+};
+
+/**
+ * TODO: Replace with an interface. b/24294625
+ * @typedef {{
+ *   focusMarkedElement: function()
+ * }}
+ */
+OobeFocusBehavior.Proto;

chrome/browser/ui/webui/chromeos/login/oobe_ui.cc

@@ -156,6 +156,8 @@ constexpr char kWebviewSamlInjectedJSPath[] = "webview_saml_injected.js";
 constexpr char kCommonStylesHTML[] = "components/common_styles.html";
 constexpr char kI18nBehaviorHTML[] = "components/oobe_i18n_behavior.html";
 constexpr char kI18nBehaviorJS[] = "components/oobe_i18n_behavior.js";
+constexpr char kFocusBehaviorHTML[] = "components/oobe_focus_behavior.html";
+constexpr char kFocusBehaviorJS[] = "components/oobe_focus_behavior.js";
 constexpr char kHDIronIconHTML[] = "components/hd_iron_icon.html";
 constexpr char kHDIronIconJS[] = "components/hd_iron_icon.js";
 constexpr char kOobeAdaptiveDialogHTML[] =
@@ -667,6 +669,10 @@ void OobeUI::AddOobeComponents(content::WebUIDataSource* source,
                           IDR_OOBE_COMPONENTS_I18N_BEHAVIOR_HTML);
   source->AddResourcePath(kI18nBehaviorJS,
                           IDR_OOBE_COMPONENTS_I18N_BEHAVIOR_JS);
+  source->AddResourcePath(kFocusBehaviorHTML,
+                          IDR_OOBE_COMPONENTS_FOCUS_BEHAVIOR_HTML);
+  source->AddResourcePath(kFocusBehaviorJS,
+                          IDR_OOBE_COMPONENTS_FOCUS_BEHAVIOR_JS);
 
   source->AddResourcePath(kCommonStylesHTML,
                           IDR_OOBE_COMPONENTS_COMMON_STYLES_HTML);