Changeset 72657 in webkit


Ignore:
Timestamp:
Nov 24, 2010 3:04:22 AM (13 years ago)
Author:
pfeldman@chromium.org
Message:

2010-11-22 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: add timing tab to the network item view.
​https://bugs.webkit.org/show_bug.cgi?id=49920

  • WebCore.gypi:
  • WebCore.vcproj/WebCore.vcproj:
  • inspector/front-end/NetworkItemView.js: (WebInspector.NetworkItemView):
  • inspector/front-end/NetworkPanel.js: (WebInspector.NetworkPanel.prototype._showPopover):
  • inspector/front-end/Resource.js: (WebInspector.Resource.prototype.set timing):
  • inspector/front-end/ResourceTimingView.js: Added. (WebInspector.ResourceTimingView): (WebInspector.ResourceTimingView.prototype.show): (WebInspector.ResourceTimingView.prototype._refresh): (WebInspector.ResourceTimingView.createTimingTable):
  • inspector/front-end/WebKit.qrc:
  • inspector/front-end/inspector.html:
  • inspector/front-end/networkPanel.css: (#network-views .network-item-view .tabbed-pane-header): (.resource-timing-view): (.resource-timing-view table): (.resource-timing-view .network-timing-bar): (.resource-timing-view .network-timing-bar.proxy): (.resource-timing-view .network-timing-bar.dns): (.resource-timing-view .network-timing-bar.connecting): (.resource-timing-view .network-timing-bar.ssl): (.resource-timing-view .network-timing-bar.sending): (.resource-timing-view .network-timing-bar.waiting): (.resource-timing-view .network-timing-bar.receiving): (.resource-timing-view.visible):
Location:
trunk
Files:
1 added
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r72656 r72657  
     12010-11-22  Pavel Feldman  <pfeldman@chromium.org>
     2
     3        Reviewed by Yury Semikhatsky.
     4
     5        Web Inspector: add timing tab to the network item view.
     6        https://bugs.webkit.org/show_bug.cgi?id=49920
     7
     8        * WebCore.gypi:
     9        * WebCore.vcproj/WebCore.vcproj:
     10        * inspector/front-end/NetworkItemView.js:
     11        (WebInspector.NetworkItemView):
     12        * inspector/front-end/NetworkPanel.js:
     13        (WebInspector.NetworkPanel.prototype._showPopover):
     14        * inspector/front-end/Resource.js:
     15        (WebInspector.Resource.prototype.set timing):
     16        * inspector/front-end/ResourceTimingView.js: Added.
     17        (WebInspector.ResourceTimingView):
     18        (WebInspector.ResourceTimingView.prototype.show):
     19        (WebInspector.ResourceTimingView.prototype._refresh):
     20        (WebInspector.ResourceTimingView.createTimingTable):
     21        * inspector/front-end/WebKit.qrc:
     22        * inspector/front-end/inspector.html:
     23        * inspector/front-end/networkPanel.css:
     24        (#network-views .network-item-view .tabbed-pane-header):
     25        (.resource-timing-view):
     26        (.resource-timing-view table):
     27        (.resource-timing-view .network-timing-bar):
     28        (.resource-timing-view .network-timing-bar.proxy):
     29        (.resource-timing-view .network-timing-bar.dns):
     30        (.resource-timing-view .network-timing-bar.connecting):
     31        (.resource-timing-view .network-timing-bar.ssl):
     32        (.resource-timing-view .network-timing-bar.sending):
     33        (.resource-timing-view .network-timing-bar.waiting):
     34        (.resource-timing-view .network-timing-bar.receiving):
     35        (.resource-timing-view.visible):
     36
    1372010-11-24  Pavel Feldman  <pfeldman@chromium.org>
    238

  • trunk/WebCore/WebCore.gypi

    r72655 r72657  
    44884488            'inspector/front-end/ResourceManager.js',
    44894489            'inspector/front-end/ResourceHeadersView.js',
     4490            'inspector/front-end/ResourceTimingView.js',
    44904491            'inspector/front-end/ResourceView.js',
    44914492            'inspector/front-end/ResourcesPanel.js',

  • trunk/WebCore/WebCore.vcproj/WebCore.vcproj

    r72655 r72657  
    6499564995                                </File>
    6499664996                                <File
     64997                                        RelativePath="..\inspector\front-end\ResourceTimingView.js"
     64998                                        >
     64999                                </File>
     65000                                <File
    6499765001                                        RelativePath="..\inspector\front-end\ResourceView.js"
    6499865002                                        >

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

    r72655 r72657  
    4747    }
    4848    this._tabbedPane.appendTab("cookies", WebInspector.UIString("Cookies"), this._cookiesView);
     49
     50    if (Preferences.showTimingTab) {
     51        var timingView = new WebInspector.ResourceTimingView(resource);
     52        this._tabbedPane.appendTab("timing", WebInspector.UIString("Timing"), timingView);
     53    }
     54
    4955    this._tabbedPane.addEventListener("tab-selected", this._tabSelected, this);
    5056}

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

    r72655 r72657  
    893893    _showPopover: function(anchor)
    894894    {
    895         var tableElement = document.createElement("table");
    896895        var resource = anchor.parentElement.resource;
    897         var rows = [];
    898 
    899         function addRow(title, start, end, color)
    900         {
    901             var row = {};
    902             row.title = title;
    903             row.start = start;
    904             row.end = end;
    905             rows.push(row);
    906         }
    907 
    908         if (resource.timing.proxyStart !== -1)
    909             addRow(WebInspector.UIString("Proxy"), resource.timing.proxyStart, resource.timing.proxyEnd);
    910 
    911         if (resource.timing.dnsStart !== -1)
    912             addRow(WebInspector.UIString("DNS Lookup"), resource.timing.dnsStart, resource.timing.dnsEnd);
    913 
    914         if (resource.timing.connectStart !== -1) {
    915             if (resource.connectionReused)
    916                 addRow(WebInspector.UIString("Blocking"), resource.timing.connectStart, resource.timing.connectEnd);
    917             else {
    918                 var connectStart = resource.timing.connectStart;
    919                 // Connection includes DNS, subtract it here.
    920                 if (resource.timing.dnsStart !== -1)
    921                     connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
    922                 addRow(WebInspector.UIString("Connecting"), connectStart, resource.timing.connectEnd);
    923             }
    924         }
    925 
    926         if (resource.timing.sslStart !== -1)
    927             addRow(WebInspector.UIString("SSL"), resource.timing.sslStart, resource.timing.sslEnd);
    928 
    929         var sendStart = resource.timing.sendStart;
    930         if (resource.timing.sslStart !== -1)
    931             sendStart += resource.timing.sslEnd - resource.timing.sslStart;
    932        
    933         addRow(WebInspector.UIString("Sending"), resource.timing.sendStart, resource.timing.sendEnd);
    934         addRow(WebInspector.UIString("Waiting"), resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
    935         addRow(WebInspector.UIString("Receiving"), (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
    936 
    937         const chartWidth = 200;
    938         var total = (resource.endTime - resource.timing.requestTime) * 1000;
    939         var scale = chartWidth / total;
    940 
    941         for (var i = 0; i < rows.length; ++i) {
    942             var tr = document.createElement("tr");
    943             tableElement.appendChild(tr);
    944 
    945             var td = document.createElement("td");
    946             td.textContent = rows[i].title;
    947             tr.appendChild(td);
    948 
    949             td = document.createElement("td");
    950             td.width = chartWidth + "px";
    951 
    952             var row = document.createElement("div");
    953             row.className = "network-timing-row";
    954             td.appendChild(row);
    955 
    956             var bar = document.createElement("span");
    957             bar.className = "network-timing-bar";
    958             bar.style.left = scale * rows[i].start + "px";
    959             bar.style.right = scale * (total - rows[i].end) + "px";
    960             bar.style.backgroundColor = rows[i].color;
    961             bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
    962             row.appendChild(bar);
    963 
    964             var title = document.createElement("span");
    965             title.className = "network-timing-bar-title";
    966             if (total - rows[i].end < rows[i].start)
    967                 title.style.right = (scale * (total - rows[i].end) + 3) + "px";
    968             else
    969                 title.style.left = (scale * rows[i].start + 3) + "px";
    970             title.textContent = Number.millisToString(rows[i].end - rows[i].start);
    971             row.appendChild(title);
    972 
    973             tr.appendChild(td);
    974         }
    975 
     896        var tableElement = WebInspector.ResourceTimingView.createTimingTable(resource);
    976897        var popover = new WebInspector.Popover(tableElement);
    977898        popover.show(anchor);

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

    r71254 r72657  
    300300    set timing(x)
    301301    {
    302         if (!this._cached)
     302        if (!this._cached) {
    303303            this._timing = x;
     304            this.dispatchEventToListeners("timing changed");
     305        }
    304306    },
    305307

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

    r72096 r72657  
    4848    fileSystemEnabled: false,
    4949    useDataURLForResourceImageIcons: true,
     50    showTimingTab: false,
    5051    debugMode: false
    5152}

  • trunk/WebCore/inspector/front-end/WebKit.qrc

    r72655 r72657  
    7676    <file>ResourceHeadersView.js</file>
    7777    <file>ResourceManager.js</file>
     78    <file>ResourceTimingView.js</file>
    7879    <file>ResourceView.js</file>
    7980    <file>ResourcesPanel.js</file>

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

    r72655 r72657  
    116116    <script type="text/javascript" src="ResourceHeadersView.js"></script>
    117117    <script type="text/javascript" src="ResourceCookiesView.js"></script>
     118    <script type="text/javascript" src="ResourceTimingView.js"></script>
    118119    <script type="text/javascript" src="NetworkItemView.js"></script>
    119120    <script type="text/javascript" src="ResourceView.js"></script>

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

    r72655 r72657  
    638638    padding-top: 8px;
    639639    padding-left: 25px;
     640    white-space: nowrap;
    640641}
    641642
    … …  
    748749    font-size: 11px;
    749750}
     751
     752.resource-timing-view {
     753    display: none;
     754    position: absolute;
     755    top: 0;
     756    right: 0;
     757    left: 0;
     758    bottom: 0;
     759    padding: 6px;
     760    font-weight: bold;
     761    font-size: 11px;
     762    color: rgb(30, 30, 30);
     763}
     764
     765.resource-timing-view table {
     766    border-spacing: 21px 0;
     767}
     768
     769.resource-timing-view .network-timing-bar {
     770    opacity: 1;
     771}
     772
     773.resource-timing-view .network-timing-bar.proxy {
     774    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(239, 228, 176)), to(rgb(139, 128, 76)));
     775    border-left: 1px solid rgb(139, 128, 76);
     776}
     777
     778.resource-timing-view .network-timing-bar.dns {
     779    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(153, 208, 216)), to(rgb(81, 174, 189)));
     780    border-left: 1px solid rgb(81, 174, 189);
     781}
     782
     783.resource-timing-view .network-timing-bar.connecting {
     784    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(203, 232, 145)), to(rgb(160, 214, 56)));
     785    border-left: 1px solid rgb(160, 214, 56);
     786}
     787
     788.resource-timing-view .network-timing-bar.ssl {
     789    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(21, 232, 145)), to(rgb(216, 149, 132)));
     790    border-left: 1px solid rgb(216, 149, 132);
     791}
     792
     793.resource-timing-view .network-timing-bar.sending {
     794    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(232, 192, 182)), to(rgb(216, 147, 130)));
     795    border-left: 1px solid rgb(216, 147, 130);
     796}
     797
     798.resource-timing-view .network-timing-bar.waiting {
     799    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 179, 208)), to(rgb(141, 125, 175)));
     800    border-left: 1px solid rgb(141, 125, 175);
     801}
     802
     803.resource-timing-view .network-timing-bar.receiving {
     804    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(182, 182, 182)));
     805    border-left: 1px solid rgb(182, 182, 182);
     806}
     807
     808.resource-timing-view.visible {
     809    display: block;
     810}

  • trunk/WebKit/chromium/src/js/DevTools.js

    r71478 r72657  
    4848    Preferences.nativeInstrumentationEnabled = true;
    4949    Preferences.fileSystemEnabled = false;
     50    Preferences.showTimingTab = true;
    5051})();
    5152
Note: See TracChangeset for help on using the changeset viewer.