Changeset 186580 in webkit


Ignore:
Timestamp:
Jul 8, 2015, 10:47:04 PM (10 years ago)
Author:
timothy@apple.com
Message:

Web Inspector: Add page weight and time back to the toolbar dashboard
​https://bugs.webkit.org/show_bug.cgi?id=146755

Revert r183328 which removed the page weight and load time from the dashboard. We have space
in the dashboard, we can put these back since we didn't find a better home for them.

Reviewed by Joseph Pecoraro.

  • Localizations/en.lproj/localizedStrings.js: Updated.
  • UserInterface/Base/Main.js:

(WebInspector.showNetworkTab):

  • UserInterface/Images/Time.svg: Added.
  • UserInterface/Images/Weight.svg: Added.
  • UserInterface/Images/gtk/Time.svg: Added.
  • UserInterface/Images/gtk/Weight.svg: Added.
  • UserInterface/Models/DefaultDashboard.js:

(WebInspector.DefaultDashboard):
(WebInspector.DefaultDashboard.prototype.get resourcesSize):
(WebInspector.DefaultDashboard.prototype.set resourcesSize):
(WebInspector.DefaultDashboard.prototype.get time):
(WebInspector.DefaultDashboard.prototype.set time):
(WebInspector.DefaultDashboard.prototype._mainResourceDidChange):
(WebInspector.DefaultDashboard.prototype._capturingStopped):
(WebInspector.DefaultDashboard.prototype._startUpdatingTime):
(WebInspector.DefaultDashboard.prototype._stopUpdatingTime):
(WebInspector.DefaultDashboard.prototype._updateTime):

  • UserInterface/Views/DashboardContainerView.css:

(body.web .toolbar .dashboard-container):
(body.javascript .toolbar .dashboard-container):
(.toolbar.collapsed .dashboard-container):
(.toolbar .dashboard-container): Deleted.

  • UserInterface/Views/DefaultDashboardView.css:

(body.web .toolbar.collapsed .dashboard.default > :matches(.resourcesSize, .time, .logs)):
(body.javascript .toolbar .dashboard.default > :matches(.resourcesCount, .resourcesSize, .time)):
(.toolbar .dashboard.default > .resourcesSize):
(.toolbar .dashboard.default > .time > img):
(.toolbar .dashboard.default > .resourcesSize > img):
(body.web .toolbar.collapsed .dashboard.default > .item.resourcesCount): Deleted.
(body.javascript .toolbar .dashboard.default > .item.resourcesCount): Deleted.

  • UserInterface/Views/DefaultDashboardView.js:

