chromeos: Material Design version of Set Time dialog, part 1

* Add SetTimeDialogMd feature flag.
* Port the core functionality to Polymer.
* Add test using mocha.

TODO: Styling to spec will be done in follow-up CLs.

BUG=927732
TEST=browser_tests SetTimeWebUITest, manual

Change-Id: I32e283e0c3db86536a392108bce9aba162f6b836
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1497494
Commit-Queue: James Cook <jamescook@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#641331}

chrome/browser/browser_resources.grd

@@ -655,6 +655,10 @@
         <include name="IDR_SET_TIME_HTML" file="resources\chromeos\set_time\set_time.html" type="BINDATA" />
         <include name="IDR_SET_TIME_CSS" file="resources\chromeos\set_time\set_time.css" type="BINDATA" />
         <include name="IDR_SET_TIME_JS" file="resources\chromeos\set_time\set_time.js" type="BINDATA" />
+        <include name="IDR_MD_SET_TIME_HTML" file="resources\chromeos\md_set_time\set_time.html" type="BINDATA" compress="gzip" />
+        <include name="IDR_MD_SET_TIME_JS" file="resources\chromeos\md_set_time\set_time.js" type="BINDATA" compress="gzip" />
+        <include name="IDR_MD_SET_TIME_BROWSER_PROXY_HTML" file="resources\chromeos\md_set_time\set_time_browser_proxy.html" type="BINDATA" compress="gzip" />
+        <include name="IDR_MD_SET_TIME_BROWSER_PROXY_JS" file="resources\chromeos\md_set_time\set_time_browser_proxy.js" type="BINDATA" compress="gzip" />
       </if>
       <if expr="chromeos">
         <if expr="_google_chrome">

chrome/browser/chromeos/set_time_dialog.cc

@@ -7,6 +7,8 @@
 #include "base/metrics/user_metrics.h"
 #include "base/strings/string16.h"
 #include "chrome/common/url_constants.h"
+#include "chromeos/constants/chromeos_features.h"
+#include "chromeos/login/login_state/login_state.h"
 #include "ui/gfx/geometry/size.h"
 
 namespace chromeos {
@@ -16,6 +18,11 @@ namespace {
 const int kDefaultWidth = 490;
 const int kDefaultHeight = 235;
 
+// Material design dialog width and height in DIPs.
+const int kDefaultWidthMd = 530;
+const int kDefaultHeightWithTimezone = 255;
+const int kDefaultHeightWithoutTimezone = 215;
+
 }  // namespace
 
 // static
@@ -25,14 +32,27 @@ void SetTimeDialog::ShowDialog(gfx::NativeWindow parent) {
   dialog->ShowSystemDialog(parent);
 }
 
+// static
+bool SetTimeDialog::ShouldShowTimezone() {
+  // After login the user should set the timezone via Settings, which applies
+  // additional restrictions.
+  return !LoginState::Get()->IsUserLoggedIn();
+}
+
 SetTimeDialog::SetTimeDialog()
     : SystemWebDialogDelegate(GURL(chrome::kChromeUISetTimeURL),
                               base::string16() /* title */) {}
 
 SetTimeDialog::~SetTimeDialog() = default;
 
 void SetTimeDialog::GetDialogSize(gfx::Size* size) const {
-  size->SetSize(kDefaultWidth, kDefaultHeight);
+  if (features::IsSetTimeDialogMd()) {
+    size->SetSize(kDefaultWidthMd, ShouldShowTimezone()
+                                       ? kDefaultHeightWithTimezone
+                                       : kDefaultHeightWithoutTimezone);
+  } else {
+    size->SetSize(kDefaultWidth, kDefaultHeight);
+  }
 }
 
 }  // namespace chromeos

chrome/browser/chromeos/set_time_dialog.h

