Changeset 36426 in webkit


Ignore:
Timestamp:
Sep 14, 2008 10:38:00 PM (16 years ago)
Author:
timothy@apple.com
Message:

Moving all resource graphs under the same container for future scalable feature.
This is a speedup on resize but maybe a loss on changing the sorting function.

​https://bugs.webkit.org/show_bug.cgi?id=20555

Reviewed by Timothy Hatcher.

  • page/inspector/ResourcesPanel.js: Added a container for all resource graphs. Added WebInspector.ResourceGraph. No more _updateGraphBars on resize.
  • page/inspector/inspector.css: Edited corresponding rules and removed unnecessaries.
Location:
trunk/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r36423 r36426  
     12008-09-14  Anthony Ricaud  <rik24d@gmail.com>
     2
     3        Moving all resource graphs under the same container for future scalable feature.
     4        This is a speedup on resize but maybe a loss on changing the sorting function.
     5
     6        https://bugs.webkit.org/show_bug.cgi?id=20555
     7
     8        Reviewed by Timothy Hatcher.
     9
     10        * page/inspector/ResourcesPanel.js: Added a container for all resource graphs.
     11        Added WebInspector.ResourceGraph. No more _updateGraphBars on resize.
     12        * page/inspector/inspector.css: Edited corresponding rules and removed unnecessaries.
     13
    1142008-09-14  Alexey Proskuryakov  <ap@webkit.org>
    215

  • trunk/WebCore/page/inspector/ResourcesPanel.js

    r35881 r36426  
    11/*
    22 * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
     3 * Copyright (C) 2008 Anthony Ricaud (rik24d@gmail.com)
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    6061    this.containerContentElement.appendChild(this.summaryElement);
    6162
     63    this.resourcesGraphsElement = document.createElement("div");
     64    this.resourcesGraphsElement.id = "resources-graphs";
     65    this.containerContentElement.appendChild(this.resourcesGraphsElement);
     66
    6267    this.dividersElement = document.createElement("div");
    6368    this.dividersElement.id = "resources-dividers";
    … …  
    167172    {
    168173        this._updateGraphDividersIfNeeded();
    169         this._updateGraphBars();
    170174
    171175        var visibleResourceView = this.visibleResourceView;
    … …  
    213217    {
    214218        return this._needsRefresh;
    215     }, 
     219    },
    216220
    217221    set needsRefresh(x)
    … …  
    270274        this.resourcesTreeElement.removeChildren();
    271275        this.resourceViews.removeChildren();
     276        this.resourcesGraphsElement.removeChildren();
    272277
    273278        this._updateGraphDividersIfNeeded(true);
    … …  
    283288        resource._resourcesTreeElement = resourceTreeElement;
    284289
    285         resourceTreeElement.updateGraphSideWidth(this.dividersElement.offsetWidth);
     290        var resourceGraph = new WebInspector.ResourceGraph(resource);
     291        resource._resourcesTreeElement._resourceGraph = resourceGraph;
     292
     293        this.resourcesGraphsElement.appendChild(resourceGraph.graphElement);
    286294
    287295        this.resourcesTreeElement.appendChild(resourceTreeElement);
    … …  
    304312
    305313        this.resourcesTreeElement.removeChild(resource._resourcesTreeElement);
     314        this.resourcesGraphsElement.removeChild(resource._resourcesTreeElement._resourceGraph);
    306315
    307316        resource.warnings = 0;
    … …  
    379388        var percentages = this.calculator.computeBarGraphPercentages(resource);
    380389
    381         var barLeftElement = resource._resourcesTreeElement.barLeftElement;
    382         barLeftElement.style.left = percentages.start + "%";
    383         barLeftElement.style.right = (100 - percentages.end) + "%";
    384 
    385         var barRightElement = resource._resourcesTreeElement.barRightElement;
    386         barRightElement.style.left = percentages.middle + "%";
    387         barRightElement.style.right = (100 - percentages.end) + "%";
     390        resource._resourcesTreeElement._resourceGraph.refresh(percentages);
    388391    },
    389392
    … …  
    548551            if (treeElement === this.resourcesTreeElement.children[i])
    549552                continue;
     553
    550554            var wasSelected = treeElement.selected;
    551555            this.resourcesTreeElement.removeChild(treeElement);
    … …  
    553557            if (wasSelected)
    554558                treeElement.select(true);
     559
     560            var graphElement = treeElement._resourceGraph.graphElement;
     561            this.resourcesGraphsElement.removeChild(graphElement);
     562            this.resourcesGraphsElement.insertBefore(graphElement, this.resourcesGraphsElement.children[i]);
    555563        }
    556564    },
    … …  
    624632
    625633            this.dividersLabelBarElement.appendChild(divider);
    626         }
    627     },
    628 
    629     _updateGraphBars: function()
    630     {
    631         if (!this.visible) {
    632             this.needsRefresh = true;
    633             return;
    634         }
    635 
    636         if (document.body.offsetWidth <= 0) {
    637             // The stylesheet hasn't loaded yet or the window is closed,
    638             // so we can't calculate what is need. Return early.
    639             return;
    640         }
    641 
    642         var dividersElementWidth = this.dividersElement.offsetWidth;
    643         var resourcesLength = this._resources.length;
    644         for (var i = 0; i < resourcesLength; ++i) {
    645             var resourceTreeItem = this._resources[i]._resourcesTreeElement;
    646             if (!resourceTreeItem)
    647                 continue;
    648             resourceTreeItem.updateGraphSideWidth(dividersElementWidth);
    649634        }
    650635    },
    … …  
    996981
    997982        if (this.resourcesTreeElement.smallChildren) {
     983            this.resourcesGraphsElement.addStyleClass("small");
    998984            this.largerResourcesButton.title = WebInspector.UIString("Use large resource rows.");
    999985            this.largerResourcesButton.removeStyleClass("toggled-on");
    1000986        } else {
     987            this.resourcesGraphsElement.removeStyleClass("small");
    1001988            this.largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
    1002989            this.largerResourcesButton.addStyleClass("toggled-on");
    … …  
    10751062        this.sidebarResizeElement.style.left = (width - 3) + "px";
    10761063
    1077         this._updateGraphBars();
    10781064        this._updateGraphDividersIfNeeded();
    10791065
    … …  
    12191205        else
    12201206            var start = 100;
    1221        
     1207
    12221208        if (resource.responseReceivedTime !== -1)
    12231209            var middle = ((resource.responseReceivedTime - this.minimumBoundary) / this.boundarySpan) * 100;
    12241210        else
    12251211            var middle = 100;
    1226        
     1212
    12271213        if (resource.endTime !== -1)
    12281214            var end = ((resource.endTime - this.minimumBoundary) / this.boundarySpan) * 100;
    … …  
    13521338
    13531339    this.refreshTitles();
    1354 
    1355     this.graphSideElement = document.createElement("div");
    1356     this.graphSideElement.className = "resources-graph-side";
    1357 
    1358     this.barAreaElement = document.createElement("div");
    1359     this.barAreaElement.className = "resources-graph-bar-area";
    1360     this.graphSideElement.appendChild(this.barAreaElement);
    1361 
    1362     this.barLeftElement = document.createElement("div");
    1363     this.barLeftElement.className = "resources-graph-bar waiting";
    1364     this.barAreaElement.appendChild(this.barLeftElement);
    1365    
    1366     this.barRightElement = document.createElement("div");
    1367     this.barRightElement.className = "resources-graph-bar";
    1368     this.barAreaElement.appendChild(this.barRightElement);
    13691340}
    13701341
    … …  
    13741345        WebInspector.SidebarTreeElement.prototype.onattach.call(this);
    13751346
    1376         this._listItemNode.appendChild(this.graphSideElement);
    13771347        this._listItemNode.addStyleClass("resources-category-" + this.resource.category.name);
    13781348    },
    … …  
    14601430        else
    14611431            this.bubbleElement.removeStyleClass("error");
    1462     },
    1463 
    1464     updateGraphSideWidth: function(width)
    1465     {
    1466         width += 1; // Add one to account for the sidebar border width.
    1467         this.graphSideElement.style.right = -width + "px";
    1468         this.graphSideElement.style.width = width + "px";
    14691432    }
    14701433}
    … …  
    15071470
    15081471WebInspector.ResourceSidebarTreeElement.prototype.__proto__ = WebInspector.SidebarTreeElement.prototype;
     1472
     1473WebInspector.ResourceGraph = function(resource)
     1474{
     1475    this.resource = resource;
     1476
     1477    this._graphElement = document.createElement("div");
     1478    this._graphElement.className = "resources-graph-side";
     1479
     1480    this._barAreaElement = document.createElement("div");
     1481    this._barAreaElement.className = "resources-graph-bar-area";
     1482    this._graphElement.appendChild(this._barAreaElement);
     1483
     1484    this._barLeftElement = document.createElement("div");
     1485    this._barLeftElement.className = "resources-graph-bar waiting";
     1486    this._barAreaElement.appendChild(this._barLeftElement);
     1487
     1488    this._barRightElement = document.createElement("div");
     1489    this._barRightElement.className = "resources-graph-bar";
     1490    this._barAreaElement.appendChild(this._barRightElement);
     1491
     1492    this._graphElement.addStyleClass("resources-category-" + resource.category.name);
     1493}
     1494
     1495WebInspector.ResourceGraph.prototype = {
     1496    get graphElement()
     1497    {
     1498        return this._graphElement;
     1499    },
     1500
     1501    refresh: function(percentages)
     1502    {
     1503        if (!this._graphElement.hasStyleClass("resources-category-" + this.resource.category.name)) {
     1504            this._graphElement.removeMatchingStyleClasses("resources-category-\\w+");
     1505            this._graphElement.addStyleClass("resources-category-" + this.resource.category.name);
     1506        }
     1507
     1508        this._barLeftElement.style.setProperty("left", percentages.start + "%");
     1509        this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
     1510
     1511        this._barRightElement.style.setProperty("left", percentages.middle + "%");
     1512        this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
     1513    }
     1514}

  • trunk/WebCore/page/inspector/inspector.css

    r36255 r36426  
    21332133}
    21342134
    2135 .resource-sidebar-tree-item.resources-category-documents .resources-graph-bar {
     2135.resources-category-documents .resources-graph-bar {
    21362136    -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
    21372137}
    21382138
    2139 .resource-sidebar-tree-item.resources-category-stylesheets .resources-graph-bar {
     2139.resources-category-stylesheets .resources-graph-bar {
    21402140    -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
    21412141}
    21422142
    2143 .resource-sidebar-tree-item.resources-category-images .resources-graph-bar {
     2143.resources-category-images .resources-graph-bar {
    21442144    -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
    21452145}
    21462146
    2147 .resource-sidebar-tree-item.resources-category-fonts .resources-graph-bar {
     2147.resources-category-fonts .resources-graph-bar {
    21482148    -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
    21492149}
    21502150
    2151 .resource-sidebar-tree-item.resources-category-scripts .resources-graph-bar {
     2151.resources-category-scripts .resources-graph-bar {
    21522152    -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
    21532153}
    21542154
    2155 .resource-sidebar-tree-item.resources-category-xhr .resources-graph-bar {
     2155.resources-category-xhr .resources-graph-bar {
    21562156    -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
    21572157}
    … …  
    23882388}
    23892389
    2390 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small {
     2390.sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
    23912391    height: 20px;
    23922392    line-height: 18px;
    … …  
    24592459}
    24602460
    2461 .sidebar-tree-item .resources-graph-side {
    2462     position: absolute;
    2463     height: 100%;
    2464     top: 0;
    2465     right: 0;
    2466 }
    2467 
    2468 .sidebar-tree-item .resources-graph-bar-area {
     2461#resources-graphs {
     2462    position: absolute;
     2463    left: 0;
     2464    right: 0;
     2465    max-height: 100%;
     2466    top: 112px;
     2467    z-index: -100;
     2468}
     2469
     2470.resources-graph-side {
     2471    position: relative;
     2472    height: 36px;
     2473    padding: 0 5px 0 5px;
     2474    white-space: nowrap;
     2475    margin-top: 1px;
     2476    line-height: 34px;
     2477    border-top: 1px solid transparent;
     2478}
     2479
     2480.resources-graph-bar-area {
    24692481    position: absolute;
    24702482    top: 0;
    … …  
    24782490}
    24792491
    2480 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) .resources-graph-side {
     2492#resources-container:not(.viewing-resource) .resources-graph-side:nth-of-type(2n) {
    24812493    background-color: rgba(0, 0, 0, 0.05);
    2482 }
    2483 
    2484 #resources-container.viewing-resource #resources-sidebar .sidebar-tree-item .resources-graph-side {
    2485     display: none;
    24862494}
    24872495
Note: See TracChangeset for help on using the changeset viewer.