MD Settings: fix policy indicator rendering bug in <controlled-button>

A policy icon was being rendered when enforced, but without an icon to
show. This wasn't a big deal as it was invisible and taking up empty
space. But when flipping the position of this indicator, as in
https://codereview.chromium.org/2615093003/, it visually matters.

BUG=673953
R=dschuyler@chromium.org
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2611243002
Cr-Commit-Position: refs/heads/master@{#441844}

chrome/browser/resources/settings/controls/compiled_resources2.gyp

@@ -6,6 +6,7 @@
     {
       'target_name': 'controlled_button',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_indicator_behavior',
         '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_pref_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         'pref_control_behavior',

chrome/browser/resources/settings/controls/controlled_button.html

 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
 <link rel="import" href="/controls/pref_control_behavior.html">
+<link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="controlled-button">
@@ -32,7 +34,7 @@
       <content></content>
     </paper-button>
 
-    <template is="dom-if" if="[[controlled_]]">
+    <template is="dom-if" if="[[showIndicator_(pref)]]" restamp>
       <cr-policy-pref-indicator pref="[[pref]]" on-tap="onIndicatorTap_">
       </cr-policy-pref-indicator>
     </template>

chrome/browser/resources/settings/controls/controlled_button.js

@@ -5,7 +5,11 @@
 Polymer({
   is: 'controlled-button',
 
-  behaviors: [CrPolicyPrefBehavior, PrefControlBehavior],
+  behaviors: [
+    CrPolicyIndicatorBehavior,
+    CrPolicyPrefBehavior,
+    PrefControlBehavior,
+  ],
 
   properties: {
     /** @private */
@@ -33,4 +37,16 @@ Polymer({
     e.preventDefault();
     e.stopPropagation();
   },
+
+  /**
+   * @param {!chrome.settingsPrivate.PrefObject} pref
+   * @return {boolean} Whether to show a controlled by indicator.
+   * @private
+   */
+  showIndicator_: function(pref) {
+    if (!pref.controlledBy || !pref.enforcement)
+      return false;
+    var indicator = this.getIndicatorType(pref.controlledBy, pref.enforcement);
+    return this.isIndicatorVisible(indicator);
+  },
 });

chrome/test/data/webui/settings/controlled_button_tests.js

@@ -4,34 +4,54 @@
 
 suite('controlled button', function() {
   /** @type {ControlledButtonElement} */
-  var button;
+  var controlledButton;
 
   /** @type {!chrome.settingsPrivate.PrefObject} */
-  var pref = {
+  var uncontrolledPref = {
     key: 'test',
     type: chrome.settingsPrivate.PrefType.BOOLEAN,
     value: true
   };
 
+  /** @type {!chrome.settingsPrivate.PrefObject} */
+  var extensionControlledPref = Object.assign({
+    controlledBy: chrome.settingsPrivate.ControlledBy.EXTENSION,
+    enforcement: chrome.settingsPrivate.Enforcement.ENFORCED,
+  }, uncontrolledPref);
+
+  /** @type {!chrome.settingsPrivate.PrefObject} */
+  var policyControlledPref = Object.assign({
+    controlledBy: chrome.settingsPrivate.ControlledBy.USER_POLICY,
+    enforcement: chrome.settingsPrivate.Enforcement.ENFORCED,
+  }, uncontrolledPref);
+
   setup(function() {
     PolymerTest.clearBody();
-    button = document.createElement('controlled-button');
-    button.pref = pref;
-    document.body.appendChild(button);
+    controlledButton = document.createElement('controlled-button');
+    controlledButton.pref = uncontrolledPref;
+    document.body.appendChild(controlledButton);
+    Polymer.dom.flush();
   });
 
-  test('disables when pref is managed', function() {
-    button.set('pref.enforcement', chrome.settingsPrivate.Enforcement.ENFORCED);
+  test('controlled prefs', function() {
+    assertFalse(controlledButton.$$('paper-button').disabled);
+    assertFalse(!!controlledButton.$$('cr-policy-pref-indicator'));
+
+    controlledButton.pref = extensionControlledPref;
     Polymer.dom.flush();
-    assertTrue(button.$$('paper-button').disabled);
+    assertTrue(controlledButton.$$('paper-button').disabled);
+    assertFalse(!!controlledButton.$$('cr-policy-pref-indicator'));
 
-    var indicator = button.$$('cr-policy-pref-indicator');
+    controlledButton.pref = policyControlledPref;
+    Polymer.dom.flush();
+    assertTrue(controlledButton.$$('paper-button').disabled);
+    var indicator = controlledButton.$$('cr-policy-pref-indicator');
     assertTrue(!!indicator);
     assertGT(indicator.clientHeight, 0);
 
-    button.set('pref.enforcement', undefined);
+    controlledButton.pref = uncontrolledPref;
     Polymer.dom.flush();
-    assertFalse(button.$$('paper-button').disabled);
-    assertEquals(0, indicator.clientHeight);
+    assertFalse(controlledButton.$$('paper-button').disabled);
+    assertFalse(!!controlledButton.$$('cr-policy-pref-indicator'));
   });
 });