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

chrome/browser/resources/options/controlled_setting.js

+// 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 its controlledBy property in order to be 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;
+
+      var text = defaultStrings[controller];
+
+      // Apply text overrides.
+      if (self.hasAttribute('text' + controller))
+        text = self.getAttribute('text' + controller);
+
+      // Create the DOM tree.
+      var bubbleContainer = doc.createElement('div');
+      bubbleContainer.className = 'controlled-setting-bubble';
+
+      var bubbleText = doc.createElement('div');
+      bubbleText.className = 'controlled-setting-bubble-text';
+      bubbleText.textContent = text;
+
+      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_();
+              // Stop propagation s.t. the click handler on the indicator icon

[Patrick Dubroy, 2011/11/21 13:53:19]

Nit: I don't think this is worth abbreviating. It took me a sec to realize that
"s.t." was short for "so that". AFAIK that's not a common abbreviation. 

+              // doesn't trigger and rebuild the bubble.
+              e.stopPropagation();
+            });
+        container.appendChild(action);
+        bubbleText.appendChild(container);
+      }
+
+      bubbleContainer.appendChild(bubbleText);
+      self.appendChild(bubbleContainer);
+
+      // 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() {
+      var bubble = this.querySelector('.controlled-setting-bubble');
+      if (bubble)
+        this.removeChild(bubble);
+    }
+  };
+
+  // Export.
+  return {
+    ControlledSettingIndicator : ControlledSettingIndicator
+  };
+});