⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 181872 in webkit


Ignore:
Timestamp:
Mar 23, 2015, 3:00:19 PM (11 years ago)
Author:
jonowells@apple.com
Message:

Web Inspector: Debugger sidebar should have a filter button for breakpoints
​https://bugs.webkit.org/show_bug.cgi?id=142779

Reviewed by Timothy Hatcher.

Add the infrastructure for activation filter buttons that can appear next to the text filters at the bottom
of any navigation sidebar panel. These filter bar buttons have defined within them a function that returns
a boolean value that indicates whether the input, typically a tree element, should be filtered or not.

This infrastructure is then used to create a filter for the debugger sidebar that, when applied, only shows
scripts that have breakpoints set on them.

  • Localizations/en.lproj/localizedStrings.js: Updated.
  • UserInterface/Main.html: Files added.
  • UserInterface/Views/DebuggerSidebarPanel.js:

(WebInspector.DebuggerSidebarPanel.showResourcesWithChildrenOnlyFilterFunction):
(WebInspector.DebuggerSidebarPanel):
(WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint): Drive-by fix.
Add filter button to filter bar.

  • UserInterface/Views/FilterBar.css:

(.filter-bar > .navigation-bar > .item):
Style filter button.

  • UserInterface/Views/FilterBar.js:

(WebInspector.FilterBar):
(WebInspector.FilterBar.prototype.get filters):
(WebInspector.FilterBar.prototype.set filters):
(WebInspector.FilterBar.prototype.hasActiveFilters):
(WebInspector.FilterBar.prototype._handleFilterChanged):
(WebInspector.FilterBar.prototype._inputFieldChanged): Deleted.
Create space for filter bar buttons and set up event handlers to deal with them.

  • UserInterface/Views/FilterBarButton.js: Copied from Source/WebInspectorUI/UserInterface/Views/FilterBar.css.

(WebInspector.FilterBarButton):
(WebInspector.FilterBarButton.prototype.get filterFunction):
(WebInspector.FilterBarButton.prototype.toggle):
Create class for a filter bar button that stores a filter function.

  • UserInterface/Views/NavigationSidebarPanel.js:

(WebInspector.NavigationSidebarPanel):
(WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstFilterFunctions):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
(WebInspector.NavigationSidebarPanel.prototype._filterDidChange):
(WebInspector.NavigationSidebarPanel.prototype._updateFilter):
(WebInspector.NavigationSidebarPanel.prototype._textFilterDidChange): Deleted.
Add functionality to support button filters and process their corresponding functions correctly when filtering.