(WebInspector.DefaultDashboardView):
(WebInspector.DefaultDashboardView.prototype._updateDisplay):
(WebInspector.DefaultDashboardView.prototype._networkItemWasClicked):
(WebInspector.DefaultDashboardView.prototype._timelineItemWasClicked):

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

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r186576 r186580  
     12015-07-08  Timothy Hatcher  <timothy@apple.com>
     2
     3        Web Inspector: Add page weight and time back to the toolbar dashboard
     4        https://bugs.webkit.org/show_bug.cgi?id=146755
     5
     6        Revert r183328 which removed the page weight and load time from the dashboard. We have space
     7        in the dashboard, we can put these back since we didn't find a better home for them.
     8
     9        Reviewed by Joseph Pecoraro.
     10
     11        * Localizations/en.lproj/localizedStrings.js: Updated.
     12        * UserInterface/Base/Main.js:
     13        (WebInspector.showNetworkTab):
     14        * UserInterface/Images/Time.svg: Added.
     15        * UserInterface/Images/Weight.svg: Added.
     16        * UserInterface/Images/gtk/Time.svg: Added.
     17        * UserInterface/Images/gtk/Weight.svg: Added.
     18        * UserInterface/Models/DefaultDashboard.js:
     19        (WebInspector.DefaultDashboard):
     20        (WebInspector.DefaultDashboard.prototype.get resourcesSize):
     21        (WebInspector.DefaultDashboard.prototype.set resourcesSize):
     22        (WebInspector.DefaultDashboard.prototype.get time):
     23        (WebInspector.DefaultDashboard.prototype.set time):
     24        (WebInspector.DefaultDashboard.prototype._mainResourceDidChange):
     25        (WebInspector.DefaultDashboard.prototype._capturingStopped):
     26        (WebInspector.DefaultDashboard.prototype._startUpdatingTime):
     27        (WebInspector.DefaultDashboard.prototype._stopUpdatingTime):
     28        (WebInspector.DefaultDashboard.prototype._updateTime):
     29        * UserInterface/Views/DashboardContainerView.css:
     30        (body.web .toolbar .dashboard-container):
     31        (body.javascript .toolbar .dashboard-container):
     32        (.toolbar.collapsed .dashboard-container):
     33        (.toolbar .dashboard-container): Deleted.
     34        * UserInterface/Views/DefaultDashboardView.css:
     35        (body.web .toolbar.collapsed .dashboard.default > :matches(.resourcesSize, .time, .logs)):
     36        (body.javascript .toolbar .dashboard.default > :matches(.resourcesCount, .resourcesSize, .time)):
     37        (.toolbar .dashboard.default > .resourcesSize):
     38        (.toolbar .dashboard.default > .time > img):
     39        (.toolbar .dashboard.default > .resourcesSize > img):
     40        (body.web .toolbar.collapsed .dashboard.default > .item.resourcesCount): Deleted.
     41        (body.javascript .toolbar .dashboard.default > .item.resourcesCount): Deleted.
     42        * UserInterface/Views/DefaultDashboardView.js:
     43        (WebInspector.DefaultDashboardView):
     44        (WebInspector.DefaultDashboardView.prototype._updateDisplay):
     45        (WebInspector.DefaultDashboardView.prototype._networkItemWasClicked):
     46        (WebInspector.DefaultDashboardView.prototype._timelineItemWasClicked):
     47
    1482015-07-08  Devin Rousso  <drousso@apple.com>
    249

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

    r186489 r186580  
    490490localizedStrings["The “%s”\ntable is empty."] = "The “%s”\ntable is empty.";
    491491localizedStrings["This property needs a value.\nClick to open autocomplete."] = "This property needs a value.\nClick to open autocomplete.";
     492localizedStrings["Time until the load event fired, click to show the Network Requests timeline"] = "Time until the load event fired, click to show the Network Requests timeline";
    492493localizedStrings["Timeline Events"] = "Timeline Events";
    493494localizedStrings["Timeline Recording %d"] = "Timeline Recording %d";
    … …  
    501502localizedStrings["Total Time"] = "Total Time";
    502503localizedStrings["Total number of resources, click to show the Resources tab"] = "Total number of resources, click to show the Resources tab";
     504localizedStrings["Total size of all resources, click to show the Network Requests timeline"] = "Total size of all resources, click to show the Network Requests timeline";
    503505localizedStrings["Transfered"] = "Transfered";
    504506localizedStrings["Triggered Breakpoint"] = "Triggered Breakpoint";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Main.js

    r186466 r186580  
    811811};
    812812
     813WebInspector.showNetworkTab = function()
     814{
     815    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NetworkTabContentView);
     816    if (!tabContentView)
     817        tabContentView = new WebInspector.NetworkTabContentView;
     818    this.tabBrowser.showTabForContentView(tabContentView);
     819};
     820
    813821WebInspector.showTimelineTab = function()
    814822{

  • trunk/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js

    r185263 r186580  
    3030        super();
    3131
     32        this._waitingForFirstMainResourceToStartTrackingSize = true;
     33
     34        // Necessary event required to track page load time and resource sizes.
     35        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
     36        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
     37
    3238        // Necessary events required to track load of resources.
    33         WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
    3439        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
    3540        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
    … …  
    4247
    4348        this._resourcesCount = 0;
     49        this._resourcesSize = 0;
     50        this._time = 0;
    4451        this._logs = 0;
    4552        this._errors = 0;
    … …  
    6067    }
    6168
     69    get resourcesSize()
     70    {
     71        return this._resourcesSize;
     72    }
     73
     74    set resourcesSize(value)
     75    {
     76        this._resourcesSize = value;
     77        this._dataDidChange();
     78    }
     79
     80    get time()
     81    {
     82        return this._time;
     83    }
     84
     85    set time(value)
     86    {
     87        this._time = value;
     88        this._dataDidChange();
     89    }
     90
    6291    get logs()
    6392    {
    … …  
    102131    _mainResourceDidChange(event)
    103132    {
     133        console.assert(event.target instanceof WebInspector.Frame);
     134
    104135        if (!event.target.isMainFrame())
    105136            return;
    106137
    107138        this._resourcesCount = 1;
    108         this._dataDidChange();
     139        this._resourcesSize = WebInspector.frameResourceManager.mainFrame.mainResource.size || 0;
     140
     141        // Only update the time if we are recording the timeline.
     142        if (!WebInspector.timelineManager.isCapturing()) {
     143            this._time = 0;
     144            return;
     145        }
     146
     147        // We should only track resource sizes on fresh loads.
     148        if (this._waitingForFirstMainResourceToStartTrackingSize) {
     149            this._waitingForFirstMainResourceToStartTrackingSize = false;
     150            WebInspector.Resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._resourceSizeDidChange, this);
     151        }
     152
     153        this._dataDidChange();
     154        this._startUpdatingTime();
     155    }
     156
     157    _capturingStopped(event)
     158    {
     159        // If recording stops, we should stop the timer if it hasn't stopped already.
     160        this._stopUpdatingTime();
    109161    }
    110162
    … …  
    117169    {
    118170        ++this.resourcesCount;
     171    }
     172
     173    _startUpdatingTime()
     174    {
     175        this._stopUpdatingTime();
     176
     177        this.time = 0;
     178
     179        this._timelineBaseTime = Date.now();
     180        this._timeIntervalDelay = 50;
     181        this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
     182    }
     183
     184    _stopUpdatingTime()
     185    {
     186        if (!this._timeIntervalIdentifier)
     187            return;
     188
     189        clearInterval(this._timeIntervalIdentifier);
     190        this._timeIntervalIdentifier = undefined;
     191    }
     192
     193    _updateTime()
     194    {
     195        var duration = Date.now() - this._timelineBaseTime;
     196
     197        var timeIntervalDelay = this._timeIntervalDelay;
     198        if (duration >= 1000) // 1 second
     199            timeIntervalDelay = 100;
     200        else if (duration >= 60000) // 60 seconds
     201            timeIntervalDelay = 1000;
     202        else if (duration >= 3600000) // 1 minute
     203            timeIntervalDelay = 10000;
     204
     205        if (timeIntervalDelay !== this._timeIntervalDelay) {
     206            this._timeIntervalDelay = timeIntervalDelay;
     207
     208            clearInterval(this._timeIntervalIdentifier);
     209            this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
     210        }
     211
     212        var mainFrame = WebInspector.frameResourceManager.mainFrame;
     213        var mainFrameStartTime = mainFrame.mainResource.firstTimestamp;
     214        var mainFrameLoadEventTime = mainFrame.loadEventTimestamp;
     215
     216        if (isNaN(mainFrameStartTime) || isNaN(mainFrameLoadEventTime)) {
     217            this.time = duration / 1000;
     218            return;
     219        }
     220
     221        this.time = mainFrameLoadEventTime - mainFrameStartTime;
     222
     223        this._stopUpdatingTime();
    119224    }
    120225

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

    r185759 r186580  
    2626.toolbar .dashboard-container {
    2727    position: relative;
    28     width: 36vw;
    2928
    3029    border-radius: 4px;
    … …  
    3332}
    3433
     34body.web .toolbar .dashboard-container {
     35    width: 36vw;
     36    min-width: 350px;
     37}
     38
     39body.javascript .toolbar .dashboard-container {
     40    width: 25vw;
     41    min-width: 175px;
     42}
    3543
    3644.toolbar.collapsed .dashboard-container {
    37     width: 175px;
     45    min-width: 175px !important;
     46    width: 175px !important;
    3847}
    3948

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

    r184748 r186580  
    2424 */
    2525
    26 body.web .toolbar.collapsed .dashboard.default > .item.resourcesCount {
     26body.web .toolbar.collapsed .dashboard.default > :matches(.resourcesSize, .time, .logs) {
    2727    display: none;
    2828}
    2929
    30 body.javascript .toolbar .dashboard.default > .item.resourcesCount {
     30body.javascript .toolbar .dashboard.default > :matches(.resourcesCount, .resourcesSize, .time) {
    3131    display: none;
    3232}
    … …  
    5252    border-radius: 4px;
    5353    border: 1px solid transparent;
     54}
     55
     56.toolbar .dashboard.default > .time,
     57.toolbar .dashboard.default > .resourcesSize {
     58    min-width: 70px;
    5459}
    5560
    … …  
    102107}
    103108
     109.toolbar .dashboard.default > .time > img {
     110    content: url(../Images/Time.svg);
     111}
     112
    104113.toolbar .dashboard.default > .logs > img {
    105114    content: url(../Images/Logs.svg);
     115}
     116
     117.toolbar .dashboard.default > .resourcesSize > img {
     118    content: url(../Images/Weight.svg);
    106119}
    107120

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

    r183333 r186580  
    3535            resourcesCount: {
    3636                tooltip: WebInspector.UIString("Total number of resources, click to show the Resources tab"),
    37                 handler: this._resourcesWasClicked
     37                handler: this._resourcesItemWasClicked
     38            },
     39            resourcesSize: {
     40                tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
     41                handler: this._networkItemWasClicked
     42            },
     43            time: {
     44                tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
     45                handler: this._timelineItemWasClicked
    3846            },
    3947            logs: {
    … …  
    6472            this._setConsoleItemValue(category, dashboard[category]);
    6573
     74        var timeItem = this._items.time;
     75        timeItem.text = dashboard.time ? Number.secondsToString(dashboard.time) : "\u2014";
     76        this._setItemEnabled(timeItem, dashboard.time > 0);
     77
    6678        var countItem = this._items.resourcesCount;
    6779        countItem.text = this._formatPossibleLargeNumber(dashboard.resourcesCount);
    6880        this._setItemEnabled(countItem, dashboard.resourcesCount > 0);
     81
     82        var sizeItem = this._items.resourcesSize;
     83        sizeItem.text = dashboard.resourcesSize ? Number.bytesToString(dashboard.resourcesSize, false) : "\u2014";
     84        this._setItemEnabled(sizeItem, dashboard.resourcesSize > 0);
    6985    }
    7086
    … …  
    110126    }
    111127
    112     _resourcesWasClicked()
     128    _resourcesItemWasClicked()
    113129    {
    114130        WebInspector.showResourcesTab();
     131    }
     132
     133    _networkItemWasClicked()
     134    {
     135        WebInspector.showNetworkTab();
     136    }
     137
     138    _timelineItemWasClicked()
     139    {
     140        WebInspector.showTimelineTab();
    115141    }
    116142
Note: See TracChangeset for help on using the changeset viewer.