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

chrome/browser/resources/options/content_settings.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. */
 
 #content-settings-page {
   min-width: 620px;
 }
 
 #content-settings-exceptions-area {
   min-width: 540px;
 }
 
 .exception-pattern {
   -webkit-box-flex: 1;
   -webkit-margin-end: 10px;
   -webkit-margin-start: 14px;
 }
 
 .exception-setting {
   display: inline-block;
   width: 120px;
 }
 
+.settings-list div[role='listitem'][controlled-by='policy'] .exception-setting,
+.settings-list div[role='listitem'][controlled-by='extension']
+    .exception-setting {
+  width: 112px;
+}
+
 select.exception-setting {
   vertical-align: middle;
 }
 
+.overruled .exception-setting {
+  width: 96px;
+}
+
+.overruled span.exception-setting {

[Bernhard Bauer, 2016/05/18 09:55:13]

Why is the span selector necessary?

[huangs, 2016/05/18 13:52:49]

If we do don't do this, then "select.exception-setting" is included, and when we
edit an exception the selected item drop down list will have the strike-through
always.  If we do that then the <select> options and the text box should get it
also.  I think that seeing strike-through while editing would be considered
annoying -- but please propose this in the UI review if you'd prefer that.

[Bernhard Bauer, 2016/05/19 14:20:40]

Hm... can we use an additional class for this? Otherwise it might inadvertently
apply to another <span> element as well if we add one.

[huangs, 2016/05/20 15:16:46]

This is applied to ".overruled span.exception-setting", i.e., we'd have

<some-tag class="overruled">
  <span class="exception-settings">I have line-through</span>
  <span>I have normal style</span>
</some-tag>

So sibling <span> that doesn't have class="exception-settings" will be
unaffected.  Unless you  mean something else?

[Bernhard Bauer, 2016/05/23 13:34:11]

Mostly I'd be concerned that <span> is too narrow if we'd ever use a different
tag for the display label. But I guess we only have two types right now, and we
can cross that bridge when we come to it.

[huangs, 2016/05/24 05:02:00]

Acknowledged.

+  text-decoration: line-through;
+}
+
 #exception-column-headers {
   -webkit-margin-start: 17px;
   display: -webkit-box;
   margin-top: 17px;
 }
 
 #exception-column-headers > div {
   font-weight: bold;
 }
 
@@ skipping 62 matching lines @@
   display: -webkit-box;
 }
 
 #media-audio-column {
   width: 6em;
 }
 
 #media-video-column {
   width: 8.5em;
 }
+y

[Bernhard Bauer, 2016/05/18 09:55:13]

Remove

[huangs, 2016/05/18 13:52:49]

Done.