Drastically reduce the number of redraws when editing content settings.

chrome/browser/resources/options/content_settings_exceptions_area.js

 // Copyright (c) 2011 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 DeletableItemList = options.DeletableItemList;
   const DeletableItem = options.DeletableItem;
   const ArrayDataModel = cr.ui.ArrayDataModel;
 
   /**
@@ skipping 406 matching lines @@
 
       var exceptionList = this;
       function handleBlur(e) {
         // When the blur event happens we do not know who is getting focus so we
         // delay this a bit until we know if the new focus node is outside the
         // list.
         var doc = e.target.ownerDocument;
         window.setTimeout(function() {
           var activeElement = doc.activeElement;
           if (!exceptionList.contains(activeElement))
-            exceptionList.selectionModel.clear();
+            exceptionList.selectionModel.unselectAll();
         }, 50);
       }
 
       this.addEventListener('blur', handleBlur, true);
 
       // Whether the exceptions in this list allow an 'Ask every time' option.
       this.enableAskOption = (this.contentType == 'plugins' &&
                               templateData.enable_click_to_play);
 
       this.autoExpands = true;
@@ skipping 13 matching lines @@
       } else {
         var addRowItem = new ExceptionsAddRowListItem(this.contentType,
                                                       this.mode,
                                                       this.enableAskOption);
         addRowItem.deletable = false;
         return addRowItem;
       }
     },
 
     /**
-     * Adds an exception to the js model.
-     * @param {Object} entry A dictionary of values for the exception.
+     * Sets the exceptions in the js model.
+     * @param {Object} entries A list of dictionaries of values, each dictionary
+     *     represents an exception.
      */
-    addException: function(entry) {
+    setExceptions: function(entries) {
+      var deleteCount = this.dataModel.length;
+
       if (this.isEditable()) {
-        // We have to add it before the Add New Exception row.
-        this.dataModel.splice(this.dataModel.length - 1, 0, entry);
-      } else {
-        this.dataModel.push(entry);
+        // We don't want to remove the Add New Exception row.
+        deleteCount = deleteCount - 1;
       }
+
+      var args = [0, deleteCount];
+      args.push.apply(args, entries);
+      this.dataModel.splice.apply(this.dataModel, args);
     },
 
     /**
      * The browser has finished checking a pattern for validity. Update the
      * list item to reflect this.
      * @param {string} pattern The pattern.
      * @param {bool} valid Whether said pattern is valid in the context of
      *     a content exception setting.
      */
     patternValidityCheckComplete: function(pattern, valid) {
@@ skipping 121 matching lines @@
     }
   };
 
   return {
     ExceptionsListItem: ExceptionsListItem,
     ExceptionsAddRowListItem: ExceptionsAddRowListItem,
     ExceptionsList: ExceptionsList,
     ContentSettingsExceptionsArea: ContentSettingsExceptionsArea,
   };
 });