@@ -20,6 +20,9 @@ class SetTimeDialog : public SystemWebDialogDelegate {
   // as a child of |parent|, e.g. the Settings window.
   static void ShowDialog(gfx::NativeWindow parent = nullptr);
 
+  // Returns true if the dialog should show the timezone <select>.
+  static bool ShouldShowTimezone();
+
  private:
   SetTimeDialog();
   ~SetTimeDialog() override;

chrome/browser/chromeos/system/timezone_util.cc

@@ -381,7 +381,9 @@ void SetTimezoneFromUI(Profile* profile, const std::string& timezone_id) {
   Profile* primary_profile = ProfileManager::GetPrimaryUserProfile();
   if (primary_profile && profile->IsSameProfile(primary_profile)) {
     profile->GetPrefs()->SetString(prefs::kUserTimezone, timezone_id);
+    return;
   }
+
   // Time zone UI should be blocked for non-primary users.
   NOTREACHED();
 }

chrome/browser/resources/chromeos/BUILD.gn

@@ -29,6 +29,7 @@ group("closure_compile") {
     "internet_detail_dialog:closure_compile",
     "kiosk_next_home:closure_compile",
     "login:closure_compile",
+    "md_set_time:closure_compile",
     "multidevice_setup:closure_compile",
     "network_ui:closure_compile",
     "select_to_speak:closure_compile",

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

@@ -0,0 +1,30 @@
+# 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 = [
+    ":set_time",
+    ":set_time_browser_proxy",
+  ]
+}
+
+js_library("set_time") {
+  deps = [
+    ":set_time_browser_proxy",
+    "//ui/webui/resources/cr_elements/cr_dialog:cr_dialog",
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:cr",
+    "//ui/webui/resources/js:load_time_data",
+    "//ui/webui/resources/js:web_ui_listener_behavior",
+  ]
+}
+
+js_library("set_time_browser_proxy") {
+  deps = [
+    "//ui/webui/resources/js:cr",
+  ]
+  externs_list = [ "$externs_path/chrome_send.js" ]
+}

chrome/browser/resources/chromeos/md_set_time/set_time.html

@@ -0,0 +1,98 @@
+<!doctype html>
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
+<head>
+<meta charset="utf-8">
+<title>$i18n{setTimeTitle}</title>
+
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="set_time_browser_proxy.html">
+
+<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+
+<script src="strings.js"></script>
+
+</head>
+
+<body>
+  <dom-module id="set-time">
+    <template>
+      <style include="cr-shared-style paper-button-style">
+        :host {
+          @apply --cr-page-host;
+        }
+
+        cr-dialog {
+          --cr-dialog-native: {
+            border-radius: 0;
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        .row {
+          margin: 0.65em 0;
+        }
+
+        input[type='date'],
+        input[type='time'] {
+          font-family: inherit;
+          font-size: 16px;
+          letter-spacing: 1px;
+          margin-bottom: 4px;
+          margin-inline-end: 8px;
+        }
+
+        input[type='date']::-webkit-clear-button,
+        input[type='time']::-webkit-clear-button {
+          display: none;
+        }
+
+        label {
+          margin-inline-end: 5px;
+        }
+
+        #timezoneSelect {
+          font-family: inherit;
+          font-size: inherit;
+        }
+      </style>
+
+      <cr-dialog id="dialog">
+        <div slot="title">$i18n{setTimeTitle}</div>
+        <div slot="body" id="dialogBody">
+          <div class="row">$i18n{prompt}</div>
+
+          <div>
+            <input id="dateInput" type="date" title="$i18n{dateLabel}"
+                on-blur="onTimeBlur_">
+            <input id="timeInput" type="time" title="$i18n{timeLabel}"
+                on-blur="onTimeBlur_">
+          </div>
+
+          <div id="timezone" class="row" hidden>
+            <label for="timezoneSelect">$i18n{timezone}</label>
+            <select id="timezoneSelect" on-change="onTimezoneChange_"></select>
+          </div>
+        </div>
+
+        <div slot="button-container">
+          <paper-button class="action-button" on-click="onDoneClick_">
+            $i18n{doneButton}
+          </paper-button>
+        </div>
+      </cr-dialog>
+    </template>
+    <script src="set_time.js"></script>
+  </dom-module>
+
+  <set-time></set-time>
+
+</body>
+</html>