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 {
+  background-size: contain;

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

Do you need this? It will cause the image to scale if it's smaller than this
element, which we probably don't want.

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

The scaling is exactly why I put it. The reason is that we'll need the indicator
in different places at different sizes. We could include properly-sized images
for all that, but we'll still have the controlledBy x size matrix and have to
write CSS rules for each combination. So I figured having to write rules only
for controlledBy and having the browser scale the image to the right size is a
reasonable trade-off in this case. Let me know if you disagree.

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

No, that makes sense. I realized why you did it after I saw the screenshots.

+  display: inline-block;
+  height: 16px;
+  position: relative;

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

Maybe add a comment to explain why position:relative is needed here.

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

Done.

+  vertical-align: text-bottom;
+  width: 16px;
+}
+
+.controlled-setting-indicator[controlledBy='policy'] {
+  background-image: url('chrome://theme/IDR_MANAGED_GRAY');
+}
+
+.controlled-setting-indicator[controlledBy='extension'] {
+  background-image: url('chrome://theme/IDR_MANAGED_GRAY');
+}
+
+.controlled-setting-indicator[controlledBy='recommended'] {
+  background-image: url('chrome://theme/IDR_MANAGED_GRAY');
+}
+
+.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%;
+}
+
+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;
+  content: '';
+  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: 40px;
+  background-image: url('chrome://theme/IDR_MANAGED_COLOR');
+  background-repeat: no-repeat;
+  min-height: 32px;
+  min-width: 200px;
+}
+
+html[dir='rtl'] .controlled-setting-bubble-text {
+  background-position: right top;
+}
+
+.controlled-setting-bubble-action {
+  padding: 0px !important;
+}