[DevTools] Handle blocked urls disabled state better in UI

third_party/WebKit/Source/devtools/front_end/network/BlockedURLsPane.js

 // Copyright (c) 2015 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.
 /**
  * @implements {UI.ListWidget.Delegate}
  * @unrestricted
  */
 Network.BlockedURLsPane = class extends UI.VBox {
   constructor() {
     super(true);
@@ skipping 43 matching lines @@
     addLink.addEventListener('click', this._addButtonClicked.bind(this), false);
     return element;
   }
 
   static reset() {
     if (Network.BlockedURLsPane._instance)
       Network.BlockedURLsPane._instance.reset();
   }
 
   _addButtonClicked() {
+    this._manager.setBlockingEnabled(true);
     this._list.addNewItem(0, {url: '', enabled: true});
   }
 
   /**
    * @override
    * @param {*} item
    * @param {boolean} editable
    * @return {!Element}
    */
   renderItem(item, editable) {
     var pattern = /** @type {!SDK.NetworkManager.BlockedPattern} */ (item);
     var count = this._blockedRequestsCount(pattern.url);
     var element = createElementWithClass('div', 'blocked-url');
     var checkbox = element.createChild('input', 'blocked-url-checkbox');
     checkbox.type = 'checkbox';
     checkbox.checked = pattern.enabled;
+    checkbox.disabled = !this._manager.blockingEnabled();
     element.createChild('div', 'blocked-url-label').textContent = pattern.url;
     element.createChild('div', 'blocked-url-count').textContent = Common.UIString('%d blocked', count);
     element.addEventListener('click', event => this._togglePattern(pattern, event), false);
     checkbox.addEventListener('click', event => this._togglePattern(pattern, event), false);
     return element;
   }
 
   /**
    * @param {!SDK.NetworkManager.BlockedPattern} pattern
    * @param {!Event} event
    */
   _togglePattern(pattern, event) {
     event.consume(true);
     var patterns = this._manager.blockedPatterns();
     patterns.splice(patterns.indexOf(pattern), 1, {enabled: !pattern.enabled, url: pattern.url});
     this._manager.setBlockedPatterns(patterns);
   }
 
   _toggleEnabled() {
     this._manager.setBlockingEnabled(!this._manager.blockingEnabled());
+    this._update();
   }
 
   /**
    * @override
    * @param {*} item
    * @param {number} index
    */
   removeItemRequested(item, index) {
     var patterns = this._manager.blockedPatterns();
     patterns.splice(index, 1);
@@ skipping 54 matching lines @@
   }
 
   _removeAll() {
     this._manager.setBlockedPatterns([]);
   }
 
   /**
    * @return {!Promise<?>}
    */
   _update() {
-    this._enabledCheckbox.setChecked(this._manager.blockingEnabled());
+    var enabled = this._manager.blockingEnabled();
+    this._list.element.classList.toggle('blocking-disabled', !enabled);
+    this._enabledCheckbox.setChecked(enabled);
     this._list.clear();
     for (var pattern of this._manager.blockedPatterns())
       this._list.appendItem(pattern, true);
     return Promise.resolve();
   }
 
   /**
    * @param {string} url
    * @return {number}
    */
@@ skipping 42 matching lines @@
     if (request.wasBlocked()) {
       var count = this._blockedCountForUrl.get(request.url()) || 0;
       this._blockedCountForUrl.set(request.url(), count + 1);
       this._updateThrottler.schedule(this._update.bind(this));
     }
   }
 };
 
 /** @type {?Network.BlockedURLsPane} */
 Network.BlockedURLsPane._instance = null;