OS Settings: Add skeleton UI for edit hostname dialog.

R=khorimoto@chromium.org

Bug: 126802
Test: none
Change-Id: I6b5477600eb22f5050f64bc91d4ebf589b912e6f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2473737
Commit-Queue: James Hawkins <jhawkins@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817349}

chrome/app/os_settings_strings.grdp

@@ -159,6 +159,15 @@
   <message name="IDS_SETTINGS_ABOUT_PAGE_SHOW_RELEASE_NOTES" desc="Text of the button which shows user the release notes.">
     See what's new
   </message>
+  <message name="IDS_SETTINGS_ABOUT_PAGE_EDIT_DEVICE_NAME" desc="The title of the dialog that allows the user to edit the device hostname.">
+    Edit device name
+  </message>
+  <message name="IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_INFO" desc="Label describing which areas of the Chrome OS system broadcast the device hostname to external networks.">
+    This name is visible to other devices for Bluetooth and network connections
+  </message>
+  <message name="IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_CONSTRAINTS" desc="Label describing the requirements for the text of the device hostname.">
+    Name can use letters, numbers, and hyphens (-)
+  </message>
   <message name="IDS_SETTINGS_UPGRADE_UP_TO_DATE" desc="Status label: Already up to date (ChromiumOS/ChromeOS)">
     Your <ph name="DEVICE_TYPE">$1<ex>Chromebook</ex></ph> is up to date
   </message>

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_CONSTRAINTS.png.sha1

+31dad1de7fc497e6de0ac0eadc949e9e5691c738
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_INFO.png.sha1

+31dad1de7fc497e6de0ac0eadc949e9e5691c738
\ No newline at end of file

chrome/app/os_settings_strings_grdp/IDS_SETTINGS_ABOUT_PAGE_EDIT_DEVICE_NAME.png.sha1

+ea5e72dd37d73d9c447039ee2f216b4d0a903d55
\ No newline at end of file

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

@@ -9,6 +9,7 @@ js_type_check("closure_compile") {
   deps = [
     ":channel_switcher_dialog",
     ":detailed_build_info",
+    ":edit_hostname_dialog",
     ":os_about_page",
   ]
 }
