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

chrome/browser/resources/options/content_settings_exceptions_area.js

 // 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.
 
 cr.define('options.contentSettings', function() {
   /** @const */ var ControlledSettingIndicator =
                     options.ControlledSettingIndicator;
   /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
   /** @const */ var InlineEditableItem = options.InlineEditableItem;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
@@ skipping 187 matching lines @@
               this.dataItem.source : null;
 
       if (controlledBy) {
         this.setAttribute('controlled-by', controlledBy);
         this.deletable = false;
         this.editable = false;
       }
 
       if (controlledBy == 'policy' || controlledBy == 'extension') {
         this.querySelector('.row-delete-button').hidden = true;
-        var indicator = new ControlledSettingIndicator();
-        indicator.setAttribute('content-exception', this.contentType);
-        // Create a synthetic pref change event decorated as
-        // CoreOptionsHandler::CreateValueForPref() does.
-        var event = new Event(this.contentType);
-        event.value = { controlledBy: controlledBy };
-        indicator.handlePrefChange(event);
-        this.appendChild(indicator);
+        this.appendIndicatorElement(controlledBy);
       }
 
       // If the exception comes from a hosted app, display the name and the
       // icon of the app.
       if (controlledBy == 'HostedApp') {
         this.title =
             loadTimeData.getString('setBy') + ' ' + this.dataItem.appName;
         var button = this.querySelector('.row-delete-button');
         // Use the host app's favicon (16px, match bigger size).
         // See c/b/ui/webui/extensions/extension_icon_source.h
         // for a description of the chrome://extension-icon URL.
         button.style.backgroundImage =
             'url(\'chrome://extension-icon/' + this.dataItem.appId + '/16/1\')';
       }
 
       var listItem = this;
       // Handle events on the editable nodes.
       input.oninput = function(event) {
         listItem.inputValidityKnown = false;
         chrome.send('checkExceptionPatternValidity',
                     [listItem.contentType, listItem.mode, input.value]);
       };
 
       // Listen for edit events.
       this.addEventListener('canceledit', this.onEditCancelled_);
       this.addEventListener('commitedit', this.onEditCommitted_);
     },
 
+    /**
+     * Appends an indicator element to the item. Should be called at most once.
+     *
+     * @param {string} controlledBy The source that controls the item.
+     */
+    appendIndicatorElement: function(controlledBy) {
+      var indicator = new ControlledSettingIndicator();

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

can't you just do

indicator.controlledBy = controlledBy;

instead of this new Event() + handlePrefChange() dance?

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

I'm moving existing code to this routine for reuse. Yeah the event dance looks
odd; just keeping with convension where handlePrefChange() gets notified of
changes.

+      indicator.setAttribute('content-exception', this.contentType);
+      // Create a synthetic pref change event decorated as
+      // CoreOptionsHandler::CreateValueForPref() does.
+      var event = new Event(this.contentType);
+      event.value = { controlledBy: controlledBy };

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

no spaces between curlies:

  { controlledBy: controlledBy }
   ^                          ^
should be:

  {controlledBy: controlledBy}

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

Done.

+      indicator.handlePrefChange(event);
+      this.appendChild(indicator);
+    },
+
     isEmbeddingRule: function() {
       return this.dataItem.embeddingOrigin &&
           this.dataItem.embeddingOrigin !== this.dataItem.origin;
     },
 
     /**
      * The pattern (e.g., a URL) for the exception.
      *
      * @type {string}
      */
@@ skipping 84 matching lines @@
      */
     updateEditables: function() {
       this.resetInput();
 
       var settingOption =
           this.select.querySelector('[value=\'' + this.setting + '\']');
       if (settingOption)
         settingOption.selected = true;
     },
 
+    /**
+     * Updates UI to indicate that the exception was overruled by a source.
+     *
+     * @param {string} overruledBy The source that overrules the exception.
+     */
+    setOverruledBy: function(overruledBy) {
+      this.classList.toggle('overruled', !!overruledBy);
+      var textElt = this.querySelector('.exception-pattern .static-text');
+      textElt.setAttribute('title',
+          loadTimeData.getString('exceptionDisabledByPolicy'));
+      this.appendIndicatorElement(overruledBy);
+    },
+
     /** @override */
     get currentInputIsValid() {
       return this.inputValidityKnown && this.inputIsValid;
     },
 
     /** @override */
     get hasBeenEdited() {
       var livePattern = this.input.value;
       var liveSetting = this.select.value;
       return livePattern != this.pattern || liveSetting != this.setting;
@@ skipping 155 matching lines @@
                                       entry);
       } else {
         var addRowItem = new ExceptionsAddRowListItem(this.contentType,
                                                       this.mode);
         addRowItem.deletable = false;
         return addRowItem;
       }
     },
 
     /**
+     * Updates UI to indicate that user exceptions were overruled by a source.
+     *
+     * @param {string} overruledBy The source that overrules user exceptions.
+     */
+    setOverruledBy: function(overruledBy) {
+      for (var index = 0; index < this.dataModel.length; ++index) {
+        var item = this.getListItemByIndex(index);
+        if (item.dataItem.source == 'preference') {

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

no curlies

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

Done.

+          item.setOverruledBy(overruledBy);
+        }
+      }
+    },
+
+    /**
      * Sets the exceptions in the js model.
      *
      * @param {Array<options.Exception>} entries A list of dictionaries of
      *     values, each dictionary represents an exception.
      */
     setExceptions: function(entries) {
       var deleteCount = this.dataModel.length;
 
       if (this.isEditable()) {
         // We don't want to remove the Add New Exception row.
@@ skipping 163 matching lines @@
     }
   };
 
   return {
     ExceptionsListItem: ExceptionsListItem,
     ExceptionsAddRowListItem: ExceptionsAddRowListItem,
     ExceptionsList: ExceptionsList,
     ContentSettingsExceptionsArea: ContentSettingsExceptionsArea,
   };
 });