Changeset 90904 in webkit


Ignore:
Timestamp:
Jul 13, 2011 4:51:53 AM (13 years ago)
Author:
caseq@chromium.org
Message:

2011-07-12 Andrey Kosyakov <​caseq@chromium.org>

Web Inspector: factor NetworkLogView out of Network panel
​https://bugs.webkit.org/show_bug.cgi?id=64366

Reviewed by Pavel Feldman.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/http/tests/inspector/network-test.js

    r90557 r90904  
    33InspectorTest.enableBackgroundEventCollection = function()
    44{
    5     if (!WebInspector.panels.network._backgroundCollectionEnabled)
    6         WebInspector.panels.network._toggleBackgroundEventsCollection();
     5    if (!WebInspector.panels.network._networkLogView._backgroundCollectionEnabled)
     6        WebInspector.panels.network._networkLogView._toggleBackgroundEventsCollection();
    77    else
    88        throw "BackgroundEventCollection already enabled.";
    … …  
    1111InspectorTest.disableBackgroundEventCollection = function ()
    1212{
    13     if (WebInspector.panels.network._backgroundCollectionEnabled)
    14         WebInspector.panels.network._toggleBackgroundEventsCollection();
     13    if (WebInspector.panels.network._networkLogView._backgroundCollectionEnabled)
     14        WebInspector.panels.network._networkLogView._toggleBackgroundEventsCollection();
    1515}
    1616

  • trunk/Source/WebCore/ChangeLog

    r90903 r90904  
     12011-07-12  Andrey Kosyakov  <caseq@chromium.org>
     2
     3        Web Inspector: factor NetworkLogView out of Network panel
     4        https://bugs.webkit.org/show_bug.cgi?id=64366
     5
     6        Reviewed by Pavel Feldman.
     7
     8        * inspector/front-end/NetworkPanel.js:
     9        (WebInspector.NetworkLogView):
     10        (WebInspector.NetworkLogView.prototype.get useLargeRows):
     11        (WebInspector.NetworkLogView.prototype.set allowPopover):
     12        (WebInspector.NetworkLogView.prototype.elementsToRestoreScrollPositionsFor):
     13        (WebInspector.NetworkLogView.prototype.resize):
     14        (WebInspector.NetworkLogView.prototype._createTable):
     15        (WebInspector.NetworkLogView.prototype.show):
     16        (WebInspector.NetworkLogView.prototype.hide):
     17        (WebInspector.NetworkLogView.prototype._reset):
     18        (WebInspector.NetworkLogView.prototype.switchToDetailedView):
     19        (WebInspector.NetworkLogView.prototype.switchToBriefView):
     20        (WebInspector.NetworkLogView.prototype.get _setLargerResources):
     21        (WebInspector.NetworkLogView.prototype._getPopoverAnchor):
     22        (WebInspector.NetworkPanel):
     23        (WebInspector.NetworkPanel.prototype.get toolbarItemLabel):
     24        (WebInspector.NetworkPanel.prototype.get statusBarItems):
     25        (WebInspector.NetworkPanel.prototype.elementsToRestoreScrollPositionsFor):
     26        (WebInspector.NetworkPanel.prototype.resize):
     27        (WebInspector.NetworkPanel.prototype._reset):
     28        (WebInspector.NetworkPanel.prototype.updateSidebarWidth):
     29        (WebInspector.NetworkPanel.prototype.updateMainViewWidth):
     30        (WebInspector.NetworkPanel.prototype.handleShortcut):
     31        (WebInspector.NetworkPanel.prototype.show):
     32        (WebInspector.NetworkPanel.prototype.hide):
     33        (WebInspector.NetworkPanel.prototype.get resources):
     34        (WebInspector.NetworkPanel.prototype.resourceById):
     35        (WebInspector.NetworkPanel.prototype.canShowAnchorLocation):
     36        (WebInspector.NetworkPanel.prototype.showAnchorLocation):
     37        (WebInspector.NetworkPanel.prototype._onViewCleared):
     38        (WebInspector.NetworkPanel.prototype._onRowSizeChanged):
     39        (WebInspector.NetworkPanel.prototype._onResourceSelected):
     40        (WebInspector.NetworkPanel.prototype._showResource):
     41        (WebInspector.NetworkPanel.prototype._closeVisibleResource):
     42        (WebInspector.NetworkPanel.prototype._toggleGridMode):
     43        (WebInspector.NetworkPanel.prototype._toggleViewingResourceMode):
     44        (WebInspector.NetworkPanel.prototype.performSearch):
     45        (WebInspector.NetworkPanel.prototype.jumpToPreviousSearchResult):
     46        (WebInspector.NetworkPanel.prototype.jumpToNextSearchResult):
     47        (WebInspector.NetworkPanel.prototype.searchCanceled):
     48        (WebInspector.NetworkDataGridNode):
     49        (WebInspector.NetworkDataGridNode.prototype.isFilteredOut):
     50        (WebInspector.NetworkDataGridNode.prototype.select):
     51        (WebInspector.NetworkDataGridNode.prototype.get selectable):
     52
    1532011-07-13  Sheriff Bot  <webkit.review.bot@gmail.com>
    254

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

    r90815 r90904  
    2929 */
    3030
    31 WebInspector.NetworkPanel = function()
     31WebInspector.NetworkLogView = function()
    3232{
    3333    function eventsCollectionEnabled(error, enabled)
    … …  
    3737    NetworkAgent.isBackgroundEventsCollectionEnabled(eventsCollectionEnabled.bind(this));
    3838
    39     WebInspector.Panel.call(this, "network");
    40 
    41     this.createSidebar();
    42 
     39    WebInspector.View.call(this);
     40
     41    this._allowResourceSelection = false;
    4342    this._resources = [];
    4443    this._resourcesById = {};
    … …  
    5655    this._categories = WebInspector.resourceCategories;
    5756
    58     this.containerElement = document.createElement("div");
    59     this.containerElement.id = "network-container";
    60     this.sidebarElement.appendChild(this.containerElement);
    61 
    62     this._viewsContainerElement = document.createElement("div");
    63     this._viewsContainerElement.id = "network-views";
    64     this._viewsContainerElement.className = "hidden";
    65     this.element.appendChild(this._viewsContainerElement);
    66 
    67     this._closeButtonElement = document.createElement("button");
    68     this._closeButtonElement.id = "network-close-button";
    69     this._closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false);
    70     this._viewsContainerElement.appendChild(this._closeButtonElement);
     57    this.element.id = "network-container";
    7158
    7259    this._createSortingFunctions();
    … …  
    7764    this._createSummaryBar();
    7865
    79     if (!WebInspector.settings.resourcesLargeRows.get())
    80         this._setLargerResources(WebInspector.settings.resourcesLargeRows.get());
    81 
     66    if (!this.useLargeRows)
     67        this._setLargerResources(this.useLargeRows);
     68
     69    this._allowPopover = true;
    8270    this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this), true);
    8371    // Enable faster hint.
    … …  
    8775    this._filter(this._filterAllElement, false);
    8876
    89     this._toggleGridMode();
     77    this.switchToDetailedView();
    9078
    9179    WebInspector.networkManager.addEventListener(WebInspector.NetworkManager.EventTypes.ResourceStarted, this._onResourceStarted, this);
    … …  
    9684    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.OnLoad, this._onLoadEventFired, this);
    9785    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.DOMContentLoaded, this._domContentLoadedEventFired, this);
    98 
    99     this.registerShortcuts();
    10086}
    10187
    102 WebInspector.NetworkPanel.prototype = {
    103     get toolbarItemLabel()
    104     {
    105         return WebInspector.UIString("Network");
    106     },
    107 
     88WebInspector.NetworkLogView.prototype = {
    10889    get statusBarItems()
    10990    {
    … …  
    11192    },
    11293
     94    get useLargeRows()
     95    {
     96        return WebInspector.settings.resourcesLargeRows.get();
     97    },
     98
     99    set allowPopover(flag)
     100    {
     101        this._allowPopover = flag;
     102    },
     103
     104    get allowResourceSelection()
     105    {
     106        return this._allowResourceSelection;
     107    },
     108
     109    set allowResourceSelection(flag)
     110    {
     111        this._allowResourceSelection = !!flag;
     112    },
     113
    113114    elementsToRestoreScrollPositionsFor: function()
    114115    {
    115         return [this.containerElement, this._dataGrid.scrollContainer];
     116        return [this.element, this._dataGrid.scrollContainer];
    116117    },
    117118
    118119    resize: function()
    119120    {
    120         WebInspector.Panel.prototype.resize.call(this);
    121121        this._dataGrid.updateWidths();
    122122        this._updateOffscreenRows();
    123     },
    124 
    125     updateSidebarWidth: function(width)
    126     {
    127         if (!this._viewingResourceMode)
    128             return;
    129         WebInspector.Panel.prototype.updateSidebarWidth.call(this, width);
    130     },
    131 
    132     updateMainViewWidth: function(width)
    133     {
    134         this._viewsContainerElement.style.left = width + "px";
    135     },
    136 
    137     handleShortcut: function(event)
    138     {
    139         if (this._viewingResourceMode && event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
    140             this._toggleGridMode();
    141             event.handled = true;
    142             return;
    143         }
    144 
    145         WebInspector.Panel.prototype.handleShortcut.call(this, event);
    146123    },
    147124
    … …  
    192169        this._dataGrid.element.addStyleClass("network-log-grid");
    193170        this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
    194         this.containerElement.appendChild(this._dataGrid.element);
    195171        this._dataGrid.addEventListener("sorting changed", this._sortItems, this);
    196172        this._dataGrid.addEventListener("width changed", this._updateDividersIfNeeded, this);
    197173        this._dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
     174
     175        this.element.appendChild(this._dataGrid.element);
    198176
    199177        this._patchTimelineHeader();
    … …  
    621599    show: function()
    622600    {
    623         WebInspector.Panel.prototype.show.call(this);
     601        WebInspector.View.prototype.show.call(this);
    624602        this._refreshIfNeeded();
    625 
    626         if (this.visibleView)
    627             this.visibleView.show(this._viewsContainerElement);
    628 
    629603        this._dataGrid.updateWidths();
    630604    },
    … …  
    632606    hide: function()
    633607    {
    634         WebInspector.Panel.prototype.hide.call(this);
    635608        this._popoverHelper.hidePopup();
    636609    },
    … …  
    691664    _reset: function()
    692665    {
     666        this.dispatchEventToListeners(WebInspector.NetworkLogView.EventNames.ViewCleared);
     667
    693668        this._popoverHelper.hidePopup();
    694         this._closeVisibleResource();
    695669        this._clearSearchMatchedList();
    696 
    697         this._toggleGridMode();
    698670
    699671        // Begin reset timeline
    … …  
    714686        this._mainResourceDOMContentTime = -1;
    715687
    716         this._viewsContainerElement.removeChildren();
    717         this._viewsContainerElement.appendChild(this._closeButtonElement);
    718688        this._updateSummaryBar();
    719689    },
    … …  
    799769    },
    800770
    801     canShowAnchorLocation: function(anchor)
    802     {
    803         return !!this._resourcesByURL[anchor.href];
    804     },
    805 
    806     showAnchorLocation: function(anchor)
    807     {
    808         this._showResource(this._resourcesByURL[anchor.href]);
    809     },
    810 
    811     _showResource: function(resource)
    812     {
    813         if (!resource)
    814             return;
     771    switchToDetailedView: function()
     772    {
     773        if (this._dataGrid.selectedNode)
     774            this._dataGrid.selectedNode.selected = false;
     775
     776        this._dataGrid.showColumn("method");
     777        this._dataGrid.showColumn("status");
     778        this._dataGrid.showColumn("type");
     779        this._dataGrid.showColumn("size");
     780        this._dataGrid.showColumn("time");
     781        this._dataGrid.showColumn("timeline");
     782
     783        var widths = {};
     784        widths.name = 20;
     785        widths.method = 6;
     786        widths.status = 6;
     787        widths.type = 6;
     788        widths.size = 6;
     789        widths.time = 6;
     790        widths.timeline = 50;
     791
     792        this._dataGrid.applyColumnWidthsMap(widths);
     793    },
     794
     795    switchToBriefView: function()
     796    {
     797        this._dataGrid.hideColumn("method");
     798        this._dataGrid.hideColumn("status");
     799        this._dataGrid.hideColumn("type");
     800        this._dataGrid.hideColumn("size");
     801        this._dataGrid.hideColumn("time");
     802        this._dataGrid.hideColumn("timeline");
     803
     804        var widths = {};
     805        widths.name = 100;
     806        this._dataGrid.applyColumnWidthsMap(widths);
    815807
    816808        this._popoverHelper.hidePopup();
    817 
    818         this._toggleViewingResourceMode();
    819 
    820         if (this.visibleView) {
    821             this.visibleView.detach();
    822             delete this.visibleView;
    823         }
    824 
    825         var view = new WebInspector.NetworkItemView(resource);
    826         view.show(this._viewsContainerElement);
    827         this.visibleView = view;
    828 
    829         this.updateSidebarWidth();
    830     },
    831 
    832     _closeVisibleResource: function()
    833     {
    834         this.element.removeStyleClass("viewing-resource");
    835 
    836         if (this.visibleView) {
    837             this.visibleView.detach();
    838             delete this.visibleView;
    839         }
    840 
    841         if (this._lastSelectedGraphTreeElement)
    842             this._lastSelectedGraphTreeElement.select(true);
    843 
    844         this.updateSidebarWidth();
    845809    },
    846810
    … …  
    858822            this._dataGrid.element.addStyleClass("small");
    859823            this._timelineGrid.element.addStyleClass("small");
    860             this._viewsContainerElement.addStyleClass("small");
    861824        } else {
    862825            this._largerResourcesButton.title = WebInspector.UIString("Use small resource rows.");
    863826            this._dataGrid.element.removeStyleClass("small");
    864827            this._timelineGrid.element.removeStyleClass("small");
    865             this._viewsContainerElement.removeStyleClass("small");
    866         }
     828        }
     829        this.dispatchEventToListeners(WebInspector.NetworkLogView.EventNames.RowSizeChanged, { largeRows: enabled });
    867830        this._updateOffscreenRows();
    868831    },
    … …  
    870833    _getPopoverAnchor: function(element)
    871834    {
     835        if (!this._allowPopover)
     836            return;
    872837        var anchor = element.enclosingNodeOrSelfWithClass("network-graph-bar") || element.enclosingNodeOrSelfWithClass("network-graph-label");
    873838        if (!anchor)
    … …  
    11901155        this._clearSearchMatchedList();
    11911156        WebInspector.searchController.updateSearchMatchesCount(0, this);
     1157    }
     1158};
     1159
     1160WebInspector.NetworkLogView.prototype.__proto__ = WebInspector.View.prototype;
     1161
     1162WebInspector.NetworkLogView.EventNames = {
     1163    ViewCleared: "ViewCleared",
     1164    RowSizeChanged: "RowSizeChanged",
     1165    ResourceSelected: "ResourceSelected"
     1166};
     1167
     1168WebInspector.NetworkPanel = function()
     1169{
     1170    WebInspector.Panel.call(this, "network");
     1171
     1172    this.createSidebar();
     1173    this._networkLogView = new WebInspector.NetworkLogView();
     1174
     1175    this.sidebarElement.appendChild(this._networkLogView.element);
     1176
     1177    this._viewsContainerElement = document.createElement("div");
     1178    this._viewsContainerElement.id = "network-views";
     1179    this._viewsContainerElement.className = "hidden";
     1180    if (!this._networkLogView.useLargeRows)
     1181        this._viewsContainerElement.addStyleClass("small");
     1182
     1183    this.element.appendChild(this._viewsContainerElement);
     1184
     1185    this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventNames.ViewCleared, this._onViewCleared, this);
     1186    this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventNames.RowSizeChanged, this._onRowSizeChanged, this);
     1187    this._networkLogView.addEventListener(WebInspector.NetworkLogView.EventNames.ResourceSelected, this._onResourceSelected, this);
     1188
     1189    this._closeButtonElement = document.createElement("button");
     1190    this._closeButtonElement.id = "network-close-button";
     1191    this._closeButtonElement.addEventListener("click", this._toggleGridMode.bind(this), false);
     1192    this._viewsContainerElement.appendChild(this._closeButtonElement);
     1193
     1194    this.registerShortcuts();
     1195}
     1196
     1197WebInspector.NetworkPanel.prototype = {
     1198    get toolbarItemLabel()
     1199    {
     1200        return WebInspector.UIString("Network");
     1201    },
     1202
     1203    get statusBarItems()
     1204    {
     1205        return this._networkLogView.statusBarItems;
     1206    },
     1207
     1208    elementsToRestoreScrollPositionsFor: function()
     1209    {
     1210        return this._networkLogView.elementsToRestoreScrollPositionsFor();
     1211    },
     1212
     1213    resize: function()
     1214    {
     1215        WebInspector.Panel.prototype.resize.call(this);
     1216        this._networkLogView.resize();
     1217    },
     1218
     1219    // FIXME: only used by the layout tests, should not be exposed.
     1220    _reset: function()
     1221    {
     1222        this._networkLogView._reset();
     1223    },
     1224
     1225    updateSidebarWidth: function(width)
     1226    {
     1227        if (!this._viewingResourceMode)
     1228            return;
     1229        WebInspector.Panel.prototype.updateSidebarWidth.call(this, width);
     1230    },
     1231
     1232    updateMainViewWidth: function(width)
     1233    {
     1234        this._viewsContainerElement.style.left = width + "px";
     1235    },
     1236
     1237    handleShortcut: function(event)
     1238    {
     1239        if (this._viewingResourceMode && event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code) {
     1240            this._toggleGridMode();
     1241            event.handled = true;
     1242            return;
     1243        }
     1244
     1245        WebInspector.Panel.prototype.handleShortcut.call(this, event);
     1246    },
     1247
     1248    show: function()
     1249    {
     1250        WebInspector.Panel.prototype.show.call(this);
     1251
     1252        if (this.visibleView)
     1253            this.visibleView.show(this._viewsContainerElement);
     1254        this._networkLogView.show();
     1255    },
     1256
     1257    hide: function()
     1258    {
     1259        WebInspector.Panel.prototype.hide.call(this);
     1260        this._networkLogView.hide();
     1261    },
     1262
     1263    get resources()
     1264    {
     1265        return this._networkLogView.resources;
     1266    },
     1267
     1268    resourceById: function(id)
     1269    {
     1270        return this._networkLogView.resourceById(id);
     1271    },
     1272
     1273    canShowAnchorLocation: function(anchor)
     1274    {
     1275        return !!this.resourceById(anchor.href);
     1276    },
     1277
     1278    showAnchorLocation: function(anchor)
     1279    {
     1280        this._showResource(this._resourcesByURL[anchor.href]);
     1281    },
     1282
     1283    _onViewCleared: function(event)
     1284    {
     1285        this._closeVisibleResource();
     1286        this._toggleGridMode();
     1287        this._viewsContainerElement.removeChildren();
     1288        this._viewsContainerElement.appendChild(this._closeButtonElement);
     1289    },
     1290
     1291    _onRowSizeChanged: function(event)
     1292    {
     1293        if (event.data.largeRows)
     1294            this._viewsContainerElement.removeStyleClass("small");
     1295        else
     1296            this._viewsContainerElement.addStyleClass("small");
     1297    },
     1298
     1299    _onResourceSelected: function(event)
     1300    {
     1301        this._showResource(event.data);
     1302    },
     1303
     1304    _showResource: function(resource)
     1305    {
     1306        if (!resource)
     1307            return;
     1308
     1309        this._toggleViewingResourceMode();
     1310
     1311        if (this.visibleView) {
     1312            this.visibleView.detach();
     1313            delete this.visibleView;
     1314        }
     1315
     1316        var view = new WebInspector.NetworkItemView(resource);
     1317        view.show(this._viewsContainerElement);
     1318        this.visibleView = view;
     1319
     1320        this.updateSidebarWidth();
     1321    },
     1322
     1323    _closeVisibleResource: function()
     1324    {
     1325        this.element.removeStyleClass("viewing-resource");
     1326
     1327        if (this.visibleView) {
     1328            this.visibleView.detach();
     1329            delete this.visibleView;
     1330        }
     1331
     1332        this.updateSidebarWidth();
     1333    },
     1334
     1335    _toggleGridMode: function()
     1336    {
     1337        if (this._viewingResourceMode) {
     1338            this._viewingResourceMode = false;
     1339            this.element.removeStyleClass("viewing-resource");
     1340            this._viewsContainerElement.addStyleClass("hidden");
     1341            this.sidebarElement.style.right = 0;
     1342            this.sidebarElement.style.removeProperty("width");
     1343        }
     1344
     1345        this._networkLogView.switchToDetailedView();
     1346        this._networkLogView.allowPopover = true;
     1347        this._networkLogView.allowResourceSelection = false;
     1348    },
     1349
     1350    _toggleViewingResourceMode: function()
     1351    {
     1352        if (this._viewingResourceMode)
     1353            return;
     1354        this._viewingResourceMode = true;
     1355
     1356        this.element.addStyleClass("viewing-resource");
     1357        this._viewsContainerElement.removeStyleClass("hidden");
     1358        this.updateSidebarWidth(200);
     1359        this._networkLogView.allowPopover = false;
     1360        this._networkLogView.allowResourceSelection = true;
     1361        this._networkLogView.switchToBriefView();
     1362    },
     1363
     1364    performSearch: function(searchQuery, sortOrFilterApplied)
     1365    {
     1366        this._networkLogView.performSearch(searchQuery, sortOrFilterApplied);
     1367    },
     1368
     1369    jumpToPreviousSearchResult: function()
     1370    {
     1371        this._networkLogView.jumpToPreviousSearchResult();
     1372    },
     1373
     1374    jumpToNextSearchResult: function()
     1375    {
     1376        this._networkLogView.jumpToNextSearchResult();
     1377    },
     1378
     1379    searchCanceled: function()
     1380    {
     1381        this._networkLogView.searchCanceled();
    11921382    }
    11931383}
    … …  
    14771667WebInspector.NetworkTransferDurationCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
    14781668
    1479 WebInspector.NetworkDataGridNode = function(panel, resource)
     1669WebInspector.NetworkDataGridNode = function(parentView, resource)
    14801670{
    14811671    WebInspector.DataGridNode.call(this, {});
    1482     this._panel = panel;
     1672    this._parentView = parentView;
    14831673    this._resource = resource;
    14841674}
    … …  
    15001690    isFilteredOut: function()
    15011691    {
    1502         if (!this._panel._hiddenCategories.all)
     1692        if (!this._parentView._hiddenCategories.all)
    15031693            return false;
    1504         return this._resource.category.name in this._panel._hiddenCategories;
     1694        return this._resource.category.name in this._parentView._hiddenCategories;
    15051695    },
    15061696
    15071697    select: function()
    15081698    {
    1509         this._panel._showResource(this._resource);
     1699        this._parentView.dispatchEventToListeners(WebInspector.NetworkLogView.EventNames.ResourceSelected, this._resource);
    15101700        WebInspector.DataGridNode.prototype.select.apply(this, arguments);
    15111701    },
    … …  
    15261716    get selectable()
    15271717    {
    1528         if (!this._panel._viewingResourceMode)
    1529             return false;
    1530         return !this.isFilteredOut();
     1718        return this._parentView.allowResourceSelection && !this.isFilteredOut();
    15311719    },
    15321720
Note: See TracChangeset for help on using the changeset viewer.