@@ -33,6 +34,8 @@ js_library("os_about_page") {
 
 js_library("detailed_build_info") {
   deps = [
+    ":channel_switcher_dialog",
+    ":edit_hostname_dialog",
     "..:deep_linking_behavior",
     "..:os_route",
     "../..:router",
@@ -52,11 +55,19 @@ js_library("channel_switcher_dialog") {
   ]
 }
 
+js_library("edit_hostname_dialog") {
+  deps = [
+    "../../about_page:about_page_browser_proxy",
+    "//ui/webui/resources/js:load_time_data",
+  ]
+}
+
 js_type_check("closure_compile_module") {
   is_polymer3 = true
   deps = [
     ":channel_switcher_dialog.m",
     ":detailed_build_info.m",
+    ":edit_hostname_dialog.m",
     ":os_about_page.m",
     ":update_warning_dialog.m",
   ]
@@ -76,6 +87,8 @@ js_library("channel_switcher_dialog.m") {
 js_library("detailed_build_info.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.m.js" ]
   deps = [
+    ":channel_switcher_dialog.m",
+    ":edit_hostname_dialog.m",
     "..:deep_linking_behavior.m",
     "..:os_route.m",
     "../..:router.m",
@@ -87,6 +100,17 @@ js_library("detailed_build_info.m") {
   extra_deps = [ ":detailed_build_info_module" ]
 }
 
+js_library("edit_hostname_dialog.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/edit_hostname_dialog.m.js" ]
+  deps = [
+    "../../about_page:about_page_browser_proxy.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  extra_deps = [ ":edit_hostname_dialog_module" ]
+}
+
 js_library("os_about_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.m.js" ]
   deps = [
@@ -122,6 +146,7 @@ group("polymer3_elements") {
   public_deps = [
     ":channel_switcher_dialog_module",
     ":detailed_build_info_module",
+    ":edit_hostname_dialog_module",
     ":os_about_page_module",
     ":update_warning_dialog_module",
   ]
@@ -145,6 +170,15 @@ polymer_modulizer("detailed_build_info") {
   auto_imports = os_settings_auto_imports
 }
 
+polymer_modulizer("edit_hostname_dialog") {
+  js_file = "edit_hostname_dialog.js"
+  html_file = "edit_hostname_dialog.html"
+  html_type = "dom-module"
+  migrated_imports = settings_migrated_imports
+  namespace_rewrites = os_settings_namespace_rewrites
+  auto_imports = os_settings_auto_imports
+}
+
 polymer_modulizer("os_about_page") {
   js_file = "os_about_page.js"
   html_file = "os_about_page.html"

chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="../../about_page/about_page_browser_proxy.html">
-<link rel="import" href="channel_switcher_dialog.html">
-<link rel="import" href="../deep_linking_behavior.html">
-<link rel="import" href="../os_route.html">
-<link rel="import" href="../../router.html">
 <link rel="import" href="../../i18n_setup.html">
+<link rel="import" href="../../router.html">
 <link rel="import" href="../../settings_shared_css.html">
+<link rel="import" href="../deep_linking_behavior.html">
 <link rel="import" href="../localized_link/localized_link.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
-<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
-<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator_behavior.html">
-<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="../os_route.html">
+<link rel="import" href="channel_switcher_dialog.html">
+<link rel="import" href="edit_hostname_dialog.html">
 
 <dom-module id="settings-detailed-build-info">
   <template>
@@ -73,9 +74,14 @@
             ChromeOS-102938
           </div>
         </div>
-        <cr-icon-button class="icon-edit">
+        <cr-icon-button class="icon-edit" on-click="onEditHostnameTap_">
         </cr-icon-button>
       </div>
+      <template is="dom-if" if="[[showEditHostnameDialog_]]" restamp>
+        <edit-hostname-dialog
+            on-close="onEditHostnameDialogClosed_">
+        </edit-hostname-dialog>
+      </template>
     </template>
     <div id="buildDetailsLinkContainer" class="settings-box">
       <div class="start" id="aboutBuildDetailsTitle">

chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.js

@@ -29,6 +29,9 @@ Polymer({
     /** @private */
     showChannelSwitcherDialog_: Boolean,
 
+    /** @private */
+    showEditHostnameDialog_: Boolean,
+
     /** @private */
     canChangeChannel_: Boolean,
 
@@ -140,6 +143,15 @@ Polymer({
     this.showChannelSwitcherDialog_ = true;
   },
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onEditHostnameTap_(e) {
+    e.preventDefault();
+    this.showEditHostnameDialog_ = true;
+  },
+
   /**
    * @return {boolean}
    * @private
@@ -187,4 +199,11 @@ Polymer({
     cr.ui.focusWithoutInk(assert(this.$$('cr-button')));
     this.updateChannelInfo_();
   },
+
+  /** @private */
+  onEditHostnameDialogClosed_() {
+    this.showEditHostnameDialog_ = false;
+    cr.ui.focusWithoutInk(assert(this.$$('cr-button')));
+    // TODO(jhawkins): Verify hostname property updated at this point.
+  },
 });

chrome/browser/resources/settings/chromeos/os_about_page/edit_hostname_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
+<link rel="import" href="../../about_page/about_page_browser_proxy.html">
+<link rel="import" href="../../settings_shared_css.html">
+
+<dom-module id="edit-hostname-dialog">
+  <template>
+    <style include="settings-shared">
+      cr-input {
+        --cr-input-error-display: none;
+      }
+
+      #input-subtext {
+        display: flex;
+      }
+
+      #input-subtext span:last-child {
+        margin-inline-start: auto;
+      }
+    </style>
+    <cr-dialog id="dialog" show-on-attach>
+      <div slot="title">$i18n{aboutEditDeviceName}</div>
+      <div slot="body">
+        <div>$i18n{aboutDeviceNameInfo}</div>
+        <cr-input></cr-input>
+        <div id="input-subtext">
+          <span>$i18n{aboutDeviceNameConstraints}</span>
+          <span>1/15</span>
+        </div>
+      </div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="onCancelTap_">
+          $i18n{cancel}
+        </cr-button>
+        <cr-button class="action-button" on-click="onDoneTap_">
+          $i18n{done}
+        </cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+  <script src="edit_hostname_dialog.js"></script>
+</dom-module>

chrome/browser/resources/settings/chromeos/os_about_page/edit_hostname_dialog.js

+// Copyright 2020 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 'edit-hostname-dialog' is a component allowing the
+ * user to edit the device hostname.
+ */
+Polymer({
+  is: 'edit-hostname-dialog',
+
+  /** @private */
+  onCancelTap_() {
+    this.$.dialog.close();
+  },
+
+  /** @private */
+  onDoneTap_() {
+    this.$.dialog.close();
+  },
+});

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -521,23 +521,28 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_OS_ABOUT_PAGE_M_JS"
+  <include name="IDR_OS_SETTINGS_OS_ABOUT_PAGE_OS_ABOUT_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.m.js"
            use_base_dir="false"
            compress="false"
            preprocess="true"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_CHANNEL_SWITCHER_DIALOG_M_JS"
+  <include name="IDR_OS_SETTINGS_OS_ABOUT_PAGE_CHANNEL_SWITCHER_DIALOG_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/channel_switcher_dialog.m.js"
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_DETAILED_BUILD_INFO_M_JS"
+  <include name="IDR_OS_SETTINGS_OS_ABOUT_PAGE_DETAILED_BUILD_INFO_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/detailed_build_info.m.js"
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
-  <include name="IDR_OS_SETTINGS_OS_PRINTING_PAGE_UPDATE_WARNING_DIALOG_M_JS"
+  <include name="IDR_OS_SETTINGS_OS_ABOUT_PAGE_EDIT_HOSTNAME_DIALOG_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/edit_hostname_dialog.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_OS_ABOUT_PAGE_UPDATE_WARNING_DIALOG_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_about_page/update_warning_dialog.m.js"
            use_base_dir="false"
            compress="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -372,6 +372,12 @@
       <structure name="IDR_OS_SETTINGS_DETAILED_BUILD_INFO_HTML"
                  file="chromeos/os_about_page/detailed_build_info.html"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_EDIT_HOSTNAME_DIALOG_HTML"
+                 file="chromeos/os_about_page/edit_hostname_dialog.html"
+                 compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_EDIT_HOSTNAME_DIALOG_JS"
+                 file="chromeos/os_about_page/edit_hostname_dialog.js"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_UPDATE_WARNING_DIALOG_HTML"
                  file="chromeos/os_about_page/update_warning_dialog.html"
                  compress="false" type="chrome_html" />

chrome/browser/ui/webui/settings/chromeos/about_section.cc

@@ -219,6 +219,12 @@ void AboutSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
     {"aboutChannelDialogDev", IDS_SETTINGS_ABOUT_PAGE_DIALOG_CHANNEL_DEV},
     {"aboutChannelDialogStable", IDS_SETTINGS_ABOUT_PAGE_DIALOG_CHANNEL_STABLE},
 
+    // About page, edit device name dialog.
+    {"aboutEditDeviceName", IDS_SETTINGS_ABOUT_PAGE_EDIT_DEVICE_NAME},
+    {"aboutDeviceNameInfo", IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_INFO},
+    {"aboutDeviceNameConstraints",
+     IDS_SETTINGS_ABOUT_PAGE_DEVICE_NAME_CONSTRAINTS},
+
     // About page, update warning dialog.
     {"aboutUpdateWarningMessage",
      IDS_SETTINGS_ABOUT_PAGE_UPDATE_WARNING_MESSAGE},