cr-settings-checkbox: Add 'inverted' property.

This will allow us to use it in the Users page (and potentially others) for the
prefs where the checkbox being checked means the boolean pref is disabled, and
unchecked means enabled.

Example usage:

<cr-settings-checkbox
          pref="{{prefs.cros.accounts.allowGuest}}" inverted>
</cr-settings-checkbox>

BUG=495858

Review URL: https://codereview.chromium.org/1156783004

Cr-Commit-Position: refs/heads/master@{#333110}

chrome/browser/resources/settings/checkbox/checkbox.html

@@ -9,7 +9,7 @@
     <cr-events id="events"></cr-events>
     <cr-settings-pref-tracker pref="[[pref]]"></cr-settings-pref-tracker>
 
-    <cr-checkbox id="checkbox" checked="{{pref.value}}"
+    <cr-checkbox id="checkbox" checked="{{checked}}"
         disabled="[[pref.disabled]]">
       <span class="main-label">{{label}}</span>
       <span class="sub-label">{{subLabel}}</span>

chrome/browser/resources/settings/checkbox/checkbox.js

@@ -23,7 +23,18 @@ Polymer({
      */
     pref: {
       type: Object,
-      notify: true,
+      notify: true
+    },
+
+    inverted: {
+      type: Boolean,
+      value: false
+    },
+
+    checked: {
+      type: Boolean,
+      value: false,
+      observer: 'checkedChanged_'
     },
 
     label: {
@@ -37,8 +48,32 @@ Polymer({
     },
   },
 
+  observers: [
+    'prefValueChanged_(pref.value)'
+  ],
+
   /** @override */
   ready: function() {
     this.$.events.forward(this.$.checkbox, ['change']);
   },
+
+  /** @private */
+  prefValueChanged_: function(prefValue) {
+    // prefValue is initially undefined when Polymer initializes pref.
+    if (prefValue !== undefined) {
+      this.checked = this.getNewValue_(prefValue);
+    }
+  },
+
+  /** @private */
+  checkedChanged_: function() {
+    if (this.pref) {
+      this.pref.value = this.getNewValue_(this.checked);
+    }
+  },
+
+  /** @private */
+  getNewValue_: function(val) {
+    return this.inverted ? !val : val;
+  }
 });