ChromeOS OOBE: Implement Advanced options menu screen

This Cl adds Advanced options menu screen to ChromeOS OOBE.

Bug: 709263
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I8c759981d525f15c8c9b90cb11f5c29d9b813c7d
Reviewed-on: https://chromium-review.googlesource.com/591049
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#490638}

chrome/browser/resources/chromeos/login/oobe_welcome.css

@@ -68,3 +68,36 @@
 #timezoneScreen .bottom-buttons {
   padding: 0 24px;
 }
+
+/************* Advanced Options screen **************/
+#oobeAdvancedOptionsScreen #oobeBoxIcon {
+  border: 1px solid  rgba(0, 0, 0, 0.2);
+  height: 32px;
+  min-height: 32px;
+  min-width: 32px;
+  width: 32px;
+}
+
+#oobeAdvancedOptionsScreen .advanced-options-entry {
+  border-top: var(--oobe-dialog-list-item-border);
+  height: 56px;
+  padding: 0 10px;
+}
+
+#oobeAdvancedOptionsScreen .advanced-options-entry:last-of-type {
+  border-bottom: var(--oobe-dialog-list-item-border);
+}
+
+#oobeAdvancedOptionsScreen .advanced-option-title {
+  color: rgba(0, 0, 0, 0.87);
+  font: 13px Roboto, sans-serif;
+}
+
+#oobeAdvancedOptionsScreen .advanced-option-subtitle {
+  color: rgba(0, 0, 0, 0.54);
+  font: 13px Roboto, sans-serif;
+}
+
+#oobeAdvancedOptionsScreen .bottom-buttons {
+  padding: 0 24px;
+}

chrome/browser/resources/chromeos/login/oobe_welcome.html

@@ -90,6 +90,7 @@
         on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
         on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"
         on-next-button-clicked="onWelcomeNextButtonClicked_"
+        on-launch-advanced-options="onWelcomeLaunchAdvancedOptions_"
         timezone-button-visible=
             "[[isTimezoneButtonVisible_(highlightStrength)]]"
         debugging-link-visible="[[debuggingLinkVisible]]">
@@ -258,6 +259,49 @@
         </oobe-text-button>
       </div>
     </oobe-dialog>
