Changeset 47011 in webkit


Ignore:
Timestamp:
Aug 10, 2009 4:29:29 PM (15 years ago)
Author:
rik@webkit.org
Message:

Inspector Resources / Graphs should support filtering
​https://bugs.webkit.org/show_bug.cgi?id=20629

Patch by Anthony Ricaud <​rik@webkit.org> on 2009-08-10
Reviewed by Timothy Hatcher.

Introduces a filter bar for resources.

Thanks to Matt Lilek for the CSS scope bar.

  • English.lproj/localizedStrings.js:
  • inspector/front-end/ResourcesPanel.js:

(WebInspector.ResourcesPanel.createFilterElement):
(WebInspector.ResourcesPanel):
(WebInspector.ResourcesPanel.prototype.toolbarItemClass.categoryOrder.filter):
(WebInspector.ResourcesPanel.prototype._updateFilter):
(WebInspector.ResourcesPanel.prototype._updateSummaryGraph):

  • inspector/front-end/inspector.css:
  • inspector/front-end/inspector.js:

(WebInspector.loaded):

Location:
trunk/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r47009 r47011  
     12009-08-10  Anthony Ricaud  <rik@webkit.org>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        Inspector Resources / Graphs should support filtering
     6        https://bugs.webkit.org/show_bug.cgi?id=20629
     7
     8        Introduces a filter bar for resources.
     9
     10        Thanks to Matt Lilek for the CSS scope bar.
     11
     12        * English.lproj/localizedStrings.js:
     13        * inspector/front-end/ResourcesPanel.js:
     14        (WebInspector.ResourcesPanel.createFilterElement):
     15        (WebInspector.ResourcesPanel):
     16        (WebInspector.ResourcesPanel.prototype.toolbarItemClass.categoryOrder.filter):
     17        (WebInspector.ResourcesPanel.prototype._updateFilter):
     18        (WebInspector.ResourcesPanel.prototype._updateSummaryGraph):
     19        * inspector/front-end/inspector.css:
     20        * inspector/front-end/inspector.js:
     21        (WebInspector.loaded):
     22
    1232009-08-10  Brent Fulgham  <bfulgham@webkit.org>
    224

  • trunk/WebCore/inspector/front-end/ResourcesPanel.js

    r46979 r47011  
    11/*
    22 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
    3  * Copyright (C) 2008 Anthony Ricaud (rik24d@gmail.com)
     3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
    44 *
    55 * Redistribution and use in source and binary forms, with or without
    … …  
    3434    this.element.addStyleClass("resources");
    3535
     36    this.filterBarElement = document.createElement("div");
     37    this.filterBarElement.id = "resources-filter";
     38    this.element.appendChild(this.filterBarElement);
     39
    3640    this.viewsContainerElement = document.createElement("div");
    3741    this.viewsContainerElement.id = "resource-views";
    … …  
    150154    this.sortingSelectElement.addEventListener("change", this._changeSortingFunction.bind(this), false);
    151155
     156    var createFilterElement = function (category) {
     157        var categoryElement = document.createElement("li");
     158        categoryElement.category = category;
     159        categoryElement.addStyleClass(category);
     160        var label = WebInspector.UIString("All");
     161        if (WebInspector.resourceCategories[category])
     162            label = WebInspector.resourceCategories[category].title;
     163        categoryElement.appendChild(document.createTextNode(label));
     164        categoryElement.addEventListener("click", this._updateFilter.bind(this), false);
     165        this.filterBarElement.appendChild(categoryElement);
     166        return categoryElement;
     167    };
     168
     169    var allElement = createFilterElement.call(this, "all");
     170    this.filter(allElement.category);
     171    for (var i = 0; i < this.categoryOrder.length; i++)
     172        createFilterElement.call(this, this.categoryOrder[i]);
     173
    152174    this.reset();
    153175
    … …  
    157179WebInspector.ResourcesPanel.prototype = {
    158180    toolbarItemClass: "resources",
     181
     182    categoryOrder: ["documents", "stylesheets", "images", "scripts", "xhr", "fonts", "other"],
     183
     184    filter: function (category) {
     185        if (this._filterCategory && this._filterCategory === category)
     186            return;
     187
     188        if (this._filterCategory) {
     189            var filterElement = this.filterBarElement.getElementsByClassName(this._filterCategory)[0];
     190            filterElement.removeStyleClass("selected");
     191            var oldClass = "filter-" + this._filterCategory;
     192            this.resourcesTreeElement.childrenListElement.removeStyleClass(oldClass);
     193            this.resourcesGraphsElement.removeStyleClass(oldClass);
     194        }
     195        this._filterCategory = category;
     196        var filterElement = this.filterBarElement.getElementsByClassName(this._filterCategory)[0];
     197        filterElement.addStyleClass("selected");
     198        var newClass = "filter-" + this._filterCategory;
     199        this.resourcesTreeElement.childrenListElement.addStyleClass(newClass);
     200        this.resourcesGraphsElement.addStyleClass(newClass);
     201    },
     202
     203    _updateFilter: function (e) {
     204        this.filter(e.target.category);
     205    },
    159206
    160207    get toolbarItemLabel()
    … …  
    9581005        var graphInfo = this.calculator.computeSummaryValues(this._resources);
    9591006
    960         var categoryOrder = ["documents", "stylesheets", "images", "scripts", "xhr", "fonts", "other"];
    9611007        var categoryColors = {documents: {r: 47, g: 102, b: 236}, stylesheets: {r: 157, g: 231, b: 119}, images: {r: 164, g: 60, b: 255}, scripts: {r: 255, g: 121, b: 0}, xhr: {r: 231, g: 231, b: 10}, fonts: {r: 255, g: 82, b: 62}, other: {r: 186, g: 186, b: 186}};
    9621008        var fillSegments = [];
    … …  
    9641010        this.legendElement.removeChildren();
    9651011
    966         for (var i = 0; i < categoryOrder.length; ++i) {
    967             var category = categoryOrder[i];
     1012        for (var i = 0; i < this.categoryOrder.length; ++i) {
     1013            var category = this.categoryOrder[i];
    9681014            var size = graphInfo.categoryValues[category];
    9691015            if (!size)

  • trunk/WebCore/inspector/front-end/inspector.css

    r46979 r47011  
    11/*
    22 * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
     3 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    22132214}
    22142215
     2216#resources-filter {
     2217    height: 24px;
     2218    padding: 2px 10px 0;
     2219    background: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
     2220    border-bottom: 1px solid rgb(177, 177, 177);
     2221    overflow: hidden;
     2222}
     2223
     2224#resources-filter li {
     2225    display: inline-block;
     2226    margin: 1px 1px 0 0;
     2227    padding: 0 6px 3px;
     2228    font-size: 12px;
     2229    line-height: 12px;
     2230    font-weight: bold;
     2231    color: rgb(40, 40, 40);
     2232    border: 1px solid transparent;
     2233    border-bottom: 0;
     2234    background: transparent;
     2235    -webkit-border-radius: 8px;
     2236    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0;
     2237}
     2238
     2239#resources-filter li.selected, #resources-filter li:hover, #resources-filter li:active {
     2240    color: white;
     2241    text-shadow: rgb(80, 80, 80) 1px 1px 1px;
     2242    background: rgba(20, 20, 20, 0.4);
     2243    border-color: rgba(20, 20, 20, 0.2);
     2244    -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.5);
     2245}
     2246
     2247#resources-filter li:hover {
     2248    background: rgba(20, 20, 20, 0.4);
     2249    border-color: transparent;
     2250    -webkit-box-shadow: none;
     2251}
     2252
     2253#resources-filter li:active {
     2254    background: rgba(20, 20, 20, 0.6);
     2255}
     2256
    22152257#resources-container {
    22162258    position: absolute;
    2217     top: 0;
     2259    top: 24px;
    22182260    left: 0;
    22192261    bottom: 0;
    … …  
    24202462}
    24212463
     2464.resources-category-documents, .resources-category-stylesheets, .resources-category-images,
     2465.resources-category-scripts, .resources-category-xhr, .resources-category-fonts, .resources-category-other {
     2466    display: none;
     2467}
     2468
     2469.filter-all .resources-category-documents, .filter-documents .resources-category-documents,
     2470.filter-all .resources-category-stylesheets, .filter-stylesheets .resources-category-stylesheets,
     2471.filter-all .resources-category-images, .filter-images .resources-category-images,
     2472.filter-all .resources-category-scripts, .filter-scripts .resources-category-scripts,
     2473.filter-all .resources-category-xhr, .filter-xhr .resources-category-xhr,
     2474.filter-all .resources-category-fonts, .filter-fonts .resources-category-fonts,
     2475.filter-all .resources-category-other, .filter-other .resources-category-other,
     2476.resource-sidebar-tree-item.selected {
     2477    display: list-item;
     2478}
     2479
    24222480.resources-graph-bar.waiting {
    24232481    opacity: 0.35;
    … …  
    25232581#resource-views {
    25242582    position: absolute;
    2525     top: 0;
     2583    top: 24px;
    25262584    right: 0;
    25272585    left: 200px;
    … …  
    25412599    z-index: 500;
    25422600    cursor: col-resize;
     2601}
     2602
     2603.resources .sidebar-resizer-vertical {
     2604    top: 24px;
    25432605}
    25442606

  • trunk/WebCore/inspector/front-end/inspector.js

    r46732 r47011  
    358358        this.domAgent = new WebInspector.DOMAgent();
    359359
     360    this.resourceCategories = {
     361        documents: new WebInspector.ResourceCategory(WebInspector.UIString("Documents"), "documents"),
     362        stylesheets: new WebInspector.ResourceCategory(WebInspector.UIString("Stylesheets"), "stylesheets"),
     363        images: new WebInspector.ResourceCategory(WebInspector.UIString("Images"), "images"),
     364        scripts: new WebInspector.ResourceCategory(WebInspector.UIString("Scripts"), "scripts"),
     365        xhr: new WebInspector.ResourceCategory(WebInspector.UIString("XHR"), "xhr"),
     366        fonts: new WebInspector.ResourceCategory(WebInspector.UIString("Fonts"), "fonts"),
     367        other: new WebInspector.ResourceCategory(WebInspector.UIString("Other"), "other")
     368    };
     369
    360370    this.panels = {};
    361371    this._createPanels();
    … …  
    376386        previousToolbarItem = panelToolbarItem;
    377387    }
    378 
    379     this.resourceCategories = {
    380         documents: new WebInspector.ResourceCategory(WebInspector.UIString("Documents"), "documents"),
    381         stylesheets: new WebInspector.ResourceCategory(WebInspector.UIString("Stylesheets"), "stylesheets"),
    382         images: new WebInspector.ResourceCategory(WebInspector.UIString("Images"), "images"),
    383         scripts: new WebInspector.ResourceCategory(WebInspector.UIString("Scripts"), "scripts"),
    384         xhr: new WebInspector.ResourceCategory(WebInspector.UIString("XHR"), "xhr"),
    385         fonts: new WebInspector.ResourceCategory(WebInspector.UIString("Fonts"), "fonts"),
    386         other: new WebInspector.ResourceCategory(WebInspector.UIString("Other"), "other")
    387     };
    388388
    389389    this.Tips = {
Note: See TracChangeset for help on using the changeset viewer.