Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/options/options_page.css

 /* Copyright (c) 2012 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. */
 
 body {
   position: relative;
 }
 
 #main-content {
   bottom: 0;
@@ skipping 434 matching lines @@
 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
  * show the link to the Flash storage settings manager:
  */
 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 html:not([enablePepperFlashSettings]) .pepper-flash-settings {
   display: 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;
+/* Bubble. */
+
+.options-bubble {
+  position: fixed;
 }
 
-.controlled-setting-indicator[controlled-by] summary {
-  background-size: contain;
+/* Controlled setting indicator and bubble. */
+
+.controlled-setting-indicator {
+  display: none;
+}
+
+.controlled-setting-indicator[controlled-by] {
+  background-size: 16px;
+  display: inline-block;
   height: 16px;
+  vertical-align: text-bottom;
   width: 16px;
 }
 
-.controlled-setting-indicator summary::-webkit-details-marker {
-  display: none;
+.controlled-setting-indicator[controlled-by='policy'] {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
 }
 
-.controlled-setting-indicator[controlled-by='policy'] summary {
+.controlled-setting-indicator[controlled-by='policy']:-webkit-any(:hover,
+    .showing-bubble) {
   background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
-  background-size: 16px;
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 }
 
-.controlled-setting-indicator[controlled-by='policy'] summary:hover {
+.controlled-setting-indicator[controlled-by='extension'] {
   background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
-  background-size: 16px;
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
 }
 
-.controlled-setting-indicator[controlled-by='extension'] summary {
+.controlled-setting-indicator[controlled-by='extension']:-webkit-any(:hover,
+    .showing-bubble) {
   background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
-  background-size: 16px;
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
 }
 
-.controlled-setting-indicator[controlled-by='extension'] summary:hover {
+.controlled-setting-indicator[controlled-by='recommended'] {
   background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
-  background-size: 16px;
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
 }
 
-.controlled-setting-indicator[controlled-by='recommended'] summary {
+.controlled-setting-indicator[controlled-by='recommended']:-webkit-any(:hover,
+    .showing-bubble) {
   background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
-  background-size: 16px;
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
 }
 
-.controlled-setting-indicator[controlled-by='recommended'] summary:hover {
-  background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
-  background-size: 16px;
+.controlled-setting-bubble-content {
+  -webkit-padding-start: 30px;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  min-height: 32px;
 }
 
-.controlled-setting-bubble {
-  -webkit-margin-start: -20px;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 2px 2px #ddd;
-  margin-top: 10px;
-  padding: 10px;
-  position: absolute;
-  top: 50%;
-  z-index: 10;
+.controlled-setting-bubble-content[controlled-by='policy'] {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
 }
 
-html[dir='ltr'] .controlled-setting-bubble {
-  left: 50%;
+.controlled-setting-bubble-content[controlled-by='extension'] {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
 }
 
-html[dir='rtl'] .controlled-setting-bubble {
-  right: 50%;
+.controlled-setting-bubble-content[controlled-by='recommended'] {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
 }
 
-.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');
-  background-size: 22px;
-}
-
-.controlled-setting-indicator[controlled-by='extension']
-    .controlled-setting-bubble-text {
-  background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
-  background-size: 22px;
-}
-
-.controlled-setting-indicator[controlled-by='recommended']
-    .controlled-setting-bubble-text {
-  background-image:
-      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
-  background-size: 22px;
-}
-
-html[dir='rtl'] .controlled-setting-bubble-text {
+html[dir='rtl'] .controlled-setting-bubble-content {
   background-position: right top;
 }
 
 .controlled-setting-bubble-action {
   padding: 0 !important;
 }