[Chrome Settings UI] Show overruled User Exceptions as strike-through.

chrome/browser/resources/options/content_settings.css

Index: chrome/browser/resources/options/content_settings.css
diff --git a/chrome/browser/resources/options/content_settings.css b/chrome/browser/resources/options/content_settings.css
index 36c6393af3d8c36c1f3e28a955bd31de595b17f3..210377ae16f20aac3d6956e812eb21dee79b4702 100644
--- a/chrome/browser/resources/options/content_settings.css
+++ b/chrome/browser/resources/options/content_settings.css
@@ -21,10 +21,24 @@
   width: 120px;
 }
 
+.settings-list div[role='listitem'][controlled-by='policy'] .exception-setting,
+.settings-list div[role='listitem'][controlled-by='extension']
+    .exception-setting {
+  width: 112px;

[Dan Beam, 2016/05/25 00:41:53]

how is this width calculated?

[huangs, 2016/05/25 15:58:50]

I used Developer Tools, got rid of italic style for Policy for common font, and
tweaked value until pixels align.

Changed to calc(120px - 8px) hinting at the 120px above.

+}
+
 select.exception-setting {
   vertical-align: middle;
 }
 
+.overruled .exception-setting {
+  width: 96px;

[Dan Beam, 2016/05/25 00:41:53]

same question

[huangs, 2016/05/25 15:58:50]

Same thing, though this time aligned to the "new exception" row's <select>.
Changing to calc().

+}
+
+.overruled span.exception-setting {
+  text-decoration: line-through;

[Dan Beam, 2016/05/25 00:41:53]

why are there 2 rules that apply the same line-through style rather than 1?

[huangs, 2016/05/25 15:58:50]

This one is for the <span> that replaces <select>, and the other is for the
<div> that replaces <input>.

Changing this to
.overruled .overruleable {...}
and injecting 'overuleable' style to elements that we want to allow
line-through, when these elements get instantiated in JS>

+}
+
 #exception-column-headers {
   -webkit-margin-start: 17px;
   display: -webkit-box;