Location:
trunk/Source/WebInspectorUI
Files:
4 added
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r181844 r181872  
     12015-03-17  Jono Wells  <jonowells@apple.com>
     2
     3        Web Inspector: Debugger sidebar should have a filter button for breakpoints
     4        https://bugs.webkit.org/show_bug.cgi?id=142779
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Add the infrastructure for activation filter buttons that can appear next to the text filters at the bottom
     9        of any navigation sidebar panel. These filter bar buttons have defined within them a function that returns
     10        a boolean value that indicates whether the input, typically a tree element, should be filtered or not.
     11
     12        This infrastructure is then used to create a filter for the debugger sidebar that, when applied, only shows
     13        scripts that have breakpoints set on them.
     14
     15        * Localizations/en.lproj/localizedStrings.js: Updated.
     16        * UserInterface/Main.html: Files added.
     17
     18        * UserInterface/Views/DebuggerSidebarPanel.js:
     19        (WebInspector.DebuggerSidebarPanel.showResourcesWithChildrenOnlyFilterFunction):
     20        (WebInspector.DebuggerSidebarPanel):
     21        (WebInspector.DebuggerSidebarPanel.prototype._addBreakpoint): Drive-by fix.
     22        Add filter button to filter bar.
     23
     24        * UserInterface/Views/FilterBar.css:
     25        (.filter-bar > .navigation-bar > .item):
     26        Style filter button.
     27
     28        * UserInterface/Views/FilterBar.js:
     29        (WebInspector.FilterBar):
     30        (WebInspector.FilterBar.prototype.get filters):
     31        (WebInspector.FilterBar.prototype.set filters):
     32        (WebInspector.FilterBar.prototype.hasActiveFilters):
     33        (WebInspector.FilterBar.prototype._handleFilterChanged):
     34        (WebInspector.FilterBar.prototype._inputFieldChanged): Deleted.
     35        Create space for filter bar buttons and set up event handlers to deal with them.
     36
     37        * UserInterface/Views/FilterBarButton.js: Copied from Source/WebInspectorUI/UserInterface/Views/FilterBar.css.
     38        (WebInspector.FilterBarButton):
     39        (WebInspector.FilterBarButton.prototype.get filterFunction):
     40        (WebInspector.FilterBarButton.prototype.toggle):
     41        Create class for a filter bar button that stores a filter function.
     42
     43        * UserInterface/Views/NavigationSidebarPanel.js:
     44        (WebInspector.NavigationSidebarPanel):
     45        (WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstFilterFunctions):
     46        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
     47        (WebInspector.NavigationSidebarPanel.prototype._filterDidChange):
     48        (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
     49        (WebInspector.NavigationSidebarPanel.prototype._textFilterDidChange): Deleted.
     50        Add functionality to support button filters and process their corresponding functions correctly when filtering.
     51
    1522015-03-22  Matt Baker  <mattbaker@apple.com>
    253

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r181626 r181872  
    424424localizedStrings["Show console (%s)"] = "Show console (%s)";
    425425localizedStrings["Show full-height console"] = "Show full-height console";
     426localizedStrings["Show only resources with breakpoints."] = "Show only resources with breakpoints.";
     427localizedStrings["Show resources with and without breakpoints."] = "Show resources with and without breakpoints.";
    426428localizedStrings["Show shadow DOM nodes"] = "Show shadow DOM nodes";
    427429localizedStrings["Show split console"] = "Show split console";

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r181723 r181872  
    394394    <script src="Views/EventListenerSectionGroup.js"></script>
    395395    <script src="Views/FilterBar.js"></script>
     396    <script src="Views/FilterBarButton.js"></script>
    396397    <script src="Views/FindBanner.js"></script>
    397398    <script src="Views/FlexibleSpaceNavigationItem.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js

    r181768 r181872  
    5454    this._navigationBar = new WebInspector.NavigationBar;
    5555    this.element.appendChild(this._navigationBar.element);
    56 
    57     var breakpointsImage, pauseImage, resumeImage, stepOverImage, stepIntoImage, stepOutImage;
    58     if (WebInspector.Platform.isLegacyMacOS) {
    59         breakpointsImage = {src: "Images/Legacy/Breakpoints.svg", width: 16, height: 16};
    60         pauseImage = {src: "Images/Legacy/Pause.svg", width: 16, height: 16};
    61         resumeImage = {src: "Images/Legacy/Resume.svg", width: 16, height: 16};
    62         stepOverImage = {src: "Images/Legacy/StepOver.svg", width: 16, height: 16};
    63         stepIntoImage = {src: "Images/Legacy/StepInto.svg", width: 16, height: 16};
    64         stepOutImage = {src: "Images/Legacy/StepOut.svg", width: 16, height: 16};
    65     } else {
    66         breakpointsImage = {src: "Images/Breakpoints.svg", width: 15, height: 15};
    67         pauseImage = {src: "Images/Pause.svg", width: 15, height: 15};
    68         resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
    69         stepOverImage = {src: "Images/StepOver.svg", width: 15, height: 15};
    70         stepIntoImage = {src: "Images/StepInto.svg", width: 15, height: 15};
    71         stepOutImage = {src: "Images/StepOut.svg", width: 15, height: 15};
    72     }
     56   
     57    var imageSize = WebInspector.Platform.isLegacyMacOS ? 16 : 15;
     58
     59    var breakpointsImage = {src: platformImagePath("Breakpoints.svg"), width: imageSize, height: imageSize};
     60    var pauseImage = {src: platformImagePath("Pause.svg"), width: imageSize, height: imageSize};
     61    var resumeImage = {src: platformImagePath("Resume.svg"), width: imageSize, height: imageSize};
     62    var stepOverImage = {src: platformImagePath("StepOver.svg"), width: imageSize, height: imageSize};
     63    var stepIntoImage = {src: platformImagePath("StepInto.svg"), width: imageSize, height: imageSize};
     64    var stepOutImage = {src: platformImagePath("StepOut.svg"), width: imageSize, height: imageSize};
    7365
    7466    var toolTip = WebInspector.UIString("Enable all breakpoints (%s)").format(this._toggleBreakpointsKeyboardShortcut.displayName);
    … …  
    110102
    111103    this.filterBar.placeholder = WebInspector.UIString("Filter Breakpoint List");
     104    var showResourcesWithBreakpointsOnlyFilterFunction = function(treeElement)
     105    {
     106        // Keep breakpoints and other elements that aren't resources.
     107        if (!treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.BreakpointTreeElement)
     108            return true;
     109
     110        // Keep resources with breakpoints.
     111        if (treeElement.hasChildren) {
     112            for (var child of treeElement.children) {
     113                if (child instanceof WebInspector.BreakpointTreeElement)
     114                    return true;
     115            }
     116        }
     117        return false;
     118    };
     119
     120    this.filterBar.addFilterBarButton("debugger-show-resources-with-children-only", showResourcesWithBreakpointsOnlyFilterFunction, true, WebInspector.UIString("Show only resources with breakpoints."), WebInspector.UIString("Show resources with and without breakpoints."), platformImagePath("Breakpoints.svg"), 15, 15);
    112121
    113122    this._breakpointsContentTreeOutline = this.contentTreeOutline;
    … …  
    283292    },
    284293
    285     _addBreakpoint: function(breakpoint, sourceCode)
     294    _addBreakpoint: function(breakpoint)
    286295    {
    287296        var sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;

  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.css

    r173707 r181872  
    3535body.mac-platform.legacy .filter-bar {
    3636    height: 21px;
     37}
     38
     39.filter-bar > .navigation-bar > .item {
     40    padding: 0 0 3px 8px;
    3741}
    3842

  • trunk/Source/WebInspectorUI/UserInterface/Views/FilterBar.js

    r181769 r181872  
    3131    this._element.classList.add(WebInspector.FilterBar.StyleClassName);
    3232
     33    this._filtersNavigationBar = new WebInspector.NavigationBar;
     34    this._element.appendChild(this._filtersNavigationBar.element);
     35
     36    this._filterFunctionsMap = new Map;
     37
    3338    this._inputField = document.createElement("input");
    3439    this._inputField.type = "search";
    3540    this._inputField.spellcheck = false;
    3641    this._inputField.incremental = true;
    37     this._inputField.addEventListener("search", this._inputFieldChanged.bind(this), false);
     42    this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
    3843    this._element.appendChild(this._inputField);
    3944};
    … …  
    4550
    4651WebInspector.FilterBar.Event = {
    47     TextFilterDidChange: "filter-bar-text-filter-did-change"
     52    FilterDidChange: "filter-bar-text-filter-did-change"
    4853};
    4954
    5055WebInspector.FilterBar.prototype = {
    5156    constructor: WebInspector.FilterBar,
     57    __proto__: WebInspector.Object.prototype,
    5258
    5359    // Public
    … …  
    7581    get filters()
    7682    {
    77         return {text: this._inputField.value};
     83        return {text: this._inputField.value, functions: [...this._filterFunctionsMap.values()]};
    7884    },
    7985
    … …  
    8591        this._inputField.value = filters.text || "";
    8692        if (oldTextValue !== this._inputField.value)
    87             this._inputFieldChanged();
     93            this._handleFilterChanged();
     94    },
     95
     96    addFilterBarButton: function(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
     97    {
     98        var filterBarButton = new WebInspector.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss);
     99        filterBarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._handleFilterBarButtonClicked, this);
     100        filterBarButton.addEventListener(WebInspector.FilterBarButton.Event.ActivatedStateToggled, this._handleFilterButtonToggled, this);
     101        this._filtersNavigationBar.addNavigationItem(filterBarButton);
     102        if (filterBarButton.activated) {
     103            this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);
     104            this._handleFilterChanged();
     105        }
    88106    },
    89107
    90108    hasActiveFilters: function()
    91109    {
    92         if (this._inputField.value)
    93             return true;
    94         return false;
     110        return !!this._inputField.value || !!this._filterFunctionsMap.size;
    95111    },
    96112
    97113    // Private
    98114
    99     _inputFieldChanged: function(event)
     115    _handleFilterBarButtonClicked(event)
    100116    {
    101         this.dispatchEventToListeners(WebInspector.FilterBar.Event.TextFilterDidChange);
     117        var filterBarButton = event.target;
     118        filterBarButton.toggle();
     119    },
     120
     121    _handleFilterButtonToggled: function(event)
     122    {
     123        var filterBarButton = event.target;
     124        if (filterBarButton.activated)
     125            this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);
     126        else
     127            this._filterFunctionsMap.delete(filterBarButton.identifier);
     128        this._handleFilterChanged();
     129    },
     130
     131    _handleFilterChanged: function()
     132    {
     133        this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
    102134    }
    103135};
    104 
    105 WebInspector.FilterBar.prototype.__proto__ = WebInspector.Object.prototype;

  • trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js

    r180001 r181872  
    5353
    5454    this._filterBar = new WebInspector.FilterBar();
    55     this._filterBar.addEventListener(WebInspector.FilterBar.Event.TextFilterDidChange, this._textFilterDidChange, this);
     55    this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
    5656    this.element.appendChild(this._filterBar.element);
    5757
    … …  
    313313    },
    314314
     315    matchTreeElementAgainstFilterFunctions: function(treeElement)
     316    {
     317        for (var filterFunction of this._filterFunctions) {
     318            if (filterFunction(treeElement))
     319                return true;
     320        }
     321        return false;
     322    },
     323
    315324    applyFiltersToTreeElement: function(treeElement)
    316325    {
    … …  
    376385        }
    377386
    378         if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
     387        if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
    379388            // Make this element visible since it matches.
    380389            makeVisible();
    … …  
    491500    },
    492501
    493     _textFilterDidChange: function()
     502    _filterDidChange: function()
    494503    {
    495504        this._updateFilter();
    … …  
    504513        this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
    505514        this._filtersSetting.value = filters;
     515        this._filterFunctions = filters.functions;
    506516
    507517        // Don't populate if we don't have any active filters.
Note: See TracChangeset for help on using the changeset viewer.