Implement popup bubbles for the controlled setting indicator

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 be32ee5391b3f75e37495816e5466c94e8160798..cd0e2d81273cb4cbc02ec5bbb9ec3d0a691d9ad8 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -452,131 +452,81 @@ html:not([enablePepperFlashSettings]) .pepper-flash-settings {
   display: none;
 }
 
+/* Bubble. */
+
+.options-bubble {
+  position: fixed;
+}
+
 /* 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;
+  display: none;
 }
 
-.controlled-setting-indicator[controlled-by] summary {
-  background-size: contain;
+.controlled-setting-indicator[controlled-by] {
+  display: inline-block;
   height: 16px;
+  vertical-align: text-bottom;
   width: 16px;

[kevers, 2012/09/20 17:50:42]

Probably also need "background-size: 16px" here.  See note below.

 }
 
-.controlled-setting-indicator summary::-webkit-details-marker {
-  display: none;
-}
-
-.controlled-setting-indicator[controlled-by='policy'] summary {
+.controlled-setting-indicator[controlled-by='policy'] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
-  background-size: 16px;

[kevers, 2012/09/20 17:50:42]

The background-size attributes are required for high-DPI.  Otherwise the
background image appears at twice the intended size. To test, run with the
command line argument --force-device-scale-factor=2 (the flag works at least for
Linux chromeOS builds).

I see below that background size is being set to 22px for 
controlled-setting-bubble-content. Do not see a similar 16px setting for
controlled-setting-indicator[controlled-by].

[bartfab (slow), 2012/09/20 18:34:12]

I tried this out with a Linux Chrome OS build and --force-device-scale-factor=2.
Whether I add background-size: 16px for
.controlled-setting-indicator[controlled-by] or not, screenshots of the
controlled setting indicator and bubble are pixel-for-pixel identical. The
setting seems to make no difference. I have attached a screenshot at:
http://crbug.com/104955#c26

The behavior actually looks correct to me: If you force a scale factor of 2, the
icon doubles in size from 16px to 32px. Is that not the intended behavior?

[flackr, 2012/09/20 20:00:53]

Yes, this is the intended behaviour. The reason for specifying the
background-size is to ensure that if we are missing assets at a particular scale
factor they still display at the correct size. As an example, the above is
translated by grit to the following:
-webkit-image-set(url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY@1x')
1x,
    url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY@2x') 2x).
The chrome theme source has to return an image, so if we don't have a 2x image
for IDR_CONTROLLED_SETTING_MANDATORY_GRAY then it will get a 1x image, and
assume that it is 2x and scale it down to half size.

While we have most 2x resources now, if we take out the background-size we're
likely to run into issues again with Windows when we start to support 1.4x and
1.8x and have missing assets again.

TLDR; I'd prefer to keep these in until the set of scale factors and assets are
stabilized.

[bartfab (slow), 2012/09/20 21:54:17]

Thanks for clarifying - learn something new every day. I will add the
background-size specification tomorrow. It should be sufficient to set it once
for .controlled-setting-indicator[controlled-by] though, right? I do not think
there is a need to repeat the specification for every value of controlled-by
separately.

[flackr, 2012/09/20 22:15:25]

Yes, that's sufficient. Thanks!

 }
 
-.controlled-setting-indicator[controlled-by='policy'] summary:hover {
+.controlled-setting-indicator[controlled-by='policy']:hover,
+.controlled-setting-indicator[controlled-by='policy'][is-showing-bubble] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
-  background-size: 16px;
 }
 
-.controlled-setting-indicator[controlled-by='extension'] summary {
+.controlled-setting-indicator[controlled-by='extension'] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
-  background-size: 16px;
 }
 
-.controlled-setting-indicator[controlled-by='extension'] summary:hover {
+.controlled-setting-indicator[controlled-by='extension']:hover,
+.controlled-setting-indicator[controlled-by='extension'][is-showing-bubble] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
-  background-size: 16px;
 }
 
-.controlled-setting-indicator[controlled-by='recommended'] summary {
+.controlled-setting-indicator[controlled-by='recommended'] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
-  background-size: 16px;
 }
 
-.controlled-setting-indicator[controlled-by='recommended'] summary:hover {
+.controlled-setting-indicator[controlled-by='recommended']:hover,
+.controlled-setting-indicator[controlled-by='recommended'][is-showing-bubble] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
-  background-size: 16px;
 }
 
-.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;
-}
-
-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 {
+.controlled-setting-bubble-content {
   -webkit-padding-start: 30px;
   background-repeat: no-repeat;
-  margin: 0;
+  background-size: 22px;
   min-height: 32px;
-  min-width: 200px;
 }
 
-.controlled-setting-indicator[controlled-by='policy']
-    .controlled-setting-bubble-text {
+.controlled-setting-bubble-content[controlled-by='policy'] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
-  background-size: 22px;
 }
 
-.controlled-setting-indicator[controlled-by='extension']
-    .controlled-setting-bubble-text {
+.controlled-setting-bubble-content[controlled-by='extension'] {
   background-image:
       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
-  background-size: 22px;
 }
 
-.controlled-setting-indicator[controlled-by='recommended']
-    .controlled-setting-bubble-text {
+.controlled-setting-bubble-content[controlled-by='recommended'] {
   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;
 }