MD Settings: implement "controlled by" indicator UI

ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html

Index: ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
diff --git a/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html b/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
index 0b1f0bde04b974f0a1fc726e5447170e69a6863c..36fde6607d5abd82beffa8f7f993c01bdaea3676 100644
--- a/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
+++ b/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.html
@@ -1,17 +1,28 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-tooltip/paper-tooltip.html">
 <link rel="import" href="cr_policy_indicator_behavior.html">
 <link rel="import" href="cr_policy_pref_behavior.html">
 
 <dom-module id="cr-policy-pref-indicator">
   <link rel="import" type="css" href="cr_policy_indicator.css">
+  <style>
+    paper-tooltip {
+      --paper-tooltip: {
+        font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */

[stevenjb, 2016/05/27 20:45:09]

92.31% seems... fragile. Grepping the existing code I see a mix of px, %, and
one use of 'em'.

No need to do this now, but I would advocate for a consistency pass. 

My experience outside of HTML suggests that explicit sets of font sizes work
better than percentages (i.e. 92.31% may not look good if the default changes to
14px or the font changes), which suggests to me that we would be better off
using CSS variables for font sizes. That said, I have very little experience
with font sizes in HTML.

[Dan Beam, 2016/05/27 21:40:19]

em and % are both scalable font-size units.  getting them consistent is not
really a goal of mine.  using an absolute px length here would have functional
issues when the user changes their default "Web Content" font size.

for example: the default font-size in Chrome is 13px.  when that's changed from
settings to 26px, any element with a hardcoded "13px" doesn't adapt and looks
out of place (and may be inaccessible to users with poor vision).

[stevenjb, 2016/05/27 21:54:12]

So are you saying we should be using all three (px, %, and em)? As someone only
passingly familiar with font sizing if I look at the existing code it is unclear
what pattern I should follow.

Will 92.31% still look correct if the default font size is changed to, say,
15px? If so, would "90%" work just as well here?

[Dan Beam, 2016/05/27 22:00:49]

no, we attempt to never use px when the font-size may vary.  either % or em are
acceptable.
the nearby convention.
if the user changes their default font size from 13px to 15px, I would expect
tooltips' font to also change proportionally.  are you asking, "will 92.31% x 15
be a round number?" no, not necesarilly, but I don't think that's an expectation
or really matters much.

+        font-weight: 500;

[stevenjb, 2016/05/27 20:45:09]

We use 'bold' in a few places still, it would be good to make that consistent at
the same time. CSS variables seem like a good idea here too since my
understanding is that not all font weights will be noticeably different on all
fonts (and we currently use 400, 500, and 600).

[Dan Beam, 2016/05/27 21:40:20]

chrome bundles Roboto with weights of 400, 500, and 700.

they all look different.

400 is "normal" (both in CSS and spec terms)
500 is "medium" (spec)
700 is "bold" (both CSS and spec terms, this weight didn't exist until recently)

there was previously 300 that was called "light" in specs and used in only 1
place (incognito NTP).  it was removed because it was adding size to chrome for
little benefit.

[stevenjb, 2016/05/27 21:54:12]

What abut 600, which we currently use in bluetooth_device_dialog.html? 

[Dan Beam, 2016/05/27 22:00:49]

the situation may differ slightly on ChromeOS (I think Roboto is a system font
there?), but in desktop: if you use font-weight: 600; it'd just take some other
weight (i.e. 400) and interpolate the glyphs.  kind of like if you have a small
image and display it at a large size: the browser just takes its best guess at
what it should look like but it generally doesn't look good nor is it defined.

+        padding: 10px 8px;
+      };
+    }
+  </style>
   <template>
-    <iron-icon id="indicator"
+    <iron-icon id="indicator" tabindex=0
         hidden$="[[!isIndicatorVisible(indicatorType)]]"
-        icon="[[getPolicyIndicatorIcon(indicatorType)]]"
-        title$="[[getPolicyIndicatorTooltip(indicatorType, pref, controllingUser)]]">
-    </iron-icon>
+        icon="[[getPolicyIndicatorIcon(indicatorType)]]"></iron-icon>
+    <paper-tooltip for="indicator" position="top">
+      [[getPolicyIndicatorTooltip(indicatorType, pref, controllingUser)]]
+    </paper-tooltip>
   </template>
   <script src="cr_policy_pref_indicator.js"></script>
 </dom-module>