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

chrome/browser/resources/options/options_page.css

 .hbox {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
 }
 
 .vbox {
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 
@@ skipping 593 matching lines @@
 .displaytable > section > * {
   display: table-cell;
   vertical-align: baseline;
   border-bottom: 1px solid #eeeeee;
 }
 
 /* do not display a border after the last section in the table */
 .displaytable:not([searching='true']) > section:last-child > *  {
   border-bottom: none;
 }
+
+/* Controlled setting indicator and bubble. */
+.controlled-setting-indicator {
+  display: inline-block;
+  /* Establish a containing block for absolutely positioning the bubble. */
+  position: relative;
+  vertical-align: text-bottom;
+}
+
+.controlled-setting-indicator[controlled-by] summary {
+  background-size: contain;
+  height: 16px;
+  width: 16px;
+}
+
+.controlled-setting-indicator summary::-webkit-details-marker {

[James Hawkins, 2011/11/28 21:52:19]

The double colon is not necessary, right?

[Mattias Nissler (ping if slow), 2011/11/28 22:26:19]

Actually, it is. At least the rule doesn't match if I remove one colon... 

Looking at the spec, this is actually a pseudo-element
(http://www.w3.org/TR/selectors/#pseudo-elements). In contrast to
pseudo-classes, pseudo-elements are declared with two colons. Turns out :before
and :after are as well, so I've changed these to two-colon versions below :)

+  display: none;
+}
+
+.controlled-setting-indicator[controlled-by='policy'] summary {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
+}
+
+.controlled-setting-indicator[controlled-by='policy'] summary:hover {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
+}
+
+.controlled-setting-indicator[controlled-by='extension'] summary {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
+}
+
+.controlled-setting-indicator[controlled-by='extension'] summary:hover {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
+}
+
+.controlled-setting-indicator[controlled-by='recommended'] summary {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
+}
+
+.controlled-setting-indicator[controlled-by='recommended'] summary:hover {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
+}
+
+.controlled-setting-bubble {
+  -webkit-margin-start: -20px;
+  background-color: white;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 2px #ddd;
+  margin-top: 10px;
+  padding: 10px;
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+}
+
+html[dir='ltr'] .controlled-setting-bubble {
+  left: 50%;
+}
+
+html[dir='rtl'] .controlled-setting-bubble {
+  right: 50%;
+}
+
+.controlled-setting-bubble:before {
+  -webkit-margin-start: 4px;
+  border-color: #ccc transparent;
+  border-style: solid;
+  border-width: 0px 5px 5px;

[James Hawkins, 2011/11/28 21:52:19]

s/0px/0/ here and elsewhere.

[Mattias Nissler (ping if slow), 2011/11/28 22:26:19]

Done.

+  content: '';

[James Hawkins, 2011/11/28 21:52:19]

Do you need to specify the empty content?

[Mattias Nissler (ping if slow), 2011/11/28 22:26:19]

Yes, the element doesn't get rendered otherwise.

+  position: absolute;
+  top: -5px;
+}
+
+.controlled-setting-bubble:after {
+  -webkit-margin-start: 5px;
+  border-color: white transparent;
+  border-style: solid;
+  border-width: 0px 4px 4px;
+  content: '';
+  position: absolute;
+  top: -4px;
+}
+
+.controlled-setting-bubble-text {
+  -webkit-padding-start: 30px;
+  background-repeat: no-repeat;
+  margin: 0px;
+  min-height: 32px;
+  min-width: 200px;
+}
+
+.controlled-setting-indicator[controlled-by='policy']
+    .controlled-setting-bubble-text {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
+}
+
+.controlled-setting-indicator[controlled-by='extension']
+    .controlled-setting-bubble-text {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
+}
+
+.controlled-setting-indicator[controlled-by='recommended']
+    .controlled-setting-bubble-text {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
+}
+
+html[dir='rtl'] .controlled-setting-bubble-text {
+  background-position: right top;
+}
+
+.controlled-setting-bubble-action {
+  padding: 0px !important;
+}