Controlled settings indicator and bubble for chrome://preferences.

chrome/browser/resources/options/controlled_setting.js

Index: chrome/browser/resources/options/controlled_setting.js
diff --git a/chrome/browser/resources/options/controlled_setting.js b/chrome/browser/resources/options/controlled_setting.js
new file mode 100644
index 0000000000000000000000000000000000000000..6fb48975210324b3da340421d04cde000f80bf9c
--- /dev/null
+++ b/chrome/browser/resources/options/controlled_setting.js
@@ -0,0 +1,124 @@
+// Copyright (c) 2011 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.
+
+cr.define('options', function() {
+
+  var Preferences = options.Preferences;
+
+  /**
+   * A controlled setting indicator that can be placed on a setting as an
+   * indicator that the value is controlled by some external entity such as
+   * policy or an extension.
+   * @constructor
+   * @extends {HTMLSpanElement}
+   */
+  var ControlledSettingIndicator = cr.ui.define('span');
+
+  ControlledSettingIndicator.prototype = {
+    __proto__: HTMLSpanElement.prototype,
+
+    /**
+     * Decorates the base element to show the proper icon.
+     */
+    decorate: function() {
+      var self = this;
+
+      // If there is a pref, track it's controlledBy property in order to be

[Patrick Dubroy, 2011/11/21 12:41:16]

its, not it's.

[Mattias Nissler (ping if slow), 2011/11/21 13:45:01]

Done.

+      // able to bring up the correct bubble.
+      if (this.hasAttribute('pref')) {
+        Preferences.getInstance().addEventListener(
+            this.getAttribute('pref'),
+            function(event) {
+              if (event.value && event.value['controlledBy'])
+                self.setAttribute('controlledBy', event.value['controlledBy']);
+              else
+                self.removeAttribute('controlledBy');
+            });
+      }
+
+      self.addEventListener('click', self.show_);
+    },
+
+    /**
+     * Constructs the bubble DOM tree and shows it.
+     * @private
+     */
+    show_: function() {
+      var self = this;
+      var doc = self.ownerDocument;
+      self.hide_();
+
+      // Work out the bubble text.
+      defaultStrings = {
+        'policy' : localStrings.getString('controlledSettingPolicy'),
+        'extension' : localStrings.getString('controlledSettingExtension'),
+        'recommended' : localStrings.getString('controlledSettingRecommended'),
+      };
+
+      // No controller, no bubble.
+      var controller = self.getAttribute('controlledBy');
+      if (!controller || !controller in defaultStrings)
+        return;
+
+      text = defaultStrings[controller];
+
+      // Apply text overrides.
+      if (self.hasAttribute('text' + controller))
+        text = self.getAttribute('text' + controller);
+
+      // Create the DOM tree.
+      var bubbleSpan = doc.createElement('div');

[Patrick Dubroy, 2011/11/21 12:41:16]

Is bubbleSpan the right name for this? :-)

[Mattias Nissler (ping if slow), 2011/11/21 13:45:01]

Changed to bubbleContainer.

+      bubbleSpan.className = 'controlled-setting-bubble';
+
+      var bubbleText = doc.createElement('div');
+      bubbleText.className = 'controlled-setting-bubble-text';
+      bubbleText.appendChild(doc.createTextNode(text));

[Patrick Dubroy, 2011/11/21 12:41:16]

Wouldn't it be simpler to use:

    bubbleText.textContent = text;

[Mattias Nissler (ping if slow), 2011/11/21 13:45:01]

I was writing this when I had inserted more children before ;)
Done.

+
+      var pref = self.getAttribute('pref');
+      if (controller == 'recommended' && pref) {
+        var container = doc.createElement('div');
+        var action = doc.createElement('button');
+        action.classList.add('link-button');
+        action.classList.add('controlled-setting-bubble-action');
+        action.textContent =
+            localStrings.getString('controlledSettingApplyRecommendation');
+        action.addEventListener(
+            'click',
+            function(e) {
+              Preferences.clearPref(pref);
+              self.hide_();
+              e.stopPropagation();

[Patrick Dubroy, 2011/11/21 12:41:16]

Why do you need to stop propagation here?

[Mattias Nissler (ping if slow), 2011/11/21 13:45:01]

Because otherwise the click handler on the icon re-builds the bubble (which I
figured is a good thing if people click on the icon again in case the pref
changed to be controlled by something else).

+            });
+        container.appendChild(action);
+        bubbleText.appendChild(container);
+      }
+
+      bubbleSpan.appendChild(bubbleText);
+      self.appendChild(bubbleSpan);
+
+      // One-time bubble-closing event handler.
+      doc.addEventListener(
+          'click',
+          function() {
+            self.hide_();
+            doc.removeEventListener('click', arguments.callee, true);
+          },
+          true);
+    },
+
+    /**
+     * Hides the bubble.
+     * @private
+     */
+    hide_: function() {

[Patrick Dubroy, 2011/11/21 12:41:16]

I think it would be better to just remove the elements that you created.
Otherwise, it might be confusing someone tries to add other children to the
span, and they are mysteriously deleted.

[Mattias Nissler (ping if slow), 2011/11/21 13:45:01]

Done.

+      while (this.firstChild)
+        this.removeChild(this.firstChild);
+    }
+  };
+
+  // Export.
+  return {
+    ControlledSettingIndicator : ControlledSettingIndicator
+  };
+});