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] {
+  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'] {
+  background-image:
+      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
 }
 
-.controlled-setting-indicator[controlled-by='policy'] summary {
+.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_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!

+      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']:hover,
+.controlled-setting-indicator[controlled-by='extension'][is-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']:hover,
+.controlled-setting-indicator[controlled-by='recommended'][is-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;
 }