[DevTools] UI for blocked URLs.

Source/devtools/front_end/network/NetworkPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 34 matching lines @@
 
     /** @type {?WebInspector.FilmStripView} */
     this._filmStripView = null;
     /** @type {?WebInspector.NetworkPanel.FilmStripRecorder} */
     this._filmStripRecorder = null;
 
     this._panelToolbar = new WebInspector.Toolbar(this.element);
     this._filterBar = new WebInspector.FilterBar("networkPanel", true);
     this.element.appendChild(this._filterBar.filtersElement());
 
-    if (Runtime.experiments.isEnabled("blockedURLs")) {
-        this._blockedURLsBar = new WebInspector.BlockedURLsBar();
-        this.element.appendChild(this._blockedURLsBar.element);
-    }
-
     this._searchableView = new WebInspector.SearchableView(this);
     this._searchableView.setPlaceholder(WebInspector.UIString("Find by filename or path"));
     this._searchableView.show(this.element);
 
     // Create top overview component.
     this._overviewPane = new WebInspector.TimelineOverviewPane("network");
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.element.id = "network-overview-panel";
     this._networkOverview = new WebInspector.NetworkOverview();
     this._overviewPane.setOverviewControls([this._networkOverview]);
@@ skipping 11 matching lines @@
     this._networkLogView = new WebInspector.NetworkLogView(this._filterBar, this._progressBarContainer, this._networkLogLargeRowsSetting);
     this._splitWidget.setSidebarWidget(this._networkLogView);
 
     this._detailsWidget = new WebInspector.VBox();
     this._detailsWidget.element.classList.add("network-details-view");
     this._splitWidget.setMainWidget(this._detailsWidget);
 
     this._closeButtonElement = createElementWithClass("div", "network-close-button", "dt-close-button");
     this._closeButtonElement.addEventListener("click", this._showRequest.bind(this, null), false);
 
+    if (Runtime.experiments.isEnabled("blockedURLs")) {

[pfeldman, 2015/08/28 17:15:49]

Looks good enough to leave the experiment to me.

[dgozman, 2015/08/31 21:17:39]

Done.

+        this._blockedURLsPane = new WebInspector.BlockedURLsPane();
+        this._filterBar.addFilter(this._blockedURLsPane.filterUI());
+        this._filterBar.addEventListener(WebInspector.FilterBar.Events.Toggled, this._toggleBlockedURLsSidebarPane, this);
+        this._toggleBlockedURLsSidebarPane();
+    }
+
     this._networkLogShowOverviewSetting.addChangeListener(this._toggleShowOverview, this);
     this._networkLogLargeRowsSetting.addChangeListener(this._toggleLargerRequests, this);
     this._networkRecordFilmStripSetting.addChangeListener(this._toggleRecordFilmStrip, this);
 
     this._toggleRecordButton(true);
     this._toggleShowOverview();
     this._toggleLargerRequests();
     this._toggleRecordFilmStrip();
     this._updateUI();
 
@@ skipping 54 matching lines @@
         this._panelToolbar.appendSeparator();
 
         this._preserveLogCheckbox = new WebInspector.ToolbarCheckbox(WebInspector.UIString("Preserve log"), WebInspector.UIString("Do not clear log on page reload / navigation"));
         this._preserveLogCheckbox.inputElement.addEventListener("change", this._onPreserveLogCheckboxChanged.bind(this), false);
         this._panelToolbar.appendToolbarItem(this._preserveLogCheckbox);
 
         this._disableCacheCheckbox = new WebInspector.ToolbarCheckbox(WebInspector.UIString("Disable cache"), WebInspector.UIString("Disable cache (while DevTools is open)"), WebInspector.moduleSetting("cacheDisabled"));
         this._panelToolbar.appendToolbarItem(this._disableCacheCheckbox);
 
         this._panelToolbar.appendSeparator();
