Changeset 185044 in webkit


Ignore:
Timestamp:
May 31, 2015 12:50:16 PM (9 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Resources tab navigation sidebar should have a type filter header
​https://bugs.webkit.org/show_bug.cgi?id=145474

Reviewed by Joseph Pecoraro.

  • Localizations/en.lproj/localizedStrings.js: Updated.
  • UserInterface/Images/UpDownArrows.svg: Make styleable.
  • UserInterface/Main.html: Added new files.
  • UserInterface/Views/LogContentView.js:

(WebInspector.LogContentView): Drive-by fix. Mark All as exclusive.

  • UserInterface/Views/MultipleScopeBarItem.js: Added.

(WebInspector.MultipleScopeBarItem):
(WebInspector.MultipleScopeBarItem.prototype.get element):
(WebInspector.MultipleScopeBarItem.prototype.get exclusive):
(WebInspector.MultipleScopeBarItem.prototype.get scopeBarItems):
(WebInspector.MultipleScopeBarItem.set scopeBarItems.createOption):
(WebInspector.MultipleScopeBarItem.prototype.set scopeBarItems):
(WebInspector.MultipleScopeBarItem.prototype.get selected):
(WebInspector.MultipleScopeBarItem.prototype.set selected):
(WebInspector.MultipleScopeBarItem.prototype.get selectedScopeBarItem):
(WebInspector.MultipleScopeBarItem.prototype.set selectedScopeBarItem):
(WebInspector.MultipleScopeBarItem.prototype._clicked):
(WebInspector.MultipleScopeBarItem.prototype._selectElementSelectionChanged):
(WebInspector.MultipleScopeBarItem.prototype._itemSelectionDidChange):

  • UserInterface/Views/NavigationSidebarPanel.js:

(WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstFilterFunctions):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
(WebInspector.NavigationSidebarPanel.prototype._updateFilter):
(WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
Improve filtering so non-text filters can choose to auto-expand the tree.

  • UserInterface/Views/ResourceSidebarPanel.css: Added.

(.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)):
(.sidebar > .panel.navigation.resource > .navigation-bar):

  • UserInterface/Views/ResourceSidebarPanel.js:

(WebInspector.ResourceSidebarPanel):
(WebInspector.ResourceSidebarPanel.prototype.hasCustomFilters):
(WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
(WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.ResourceSidebarPanel.prototype._scopeBarSelectionDidChange):
Make a ScopeBar and make it filter the TreeOutline when needed.

  • UserInterface/Views/ScopeBar.css:

(.scope-bar > li.multiple):
(.scope-bar > li.multiple > select):
(.scope-bar > li.multiple.selected > select):
(.scope-bar > li.multiple > .arrows):
(.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .filled):
(.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .stroked):

  • UserInterface/Views/ScopeBar.js:

(WebInspector.ScopeBar): Support shouldGroupNonExclusiveItems which will use MultipleScopeBarItem.
(WebInspector.ScopeBar.prototype._populate):
(WebInspector.ScopeBar.prototype._itemSelectionDidChange):
(WebInspector.ScopeBar.prototype.updateLayout): Deleted. Not needed for our current styles.

  • UserInterface/Views/ScopeBarItem.js:

(WebInspector.ScopeBarItem):
(WebInspector.ScopeBarItem.prototype.get id):
(WebInspector.ScopeBarItem.prototype.get label):
(WebInspector.ScopeBarItem.prototype.get exclusive):
(WebInspector.ScopeBarItem.prototype.setSelected):
(WebInspector.ScopeBarItem.prototype._clicked):
(WebInspector.ScopeBarItem.prototype.get element): Deleted.
(WebInspector.ScopeBarItem.prototype._markElementSelected): Deleted.
Cleaned up and modernized a bit.

Location:
trunk/Source/WebInspectorUI
Files:
1 added
10 edited
1 copied

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r185015 r185044  
     12015-05-29  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Resources tab navigation sidebar should have a type filter header
     4        https://bugs.webkit.org/show_bug.cgi?id=145474
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * Localizations/en.lproj/localizedStrings.js: Updated.
     9
     10        * UserInterface/Images/UpDownArrows.svg: Make styleable.
     11
     12        * UserInterface/Main.html: Added new files.
     13
     14        * UserInterface/Views/LogContentView.js:
     15        (WebInspector.LogContentView): Drive-by fix. Mark All as exclusive.
     16
     17        * UserInterface/Views/MultipleScopeBarItem.js: Added.
     18        (WebInspector.MultipleScopeBarItem):
     19        (WebInspector.MultipleScopeBarItem.prototype.get element):
     20        (WebInspector.MultipleScopeBarItem.prototype.get exclusive):
     21        (WebInspector.MultipleScopeBarItem.prototype.get scopeBarItems):
     22        (WebInspector.MultipleScopeBarItem.set scopeBarItems.createOption):
     23        (WebInspector.MultipleScopeBarItem.prototype.set scopeBarItems):
     24        (WebInspector.MultipleScopeBarItem.prototype.get selected):
     25        (WebInspector.MultipleScopeBarItem.prototype.set selected):
     26        (WebInspector.MultipleScopeBarItem.prototype.get selectedScopeBarItem):
     27        (WebInspector.MultipleScopeBarItem.prototype.set selectedScopeBarItem):
     28        (WebInspector.MultipleScopeBarItem.prototype._clicked):
     29        (WebInspector.MultipleScopeBarItem.prototype._selectElementSelectionChanged):
     30        (WebInspector.MultipleScopeBarItem.prototype._itemSelectionDidChange):
     31
     32        * UserInterface/Views/NavigationSidebarPanel.js:
     33        (WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstFilterFunctions):
     34        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
     35        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.makeVisible):
     36        (WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
     37        (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
     38        (WebInspector.NavigationSidebarPanel.prototype._treeElementAddedOrChanged):
     39        Improve filtering so non-text filters can choose to auto-expand the tree.
     40
     41        * UserInterface/Views/ResourceSidebarPanel.css: Added.
     42        (.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder)):
     43        (.sidebar > .panel.navigation.resource > .navigation-bar):
     44
     45        * UserInterface/Views/ResourceSidebarPanel.js:
     46        (WebInspector.ResourceSidebarPanel):
     47        (WebInspector.ResourceSidebarPanel.prototype.hasCustomFilters):
     48        (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters.match):
     49        (WebInspector.ResourceSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
     50        (WebInspector.ResourceSidebarPanel.prototype._scopeBarSelectionDidChange):
     51        Make a ScopeBar and make it filter the TreeOutline when needed.
     52
     53        * UserInterface/Views/ScopeBar.css:
     54        (.scope-bar > li.multiple):
     55        (.scope-bar > li.multiple > select):
     56        (.scope-bar > li.multiple.selected > select):
     57        (.scope-bar > li.multiple > .arrows):
     58        (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .filled):
     59        (.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .stroked):
     60
     61        * UserInterface/Views/ScopeBar.js:
     62        (WebInspector.ScopeBar): Support shouldGroupNonExclusiveItems which will use MultipleScopeBarItem.
     63        (WebInspector.ScopeBar.prototype._populate):
     64        (WebInspector.ScopeBar.prototype._itemSelectionDidChange):
     65        (WebInspector.ScopeBar.prototype.updateLayout): Deleted. Not needed for our current styles.
     66
     67        * UserInterface/Views/ScopeBarItem.js:
     68        (WebInspector.ScopeBarItem):
     69        (WebInspector.ScopeBarItem.prototype.get id):
     70        (WebInspector.ScopeBarItem.prototype.get label):
     71        (WebInspector.ScopeBarItem.prototype.get exclusive):
     72        (WebInspector.ScopeBarItem.prototype.setSelected):
     73        (WebInspector.ScopeBarItem.prototype._clicked):
     74        (WebInspector.ScopeBarItem.prototype.get element): Deleted.
     75        (WebInspector.ScopeBarItem.prototype._markElementSelected): Deleted.
     76        Cleaned up and modernized a bit.
     77
    1782015-05-29  Tobias Reiss  <tobi+webkit@basecode.de>
    279

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

    r184996 r185044  
    5151localizedStrings["All Changes"] = "All Changes";
    5252localizedStrings["All Exceptions"] = "All Exceptions";
     53localizedStrings["All Resources"] = "All Resources";
    5354localizedStrings["All Uncaught Exceptions"] = "All Uncaught Exceptions";
    5455localizedStrings["An error occured trying to\nread the “%s” table."] = "An error occured trying to\nread the “%s” table.";

  • trunk/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg

    r172241 r185044  
    22<!-- Copyright © 2014 Apple Inc. All rights reserved. -->
    33<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 12">
    4     <path fill="none" stroke="black" stroke-linecap="square" d="M 0.5 3.5 L 2.5 1.5 L 4.5 3.5"/>
    5     <path fill="none" stroke="black" stroke-linecap="square" d="M 0.5 8.5 L 2.5 10.5 L 4.5 8.5"/>
     4    <path class="stroked" fill="none" stroke="black" stroke-linecap="square" d="M 0.5 3.5 L 2.5 1.5 L 4.5 3.5"/>
     5    <path class="stroked" fill="none" stroke="black" stroke-linecap="square" d="M 0.5 8.5 L 2.5 10.5 L 4.5 8.5"/>
    66</svg>

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

    r184736 r185044  
    121121    <link rel="stylesheet" href="Views/Resizer.css">
    122122    <link rel="stylesheet" href="Views/ResourceIcons.css">
     123    <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
    123124    <link rel="stylesheet" href="Views/ResourceTreeElement.css">
    124125    <link rel="stylesheet" href="Views/RulesStyleDetailsPanel.css">
    … …  
    457458    <script src="Views/LogTreeElement.js"></script>
    458459    <script src="Views/MetricsStyleDetailsPanel.js"></script>
     460    <script src="Views/MultipleScopeBarItem.js"></script>
    459461    <script src="Views/NavigationBar.js"></script>
    460462    <script src="Views/NetworkTimelineOverviewGraph.js"></script>

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

    r185015 r185044  
    6060
    6161    var scopeBarItems = [
    62         new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All")),
     62        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
    6363        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Errors, WebInspector.UIString("Errors")),
    6464        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Warnings, WebInspector.UIString("Warnings")),

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

    r184508 r185044  
    307307    matchTreeElementAgainstFilterFunctions(treeElement)
    308308    {
    309         if (!this._filterFunctions.length)
     309        if (!this._filterFunctions || !this._filterFunctions.length)
    310310            return true;
    311311
    … …  
    314314                return true;
    315315        }
     316
    316317        return false;
    317318    }
    … …  
    334335        var filterableData = treeElement.filterableData || {};
    335336
    336         var matchedBuiltInFilters = false;
     337        var flags = {expandTreeElement: false};
    337338
    338339        var self = this;
    … …  
    351352                    continue;
    352353                if (self._textFilterRegex.test(input)) {
    353                     matchedBuiltInFilters = true;
     354                    flags.expandTreeElement = true;
    354355                    return true;
    355356                }
    … …  
    371372
    372373                // Only expand if the built-in filters matched, not custom filters.
    373                 if (matchedBuiltInFilters && !currentAncestor.expanded) {
     374                if (flags.expandTreeElement && !currentAncestor.expanded) {
    374375                    currentAncestor.__wasExpandedDuringFiltering = true;
    375376                    currentAncestor.expand();
    … …  
    380381        }
    381382
    382         if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
     383        if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement, flags) && this.matchTreeElementAgainstCustomFilters(treeElement, flags)) {
    383384            // Make this element visible since it matches.
    384385            makeVisible();
    385386
    386387            // If this tree element didn't match a built-in filter and was expanded earlier during filtering, collapse it again.
    387             if (!matchedBuiltInFilters && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
     388            if (!flags.expandTreeElement && treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
    388389                delete treeElement.__wasExpandedDuringFiltering;
    389390                treeElement.collapse();
    … …  
    520521        // Don't populate if we don't have any active filters.
    521522        // We only need to populate when a filter needs to reveal.
    522         var dontPopulate = !this._filterBar.hasActiveFilters();
     523        var dontPopulate = !this._filterBar.hasActiveFilters() && !this.hasCustomFilters();
    523524
    524525        // Update the whole tree.
    … …  
    545546        // Don't populate if we don't have any active filters.
    546547        // We only need to populate when a filter needs to reveal.
    547         var dontPopulate = !this._filterBar.hasActiveFilters();
     548        var dontPopulate = !this._filterBar.hasActiveFilters() && !this.hasCustomFilters();
    548549
    549550        // Apply the filters to the tree element and its descendants.

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

    r185042 r185044  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2015 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .scope-bar {
    27     padding: 0 3px;
    28     overflow: hidden;
     26.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
     27    top: 29px;
    2928}
    3029
    31 .scope-bar > li {
    32     display: inline-block;
    33     margin: 0 2px;
    34     padding: 1px 8px 3px;
    35     font-size: 11px;
    36     line-height: 11px;
    37     color: rgb(46, 46, 46);
    38     background-color: transparent;
    39     border: 1px solid transparent;
    40     border-radius: 3px;
    41     text-align: center;
     30.sidebar > .panel.navigation.resource > .navigation-bar {
     31    position: absolute;
     32    top: 0;
     33    left: 0;
     34    right: 0;
    4235}
    43 
    44 .scope-bar > li:matches(.selected, :active) {
    45     transition-duration: 75ms;
    46 }
    47 
    48 .scope-bar > li:hover {
    49     color: white;
    50     background-color: rgba(34, 131, 246, 0.5);
    51 }
    52 
    53 .scope-bar > li.selected {
    54     color: white;
    55     background-color: rgba(34, 131, 246, 1);
    56 }
    57 
    58 .scope-bar > li:active {
    59     color: white;
    60     background-color: rgba(34, 131, 246, 0.55);
    61 }
    62 
    63 .scope-bar > li.selected:active {
    64     background-color: rgba(31, 105, 238, 1);
    65 }

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

    r184108 r185044  
    3434        this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
    3535
     36        this._navigationBar = new WebInspector.NavigationBar;
     37        this.element.appendChild(this._navigationBar.element);
     38
     39        var scopeItemPrefix = "resource-sidebar-";
     40        var scopeBarItems = [];
     41
     42        scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Resources"), true));
     43
     44        for (var key in WebInspector.Resource.Type) {
     45            var value = WebInspector.Resource.Type[key];
     46            var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
     47            scopeBarItem.__resourceType = value;
     48            scopeBarItems.push(scopeBarItem);
     49        }
     50
     51        this._scopeBar = new WebInspector.ScopeBar("resource-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
     52        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
     53
     54        this._navigationBar.addNavigationItem(this._scopeBar);
     55
    3656        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    3757
    … …  
    151171
    152172        return scriptTreeElement;
     173    }
     174
     175    // Protected
     176
     177    hasCustomFilters()
     178    {
     179        console.assert(this._scopeBar.selectedItems.length === 1);
     180        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
     181        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
     182    }
     183
     184    matchTreeElementAgainstCustomFilters(treeElement, flags)
     185    {
     186        console.assert(this._scopeBar.selectedItems.length === 1);
     187        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
     188
     189        // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
     190        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
     191            return true;
     192
     193        // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
     194        if (treeElement instanceof WebInspector.FolderTreeElement)
     195            return false;
     196
     197        function match()
     198        {
     199            if (treeElement instanceof WebInspector.FrameTreeElement)
     200                return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Document;
     201
     202            if (treeElement instanceof WebInspector.ScriptTreeElement)
     203                return selectedScopeBarItem.__resourceType === WebInspector.Resource.Type.Script;
     204
     205            console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
     206            if (!(treeElement instanceof WebInspector.ResourceTreeElement))
     207                return false;
     208
     209            return treeElement.resource.type === selectedScopeBarItem.__resourceType;
     210        }
     211
     212        var matched = match();
     213        if (matched)
     214            flags.expandTreeElement = true;
     215        return matched;
    153216    }
    154217
    … …  
    300363            this.contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
    301364    }
     365
     366    _scopeBarSelectionDidChange(event)
     367    {
     368        this.updateFilter();
     369    }
    302370};

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

    r183579 r185044  
    4242}
    4343
     44.scope-bar > li.multiple {
     45    position: relative;
     46}
     47
     48.scope-bar > li.multiple > select {
     49    display: none;
     50    opacity: 0;
     51
     52 /* Positioned so the text in the menu aligns with the content text. */
     53    position: absolute;
     54    top: -5px;
     55    left: -4px;
     56    right: 0;
     57    bottom: 0;
     58}
     59
     60.scope-bar > li.multiple.selected > select {
     61    display: block;
     62}
     63
     64.scope-bar > li.multiple > .arrows {
     65    width: 5px;
     66    height: 12px;
     67    display: inline-block;
     68    vertical-align: -2px;
     69    margin-left: 6px;
     70    margin-top: -1px;
     71    margin-bottom: -1px;
     72}
     73
     74.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .filled {
     75    fill: white !important;
     76}
     77
     78.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows svg .stroked {
     79    stroke: white !important;
     80}
     81
    4482.scope-bar > li:matches(.selected, :active) {
    4583    transition-duration: 75ms;

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

    r182040 r185044  
    2626WebInspector.ScopeBar = class ScopeBar extends WebInspector.NavigationItem
    2727{
    28     constructor(identifier, items, defaultItem)
     28    constructor(identifier, items, defaultItem, shouldGroupNonExclusiveItems)
    2929    {
    3030        super(identifier);
    … …  
    3434        this._items = items;
    3535        this._defaultItem = defaultItem;
     36        this._shouldGroupNonExclusiveItems = shouldGroupNonExclusiveItems || false;
    3637
    37         this._itemsById = [];
    3838        this._populate();
    3939    }
    … …  
    4848    item(id)
    4949    {
    50         return this._itemsById[id];
     50        return this._itemsById.get(id);
    5151    }
    5252
    … …  
    6565    }
    6666
    67     updateLayout(expandOnly)
    68     {
    69         if (expandOnly)
    70             return;
    71 
    72         for (var i = 0; i < this._items.length; ++i) {
    73             var item = this._items[i];
    74             var isSelected = item.selected;
    75 
    76             if (!isSelected)
    77                 item.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
    78 
    79             var selectedWidth = item.element.offsetWidth;
    80             if (selectedWidth)
    81                 item.element.style.minWidth = selectedWidth + "px";
    82 
    83             if (!isSelected)
    84                 item.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
    85         }
    86     }
    87 
    8867    // Private
    8968
    9069    _populate()
    9170    {
    92         var item;
    93         for (var i = 0; i < this._items.length; ++i) {
    94             item = this._items[i];
    95             this._itemsById[item.id] = item;
    96             this._element.appendChild(item.element);
     71        this._itemsById = new Map;
    9772
    98             item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
     73        if (this._shouldGroupNonExclusiveItems) {
     74            var nonExclusiveItems = [];
     75
     76            for (var item of this._items) {
     77                this._itemsById.set(item.id, item);
     78
     79                if (item.exclusive)
     80                    this._element.appendChild(item.element);
     81                else
     82                    nonExclusiveItems.push(item);
     83
     84                item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
     85            }
     86
     87            this._multipleItem = new WebInspector.MultipleScopeBarItem(nonExclusiveItems);
     88            this._element.appendChild(this._multipleItem.element);
     89        } else {
     90            for (var item of this._items) {
     91                this._itemsById.set(item.id, item);
     92                this._element.appendChild(item.element);
     93
     94                item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
     95            }
    9996        }
    10097
    … …  
    109106
    110107        // An exclusive item was selected, unselect everything else.
    111         if (sender.isExclusive && sender.selected) {
     108        if (sender.exclusive && sender.selected) {
    112109            for (var i = 0; i < this._items.length; ++i) {
    113110                item = this._items[i];
    … …  
    116113            }
    117114        } else {
    118             var replacesCurrentSelection = !event.data.withModifier;
     115            var replacesCurrentSelection = this._shouldGroupNonExclusiveItems || !event.data.withModifier;
    119116            for (var i = 0; i < this._items.length; ++i) {
    120117                item = this._items[i];
    121                 if (item.isExclusive && item !== sender && sender.selected)
     118                if (item.exclusive && item !== sender && sender.selected)
    122119                    item.selected = false;
    123120                else if (sender.selected && replacesCurrentSelection && sender !== item)

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

    r182040 r185044  
    2626WebInspector.ScopeBarItem = class ScopeBarItem extends WebInspector.Object
    2727{
    28     constructor(id, label, isExclusive)
     28    constructor(id, label, exclusive)
    2929    {
    3030        super();
    3131
    32         this.id = id;
    33         this.label = label;
    34         this.isExclusive = isExclusive;
     32        this._element = document.createElement("li");
     33        this._element.classList.toggle("exclusive", exclusive);
     34        this._element.textContent = label;
     35        this._element.addEventListener("click", this._clicked.bind(this));
     36
     37        this._id = id;
     38        this._label = label;
     39        this._exclusive = exclusive;
    3540
    3641        this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
    3742
    38         this._markElementSelected(this._selectedSetting.value);
     43        this._element.classList.toggle("selected", this._selectedSetting.value);
    3944    }
    4045
    … …  
    4348    get element()
    4449    {
    45         if (!this._element) {
    46             this._element = document.createElement("li");
    47             this._element.textContent = this.label;
    48             this._element.addEventListener("click", this._clicked.bind(this), false);
    49         }
    5050        return this._element;
     51    }
     52
     53    get id()
     54    {
     55        return this._id;
     56    }
     57
     58    get label()
     59    {
     60        return this._label;
     61    }
     62
     63    get exclusive()
     64    {
     65        return this._exclusive;
    5166    }
    5267
    … …  
    6681            return;
    6782
    68         this._markElementSelected(selected);
    69 
     83        this._element.classList.toggle("selected", selected);
    7084        this._selectedSetting.value = selected;
    7185
    … …  
    7589    // Private
    7690
    77     _markElementSelected(selected)
    78     {
    79         if (selected)
    80             this.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
    81         else
    82             this.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
    83     }
    84 
    8591    _clicked(event)
    8692    {
    87         var withModifier = (event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
    88         this.setSelected(!this.selected, withModifier);
     93        this.setSelected(!this.selected, event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
    8994    }
    9095};
    91 
    92 WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
    9396
    9497WebInspector.ScopeBarItem.Event = {
Note: See TracChangeset for help on using the changeset viewer.