Add a settings screen that lets the user choose how they unlock their device.

chrome/browser/resources/settings/people_page/quick_unlock_choose_method.js

+// Copyright 2016 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
+ * 'settings-quick-unlock-choose-method' allows the user to change how they
+ * unlock their device. Note that setting up the unlock method is delegated
+ * to other elements.
+ *
+ * Example:
+ *
+ * <settings-quick-unlock-choose-method
+ *   set-modes="[[quickUnlockSetModes]]"
+ *   current-route="{{currentRoute}}"
+ *   prefs="{{prefs}}">
+ * </settings-quick-unlock-choose-method>
+ */
+
+(function() {
+'use strict';
+
+/** @const */ var ENABLE_LOCK_SCREEN_PREF = 'settings.enable_screen_lock';
+
+/** @enum {string} */
+var QuickUnlockUnlockType = {
+  VALUE_PENDING: 'value_pending',
+  NONE: 'none',
+  PASSWORD: 'password',
+  PIN_PASSWORD: 'pin+password'
+};
+
+Polymer({
+  is: 'settings-quick-unlock-choose-method',
+
+  behaviors: [
+    PrefsBehavior, QuickUnlockValidatingBehavior
+  ],
+
+  properties: {
+    /** Preferences state. */
+    prefs: {
+      type: Object,
+      notify: true,
+    },
+
+    /**
+     * The currently selected unlock type.
+     * @type {!QuickUnlockUnlockType}
+     * @private
+     */
+    selectedUnlockType_: {
+      type: String,
+      notify: true,
+      value: QuickUnlockUnlockType.VALUE_PENDING,
+      observer: 'selectedUnlockTypeChanged_'
+    }
+  },
+
+  observers: [
+    'onRouteChanged_(currentRoute)',
+    'onSetModesChanged_(setModes)'
+  ],
+
+  /** @override */
+  attached: function() {
+    CrSettingsPrefs.initialized.then(this.updateUnlockType_.bind(this));
+
+    chrome.settingsPrivate.onPrefsChanged.addListener(function(prefs) {

[tommycli, 2016/06/29 22:56:09]

This needs a corresponding removal in detached right?

[jdufault, 2016/06/30 18:10:18]

Done.

+      for (var i = 0; i < prefs.length; ++i) {
+        if (prefs[i].key == ENABLE_LOCK_SCREEN_PREF)
+          this.updateUnlockType_();
+      }
+    }.bind(this));
+
+    chrome.quickUnlockPrivate.onActiveModesChanged.addListener(

[tommycli, 2016/06/29 22:56:09]

Same here right?

[jdufault, 2016/06/30 18:10:18]

Done.

+        this.updateUnlockType_.bind(this));
+
+    this.checkForPassword();
+  },
+
+  /** @private */
+  onRouteChanged_: function() {
+    if (this.isScreenActive(QuickUnlockScreen.CHOOSE_METHOD))
+      this.checkForPassword();
+  },
+
+  /** @private */
+  onSetModesChanged_: function() {
+    if (this.isScreenActive(QuickUnlockScreen.CHOOSE_METHOD))
+      this.checkForPassword();
+  },
+
+  /**
+   * Updates the selected unlock type radio group. This function will get called
+   * after preferences are initialized, after the quick unlock mode has been
+   * changed, and after the lockscreen preference has changed.
+   *
+   * @private
+   */
+  updateUnlockType_: function() {
+    // The quickUnlockPrivate.onActiveModesChanged event could trigger this
+    // function before CrSettingsPrefs is initialized if another settings page
+    // changes the quick unlock state.
+    if (!CrSettingsPrefs.isInitialized)
+      return;
+
+    var hasScreenLock = this.getPref(ENABLE_LOCK_SCREEN_PREF).value;

[tommycli, 2016/06/29 22:56:09]

Just move that into the if predicate

[jdufault, 2016/06/30 18:10:18]

Done.

+    if (!hasScreenLock) {
+      this.selectedUnlockType_ = QuickUnlockUnlockType.NONE;
+      return;
+    }
+
+    chrome.quickUnlockPrivate.getActiveModes(function(modes) {
+      if (modes.includes(chrome.quickUnlockPrivate.QuickUnlockMode.PIN)) {
+        this.selectedUnlockType_ = QuickUnlockUnlockType.PIN_PASSWORD;
+      } else if (this.selectedUnlockType_ !=
+                 QuickUnlockUnlockType.PIN_PASSWORD) {
+        // We don't want to clobber an existing PIN+PASSWORD state because the
+        // user needs to configure that option before actually using it.
+        //
+        // Specifically, this check is needed because this function gets called
+        // by the pref system after changing the unlock type from NONE to
+        // PIN+PASSWORD. Without the conditional assignment, this function would
+        // change the PIN+PASSWORD lock type to PASSWORD because the PIN hasn't
+        // been configured yet.
+        this.selectedUnlockType_ = QuickUnlockUnlockType.PASSWORD;
+      }
+    }.bind(this));
+  },
+
+  /**
+   * Called when the unlock type has changed.
+   * @param {!string} selected The current unlock type.
+   * @param {?string} previous The old unlock type. undefined if not present.
+   * @private
+   */
+  selectedUnlockTypeChanged_: function(selected, previous) {
+    // This method gets invoked when setting the initial value from the existing
+    // state. In that case, we don't need to bother updating the prefs.
+    if (!previous)
+      return;
+
+    var showLockScreen = selected != QuickUnlockUnlockType.NONE;
+    var showPinConfiguration = selected == QuickUnlockUnlockType.PIN_PASSWORD;

[tommycli, 2016/06/29 22:56:09]

Since these vars are only used once each and are pretty self explanatory,
probably just inline them.

[jdufault, 2016/06/30 18:10:18]

Done.

+
+    this.setPrefValue(ENABLE_LOCK_SCREEN_PREF, showLockScreen);
+    if (!showPinConfiguration) {
+      this.setModes.call(null, [], [], function(didSet) {

[tommycli, 2016/06/29 22:56:09]

I think setModes already has the password partially applied right?

[jdufault, 2016/06/30 18:10:18]

null is for the `this` object. I'd prefer to use the `this.setModes([], [],
...)` syntax, but closure complains that it's not a callable type.

+        if (!didSet) {

[tommycli, 2016/06/29 22:56:09]

Is it standard to print a console error on an unexpected result? What's the
expected UI?

[jdufault, 2016/06/30 18:10:18]

No UI right now, unfortunately. Right now, this function call will only ever
fail if the API is used incorrectly.

[tommycli, 2016/07/01 19:02:42]

Ah, if it can only fail due to programmer error, I would use:

assert(didSet, 'Failed to clear quick unlock modes.');

[jdufault, 2016/07/13 00:19:22]

Done.

+          console.error('Failed to clear quick unlock modes');
+        }
+      }.bind(this));
+    }
+  },
+
+  /**
+   * Used to show/hide the configure button for PIN unlock.
+   * @param {!string} selectedUnlockType The current unlock type. Used to let
+   * polymer know about the dependency.
+   * @private
+   */
+  computeConfigureContainerStyle_: function(selectedUnlockType) {

[tommycli, 2016/06/29 22:56:09]

Is there a hard UI requirement spelled out to make this fade in and out? If not,
I would say other section of settings don't do this, and I would suggest just
hiding and unhiding with hidden=

[jdufault, 2016/06/30 18:10:18]

No, there's no hard UI requirement, but using hidden looks bad, because the
radio group is also animating in/out. Without the opacity animation, the button
and warning will appear before the radio button finishes animating.

The amount of code is almost the same, and approaches are also conceptually
identical.

[tommycli, 2016/07/01 19:02:42]

Where's the code to the radio group animating in and out?

If UI team didn't specify an animation, I'd recommend against it, since all the
other controls in Settings don't do the opacity animation.

[jdufault, 2016/07/13 00:19:22]

The radio group animation is part of paper-radio-group.

I've removed the opacity animation. If there are complaints I can always add it
back.

+    if (selectedUnlockType == QuickUnlockUnlockType.PIN_PASSWORD)
+      return 'opacity: 1;';
+    return 'opacity: 0;';
+  },
+
+  /** @private */
+  onConfigurePin_: function() {
+    this.currentRoute = {
+      page: 'basic',
+      section: 'people',
+      subpage: [QuickUnlockScreen.CHOOSE_METHOD, QuickUnlockScreen.SETUP_PIN]
+    };
+  },
+});
+
+})();