-        if (Runtime.experiments.isEnabled("blockedURLs"))
-             this._panelToolbar.appendToolbarItem(this._blockedURLsBar.toolbarButton());
         this._panelToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
         this._panelToolbar.appendToolbarItem(new WebInspector.ToolbarItem(this._progressBarContainer));
     },
 
     /**
      * @return {!WebInspector.ToolbarComboBox}
      */
     _createNetworkConditionsSelect: function()
     {
         var toolbarItem = new WebInspector.ToolbarComboBox(null);
@@ skipping 62 matching lines @@
     _onClearButtonClicked: function(event)
     {
         this._reset();
     },
 
     _reset: function()
     {
         this._calculator.reset();
         this._overviewPane.reset();
         this._networkLogView.reset();
+        if (Runtime.experiments.isEnabled("blockedURLs"))
+            this._blockedURLsPane.reset();
         if (this._filmStripView)
             this._resetFilmStripView();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _willReloadPage: function(event)
     {
         if (!this._preserveLogCheckbox.checked())
@@ skipping 20 matching lines @@
     _toggleShowOverview: function()
     {
         var toggled = this._networkLogShowOverviewSetting.get();
         if (toggled)
             this._overviewPane.show(this._searchableView.element, this._splitWidget.element);
         else
             this._overviewPane.detach();
         this.doResize();
     },
 
+    _toggleBlockedURLsSidebarPane: function()
+    {
+        var toggled = this._filterBar.filtersToggled();
+        if (toggled)
+            this._blockedURLsPane.show(this._searchableView.element);
+        else
+            this._blockedURLsPane.detach();
+        this.doResize();
+    },
+
     _toggleRecordFilmStrip: function()
     {
         var toggled = this._networkRecordFilmStripSetting.get();
         if (toggled && !this._filmStripRecorder) {
             this._filmStripView = new WebInspector.FilmStripView();
             this._filmStripView.setMode(WebInspector.FilmStripView.Modes.FrameBased);
             this._filmStripView.element.classList.add("network-film-strip");
             this._filmStripRecorder = new WebInspector.NetworkPanel.FilmStripRecorder(this._filmStripView);
             this._filmStripView.show(this._searchableView.element, this._searchableView.element.firstElementChild);
             this._filmStripView.addEventListener(WebInspector.FilmStripView.Events.FrameSelected, this._onFilmFrameSelected, this);
@@ skipping 439 matching lines @@
     {
         if (!this._target)
             return;
 
         this._target.tracingManager.stop();
         this._target = null;
         this._callback = callback;
         this._filmStripView.setStatusText(WebInspector.UIString("Fetching frames..."));
     }
 }
-
-/**
- * @constructor
- */
-WebInspector.BlockedURLsBar = function()
-{
-    this.element = createElementWithClass("div", "blocked-urls-bar");
-
-    this._toolbarButton = new WebInspector.ToolbarButton(WebInspector.UIString("Manage blocked URLs"), "filter-toolbar-item", 3);
-    this._toolbarButton.addEventListener("click", this._toggleVisibility, this);
-
-    this._manager = WebInspector.multitargetNetworkManager;
-    this._manager.addEventListener(WebInspector.MultitargetNetworkManager.EventTypes.BlockedURLsChanged, this._update, this);
-
-    this._visible = true;
-    this._toggleVisibility();
-    this._update();
-}
-
-WebInspector.BlockedURLsBar.prototype = {
-    _updateToolbarButton: function()
-    {
-        this._toolbarButton.setState(this._visible ? "shown" : (this._manager.blockedURLs().size ? "active" : "inactive"));
-    },
-
-    _update: function()
-    {
-        this._updateToolbarButton();
-
-        this.element.removeChildren();
-        for (var url of this._manager.blockedURLs()) {
-            var container = this.element.createChild("div", "blocked-url-container");
-            var text = container.createChild("div", "blocked-url-text");
-            text.textContent = url;
-            text.title = url;
-            var closeButton = container.createChild("div", "close-button", "dt-close-button");
-            closeButton.addEventListener("click", this._manager.toggleURLBlocked.bind(this._manager, url), false);
-            closeButton.gray = true;
-        }
-        if (!this._manager.blockedURLs().size)
-            this.element.createChild("div", "blocked-urls-empty").textContent = WebInspector.UIString("No blocked URLs.");
-    },
-
-    _toggleVisibility: function()
-    {
-        this._visible = !this._visible;
-        this.element.classList.toggle("hidden", !this._visible);
-        this._updateToolbarButton();
-    },
-
-    /**
-     * @return {!WebInspector.ToolbarButton}
-     */
-    toolbarButton: function()
-    {
-        return this._toolbarButton;
-    }
-}