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

chrome/browser/resources/options/options_page.css

Index: chrome/browser/resources/options/options_page.css
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index ce77fb60dbc2e14abc1aeeca6b32a62444301d96..0af61202fcb3d83769134cc335317df1a1ebe44e 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -611,3 +611,126 @@ html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled {
 .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 {
+  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: 0 5px 5px;
+  content: '';
+  position: absolute;
+  top: -5px;
+}
+
+.controlled-setting-bubble::after {
+  -webkit-margin-start: 5px;
+  border-color: white transparent;
+  border-style: solid;
+  border-width: 0 4px 4px;
+  content: '';
+  position: absolute;
+  top: -4px;
+}
+
+.controlled-setting-bubble-text {
+  -webkit-padding-start: 30px;
+  background-repeat: no-repeat;
+  margin: 0;
+  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: 0 !important;
+}