md-settings: Added settings for fingerprint unlock.

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

Index: chrome/browser/resources/settings/people_page/fingerprint_list.js
diff --git a/chrome/browser/resources/settings/people_page/fingerprint_list.js b/chrome/browser/resources/settings/people_page/fingerprint_list.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd5dc77be6681ea5d9ad99821c41f2d76592fe74
--- /dev/null
+++ b/chrome/browser/resources/settings/people_page/fingerprint_list.js
@@ -0,0 +1,113 @@
+// 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
+ * Polymer element for displaying a list of fingerprints.
+ *
+ * Properties:
+ *    items: The fingerprints to display.
+ *
+ * Example:
+ *    <settings-fingerprint-list items="{{items}}"></settings-fingerprint-list>
+ */
+
+(function() {
+'use strict';
+
+/**
+ * The max number of fingerprints this list can hold.
+ * @type {number}
+ * @const
+ */
+var MAX_NUMBER_FINGERPRINTS_ALLOWED = 5;
+
+Polymer({
+  is: 'settings-fingerprint-list',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  properties: {
+    /**
+     * The list of fingerprint objects.
+     * @type {Array<Object>}
+     * @private
+     */
+    items: {
+      type: Array,
+      value: function() {
+        return [];
+      },
+      notify: true,
+    }
+  },
+
+  /**
+   * Returns the text to be displayed when the user has set up
+   * |MAX_NUMBER_FINGERPRINTS_ALLOWED|.
+   * @return {string}
+   * @private
+   */
+  getFingerprintButtonCannotAddText_: function() {
+    return this.i18n('lockScreenCannotAddFingerprint',
+                     MAX_NUMBER_FINGERPRINTS_ALLOWED);
+  },
+
+  /**
+   * Adds a fingerprint with a default name.
+   * @private
+   */
+  onAddFingerprint_: function() {

[jdufault, 2016/12/02 23:02:12]

If you invert the first for loop this function can be significantly simplified.

onAddFingerprint_: function() {
  // Find and add the first unused fingerprint name.
  for (var i = 0; i < MAX_NUMBER_FINGERPRINTS_ALLOWED; ++i) {
    var fingerprintName = this.i18n('lockScreenFingerprintName', i);
    if (this.items.includes(fingerprintName))
      continue;
    this.push('items', { 'name' : fingerprintName });
    break;
  }
}

[sammiequon, 2016/12/03 21:40:51]

Done.

+    // Determines what the newly added fingerprint's name should be. The name
+    // should be in the format "Finger x" where x should be the lowest unused
+    // number. A number is considered used if it matches the pattern "Finger x".
+    // Note that finger x or Fingerx are not considered matches.
+    // TODO(sammiequon): Add fingerprint using private API once it is ready.
+
+    // Find which numbers have the pattern finger x.
+    var numbersUsed = [];
+    for (var i = 0; i < this.items.length; ++i) {
+      var name = this.items[i]['name'];
+      for (var j = 1; j < MAX_NUMBER_FINGERPRINTS_ALLOWED; ++j) {
+        if (name == this.i18n('lockScreenFingerprintNewName', j.toString())) {
+          numbersUsed.push(j);
+          break;
+        }
+      }
+    }
+
+    // Find the lowest unused number.
+    var index = this.items.length + 1;
+    for (var i = 1; i <= this.items.length; ++i) {
+      if (!numbersUsed.includes(i)) {
+        index = i;
+        break;
+      }
+    }
+
+    this.push('items', { 'name': this.i18n('lockScreenFingerprintNewName',
+          index.toString())});
+  },
+
+  /**
+   * Deletes a fingerprint from |items|.
+   * @private
+   */
+  onItemDelete_: function(e) {
+    // TODO(sammiequon): Remove fingerprint using private API once it is ready.
+    this.splice('items', e.model.index, 1);
+  },
+
+  /**
+   * Checks whether another fingerprint can be added.
+   * @return {boolean}
+   * @private
+   */
+  canAddNewFingerprint_: function(length) {

[jdufault, 2016/12/02 23:02:12]

It seems like passing only the items length makes this function a leaky
abstraction; I think it would be better to pass the entire |items| array.

[sammiequon, 2016/12/03 21:40:51]

It seems like pop & slice do not notify the |items| has changed and only
|items.length|.

https://www.polymer-project.org/1.0/docs/devguide/model-data#override-dirty-c...
https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-notifySplices

can achieve this though something needs to be called after every array change.
What do you think?

[jdufault, 2016/12/05 22:29:36]

There is also items.splices that you could listen to, but I don't think that
would be much better than listening to items.length. Feel free to leave as is.

1:
https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chro...

+    return length < MAX_NUMBER_FINGERPRINTS_ALLOWED;
+  }
+});
+})();