+    <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog" hidden has-buttons
+        i18n-values="aria-label:advancedOptionsSectionTitle">
+      <div id="oobeBoxIcon" class="oobe-icon"></div>
+      <div class="header">
+        <h1 class="title">
+          [[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]
+        </h1>
+      </div>
+      <div class="footer layout vertical">
+        <div class="flex layout vertical center-justified
+            advanced-options-entry" on-tap="onEEBootstrappingClicked_">
+          <div class="advanced-option-title">
+            [[i18nDynamic(locale, 'advancedOptionsEEBootstrappingTitle')]]
+          </div>
+          <div class="advanced-option-subtitle">
+            [[i18nDynamic(locale, 'advancedOptionsEEBootstrappingSubtitle')]]
+          </div>
+        </div>
+        <div class="flex layout vertical center-justified
+            advanced-options-entry" on-tap="onCFMBootstrappingClicked_">
+          <div class="advanced-option-title">
+            [[i18nDynamic(locale, 'advancedOptionsCFMSetupTitle')]]
+          </div>
+          <div class="advanced-option-subtitle">
+            [[i18nDynamic(locale, 'advancedOptionsCFMSetupSubtitle')]]
+          </div>
+        </div>
+        <div class="flex layout vertical center-justified
+            advanced-options-entry" on-tap="onDeviceRequisitionClicked_">
+          <div class="advanced-option-title">
+            [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionTitle')]]
+          </div>
+          <div class="advanced-option-subtitle">
+            [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionSubtitle')]]
+          </div>
+        </div>
+      </div>
+      <div class="bottom-buttons layout horizontal end-justified">
+        <oobe-text-button inverse on-tap="closeAdvancedOptionsSection_">
+          <div>[[i18nDynamic(locale, 'oobeOKButtonText')]]</div>
+        </oobe-text-button>
+      </div>
+    </oobe-dialog>
     <oobe-dialog id="networkSelectionScreen" role="dialog" hidden has-buttons
         i18n-values="aria-label:networkSectionTitle"
         on-show-dialog="onNetworkSelectionScreenShown_">

chrome/browser/resources/chromeos/login/oobe_welcome.js

@@ -258,6 +258,15 @@ Polymer({
     this.showScreen_('networkSelectionScreen');
   },
 
+  /**
+   * Handle "launch-advanced-options" button for "Welcome" screen.
+   *
+   * @private
+   */
+  onWelcomeLaunchAdvancedOptions_: function() {
+    this.showScreen_('oobeAdvancedOptionsScreen');
+  },
+
   /**
    * Handle "Language" button for "Welcome" screen.
    *
@@ -504,4 +513,42 @@ Polymer({
 
     this.screen.onTimezoneSelected_(item.value);
   },
+
+  /** ******************** AdvancedOptions section ******************* */
+
+  /**
+   * Handle "OK" button for "AdvancedOptions Selection" screen.
+   *
+   * @private
+   */
+  closeAdvancedOptionsSection_: function() {
+    this.showScreen_('welcomeScreen');
+  },
+
+  /**
+   * Handle click on "Enable remote enrollment" option.
+   *
+   * @private
+   */
+  onEEBootstrappingClicked_: function() {
+    cr.ui.Oobe.handleAccelerator(ACCELERATOR_BOOTSTRAPPING_SLAVE);
+  },
+
+  /**
+   * Handle click on "Set up as CFM device" option.
+   *
+   * @private
+   */
+  onCFMBootstrappingClicked_: function() {
+    cr.ui.Oobe.handleAccelerator(ACCELERATOR_DEVICE_REQUISITION_REMORA);
+  },
+
+  /**
+   * Handle click on "Device requisition" option.
+   *
+   * @private
+   */
+  onDeviceRequisitionClicked_: function() {
+    cr.ui.Oobe.handleAccelerator(ACCELERATOR_DEVICE_REQUISITION);
+  },
 });

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.js

@@ -2,86 +2,158 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Polymer({
-  is: 'oobe-welcome-dialog',
-  properties: {
+{
+  var LONG_TOUCH_TIME_MS = 1000;
+
+  function LongTouchDetector(element, callback) {
+    this.callback_ = callback;
+
+    element.addEventListener('touchstart', this.onTouchStart_.bind(this));
+    element.addEventListener('touchend', this.killTimer_.bind(this));
+    element.addEventListener('touchcancel', this.killTimer_.bind(this));
+
+    element.addEventListener('mousedown', this.onTouchStart_.bind(this));
+    element.addEventListener('mouseup', this.killTimer_.bind(this));
+    element.addEventListener('mouseleave', this.killTimer_.bind(this));
+  }
+
+  LongTouchDetector.prototype = {
+    /**
+     * This is timeout ID used to kill window timeout that fires "detected"
+     * callback if touch event was cancelled.
+     *
+     * @private {number|null}
+     */
+    timeoutId_: null,
+
+    /**
+     *  window.setTimeout() callback.
+     *
+     * @private
+     */
+    onTimeout_: function() {
+      this.killTimer_();
+      this.callback_();
+    },
+
+    /**
+     * @private
+     */
+    onTouchStart_: function() {
+      this.killTimer_();
+      this.timeoutId_ = window.setTimeout(
+          this.onTimeout_.bind(this, this.attempt_), LONG_TOUCH_TIME_MS);
+    },
+
+    /**
+     * @private
+     */
+    killTimer_: function() {
+      if (this.timeoutId_ === null)
+        return;
+
+      window.clearTimeout(this.timeoutId_);
+      this.timeoutId_ = null;
+    },
+  };
+
+  Polymer({
+    is: 'oobe-welcome-dialog',
+    properties: {
+      /**
+       * Currently selected system language (display name).
+       */
+      currentLanguage: {
+        type: String,
+        value: '',
+      },
+
+      /**
+       * Controls visibility of "Timezone" button.
+       */
+      timezoneButtonVisible: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * Controls displaying of "Enable debugging features" link.
+       */
+      debuggingLinkVisible: Boolean,
+    },
+
+    /**
+     * @private {LongTouchDetector}
+     */
+    titleLongTouchDetector_: null,
+
     /**
-     * Currently selected system language (display name).
+     * This is stored ID of currently focused element to restore id on returns
+     * to this dialog from Language / Timezone Selection dialogs.
+     */
+    focusedElement_: 'languageSelectionButton',
+
+    onLanguageClicked_: function() {
+      this.focusedElement_ = 'languageSelectionButton';
+      this.fire('language-button-clicked');
+    },
+
+    onAccessibilityClicked_: function() {
+      this.focusedElement_ = 'accessibilitySettingsButton';
+      this.fire('accessibility-button-clicked');
+    },
+
+    onTimezoneClicked_: function() {
+      this.focusedElement_ = 'timezoneSettingsButton';
+      this.fire('timezone-button-clicked');
+    },
+
+    onNextClicked_: function() {
+      this.focusedElement_ = 'welcomeNextButton';
+      this.fire('next-button-clicked');
+    },
+
+    onDebuggingLinkClicked_: function() {
+      chrome.send(
+          'login.NetworkScreen.userActed', ['connect-debugging-features']);
+    },
+
+    /*
+     * This is called from titleLongTouchDetector_ when long touch is detected.
+     *
+     * @private
      */
-    currentLanguage: {
-      type: String,
-      value: '',
+    onTitleLongTouch_: function() {
+      this.fire('launch-advanced-options');
+    },
+
+    attached: function() {
+      this.titleLongTouchDetector_ = new LongTouchDetector(
+          this.$.title, this.onTitleLongTouch_.bind(this));
+      this.focus();
+    },
+
+    focus: function() {
+      var focusedElement = this.$[this.focusedElement_];
+      if (focusedElement)
+        focusedElement.focus();
     },
 
     /**
-     * Controls visibility of "Timezone" button.
+     * This is called from oobe_welcome when this dialog is shown.
      */
-    timezoneButtonVisible: {
-      type: Boolean,
-      value: false,
+    show: function() {
+      this.focus();
     },
 
     /**
-     * Controls displaying of "Enable debugging features" link.
+     * This function formats message for labels.
+     * @param String label i18n string ID.
+     * @param String parameter i18n string parameter.
+     * @private
      */
-    debuggingLinkVisible: Boolean,
-  },
-
-  /**
-   * This is stored ID of currently focused element to restore id on returns
-   * to this dialog from Language / Timezone Selection dialogs.
-   */
-  focusedElement_: 'languageSelectionButton',
-
-  onLanguageClicked_: function() {
-    this.focusedElement_ = 'languageSelectionButton';
-    this.fire('language-button-clicked');
-  },
-
-  onAccessibilityClicked_: function() {
-    this.focusedElement_ = 'accessibilitySettingsButton';
-    this.fire('accessibility-button-clicked');
-  },
-
-  onTimezoneClicked_: function() {
-    this.focusedElement_ = 'timezoneSettingsButton';
-    this.fire('timezone-button-clicked');
-  },
-
-  onNextClicked_: function() {
-    this.focusedElement_ = 'welcomeNextButton';
-    this.fire('next-button-clicked');
-  },
-
-  onDebuggingLinkClicked_: function() {
-    chrome.send(
-        'login.NetworkScreen.userActed', ['connect-debugging-features']);
-  },
-
-  attached: function() {
-    this.focus();
-  },
-
-  focus: function() {
-    var focusedElement = this.$[this.focusedElement_];
-    if (focusedElement)
-      focusedElement.focus();
-  },
-
-  /**
-   * This is called from oobe_welcome when this dialog is shown.
-   */
-  show: function() {
-    this.focus();
-  },
-
-  /**
-   * This function formats message for labels.
-   * @param String label i18n string ID.
-   * @param String parameter i18n string parameter.
-   * @private
-   */
-  formatMessage_: function(label, parameter) {
-    return loadTimeData.getStringF(label, parameter);
-  },
-});
+    formatMessage_: function(label, parameter) {
+      return loadTimeData.getStringF(label, parameter);
+    },
+  });
+}

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

@@ -168,6 +168,20 @@ void NetworkScreenHandler::DeclareLocalizedValues(
   builder->Add("timezoneSectionTitle", IDS_TIMEZONE_SECTION_TITLE);
   builder->Add("networkSectionTitle", IDS_NETWORK_SECTION_TITLE);
   builder->Add("networkSectionHint", IDS_NETWORK_SECTION_HINT);
+  builder->Add("advancedOptionsSectionTitle",
+               IDS_OOBE_ADVANCED_OPTIONS_SCREEN_TITLE);
+  builder->Add("advancedOptionsEEBootstrappingTitle",
+               IDS_OOBE_ADVANCED_OPTIONS_EE_BOOTSTRAPPING_TITLE);
+  builder->Add("advancedOptionsEEBootstrappingSubtitle",
+               IDS_OOBE_ADVANCED_OPTIONS_EE_BOOTSTRAPPING_SUBTITLE);
+  builder->Add("advancedOptionsCFMSetupTitle",
+               IDS_OOBE_ADVANCED_OPTIONS_CFM_SETUP_TITLE);
+  builder->Add("advancedOptionsCFMSetupSubtitle",
+               IDS_OOBE_ADVANCED_OPTIONS_CFM_SETUP_SUBTITLE);
+  builder->Add("advancedOptionsDeviceRequisitionTitle",
+               IDS_OOBE_ADVANCED_OPTIONS_DEVICE_REQUISITION_TITLE);
+  builder->Add("advancedOptionsDeviceRequisitionSubtitle",
+               IDS_OOBE_ADVANCED_OPTIONS_DEVICE_REQUISITION_SUBTITLE);
 
   builder->Add("languageDropdownTitle", IDS_LANGUAGE_DROPDOWN_TITLE);
   builder->Add("languageDropdownLabel", IDS_LANGUAGE_DROPDOWN_LABEL);