Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(45)

Side by Side Diff: Source/devtools/front_end/network/NetworkPanel.js

Issue 470093002: DevTools: NetworkPanel: fix node hightlight and reveal on search. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. 2 * Copyright (C) 2007, 2008 Apple Inc. All rights reserved.
3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org> 3 * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
4 * Copyright (C) 2011 Google Inc. All rights reserved. 4 * Copyright (C) 2011 Google Inc. All rights reserved.
5 * 5 *
6 * Redistribution and use in source and binary forms, with or without 6 * Redistribution and use in source and binary forms, with or without
7 * modification, are permitted provided that the following conditions 7 * modification, are permitted provided that the following conditions
8 * are met: 8 * are met:
9 * 9 *
10 * 1. Redistributions of source code must retain the above copyright 10 * 1. Redistributions of source code must retain the above copyright
(...skipping 173 matching lines...) Expand 10 before | Expand all | Expand 10 after
184 this._summaryBarElement = this.element.createChild("div", "network-summa ry-bar"); 184 this._summaryBarElement = this.element.createChild("div", "network-summa ry-bar");
185 185
186 this._updateRowsSize(); 186 this._updateRowsSize();
187 187
188 this._popoverHelper = new WebInspector.PopoverHelper(this.element, this. _getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover. bind(this)); 188 this._popoverHelper = new WebInspector.PopoverHelper(this.element, this. _getPopoverAnchor.bind(this), this._showPopover.bind(this), this._onHidePopover. bind(this));
189 // Enable faster hint. 189 // Enable faster hint.
190 this._popoverHelper.setTimeout(100); 190 this._popoverHelper.setTimeout(100);
191 191
192 this._setCalculator(new WebInspector.NetworkTransferTimeCalculator()); 192 this._setCalculator(new WebInspector.NetworkTransferTimeCalculator());
193 193
194 this.switchToDetailedView(); 194 this.switchViewMode(true);
195 }, 195 },
196 196
197 /** 197 /**
198 * @return {!Array.<!Element>} 198 * @return {!Array.<!Element>}
199 */ 199 */
200 statusBarItems: function() 200 statusBarItems: function()
201 { 201 {
202 return [ 202 return [
203 this._recordButton.element, 203 this._recordButton.element,
204 this._clearButton.element, 204 this._clearButton.element,
(...skipping 722 matching lines...) Expand 10 before | Expand all | Expand 10 after
927 if (request.loaderId === loaderId) 927 if (request.loaderId === loaderId)
928 requestsToPick.push(request); 928 requestsToPick.push(request);
929 } 929 }
930 930
931 this._reset(); 931 this._reset();
932 932
933 for (var i = 0; i < requestsToPick.length; ++i) 933 for (var i = 0; i < requestsToPick.length; ++i)
934 this._appendRequest(requestsToPick[i]); 934 this._appendRequest(requestsToPick[i]);
935 }, 935 },
936 936
937 switchToDetailedView: function() 937 /**
938 { 938 * @param {boolean} detailed
939 if (!this._dataGrid) 939 */
940 switchViewMode: function(detailed) {
vsevik 2014/08/14 11:12:44 { on the next line
eustas 2014/08/14 11:32:05 Done.
941 if (this._detailedMode === detailed)
940 return; 942 return;
941 if (this._dataGrid.selectedNode) 943 this._detailedMode = detailed;
942 this._dataGrid.selectedNode.selected = false;
943 944
944 this.element.classList.remove("brief-mode"); 945 if (detailed) {
945 this._detailedMode = true; 946 if (this._dataGrid.selectedNode)
947 this._dataGrid.selectedNode.selected = false;
948 } else {
949 this._removeAllNodeHighlights();
950 this._popoverHelper.hidePopover();
951 }
952
953 this.element.classList.toggle("brief-mode", !detailed);
946 this._updateColumns(); 954 this._updateColumns();
947 }, 955 },
948 956
949 switchToBriefView: function()
950 {
951 this.element.classList.add("brief-mode");
952 this._removeAllNodeHighlights();
953 this._detailedMode = false;
954 this._updateColumns();
955 this._popoverHelper.hidePopover();
956 },
957
958 _toggleLargerRequests: function() 957 _toggleLargerRequests: function()
959 { 958 {
960 WebInspector.settings.resourcesLargeRows.set(!WebInspector.settings.reso urcesLargeRows.get()); 959 WebInspector.settings.resourcesLargeRows.set(!WebInspector.settings.reso urcesLargeRows.get());
961 this._updateRowsSize(); 960 this._updateRowsSize();
962 }, 961 },
963 962
964 /** 963 /**
965 * @return {number} 964 * @return {number}
966 */ 965 */
967 rowHeight: function() 966 rowHeight: function()
(...skipping 353 matching lines...) Expand 10 before | Expand all | Expand 10 after
1321 this._currentMatchedRequestNode = null; 1320 this._currentMatchedRequestNode = null;
1322 return; 1321 return;
1323 } 1322 }
1324 1323
1325 var request = node._request; 1324 var request = node._request;
1326 var regExp = this._searchRegExp; 1325 var regExp = this._searchRegExp;
1327 var nameMatched = request.name().match(regExp); 1326 var nameMatched = request.name().match(regExp);
1328 var pathMatched = request.path().match(regExp); 1327 var pathMatched = request.path().match(regExp);
1329 if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled) 1328 if (!nameMatched && pathMatched && !this._largerRequestsButton.toggled)
1330 this._toggleLargerRequests(); 1329 this._toggleLargerRequests();
1330 if (reveal)
1331 WebInspector.Revealer.reveal(request);
1331 var highlightedSubstringChanges = node._highlightMatchedSubstring(regExp ); 1332 var highlightedSubstringChanges = node._highlightMatchedSubstring(regExp );
1332 this._highlightedSubstringChanges.push(highlightedSubstringChanges); 1333 this._highlightedSubstringChanges.push(highlightedSubstringChanges);
1333 if (reveal)
1334 WebInspector.Revealer.reveal(node);
1335 1334
1336 this._currentMatchedRequestNode = node; 1335 this._currentMatchedRequestNode = node;
1337 this._currentMatchedRequestIndex = n; 1336 this._currentMatchedRequestIndex = n;
1338 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Sea rchIndexUpdated, n); 1337 this.dispatchEventToListeners(WebInspector.NetworkLogView.EventTypes.Sea rchIndexUpdated, n);
1339 }, 1338 },
1340 1339
1341 /** 1340 /**
1342 * @param {string} query 1341 * @param {string} query
1343 * @param {boolean} shouldJump 1342 * @param {boolean} shouldJump
1344 * @param {boolean=} jumpBackwards 1343 * @param {boolean=} jumpBackwards
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after
1499 1498
1500 /** 1499 /**
1501 * @param {!WebInspector.NetworkRequest} request 1500 * @param {!WebInspector.NetworkRequest} request
1502 */ 1501 */
1503 revealAndHighlightRequest: function(request) 1502 revealAndHighlightRequest: function(request)
1504 { 1503 {
1505 this._removeAllNodeHighlights(); 1504 this._removeAllNodeHighlights();
1506 1505
1507 var node = this._nodesByRequestId.get(request.requestId); 1506 var node = this._nodesByRequestId.get(request.requestId);
1508 if (node) { 1507 if (node) {
1509 this._dataGrid.element.focus();
1510 node.reveal(); 1508 node.reveal();
1511 this._highlightNode(node); 1509 this._highlightNode(node);
1512 } 1510 }
1513 }, 1511 },
1514 1512
1515 _removeAllNodeHighlights: function() 1513 _removeAllNodeHighlights: function()
1516 { 1514 {
1517 if (this._highlightedNode) { 1515 if (this._highlightedNode) {
1518 this._highlightedNode.element().classList.remove("highlighted-row"); 1516 this._highlightedNode.element().classList.remove("highlighted-row");
1519 delete this._highlightedNode; 1517 delete this._highlightedNode;
(...skipping 478 matching lines...) Expand 10 before | Expand all | Expand 10 after
1998 }, 1996 },
1999 1997
2000 _toggleGridMode: function() 1998 _toggleGridMode: function()
2001 { 1999 {
2002 if (this._viewingRequestMode) { 2000 if (this._viewingRequestMode) {
2003 this._viewingRequestMode = false; 2001 this._viewingRequestMode = false;
2004 this.element.classList.remove("viewing-resource"); 2002 this.element.classList.remove("viewing-resource");
2005 this._splitView.hideMain(); 2003 this._splitView.hideMain();
2006 } 2004 }
2007 2005
2008 this._networkLogView.switchToDetailedView(); 2006 this._networkLogView.switchViewMode(true);
2009 this._networkLogView.setAllowPopover(true); 2007 this._networkLogView.setAllowPopover(true);
2010 this._networkLogView._allowRequestSelection = false; 2008 this._networkLogView._allowRequestSelection = false;
2011 }, 2009 },
2012 2010
2013 _toggleViewingRequestMode: function() 2011 _toggleViewingRequestMode: function()
2014 { 2012 {
2015 if (this._viewingRequestMode) 2013 if (this._viewingRequestMode)
2016 return; 2014 return;
2017 this._viewingRequestMode = true; 2015 this._viewingRequestMode = true;
2018 2016
2019 this.element.classList.add("viewing-resource"); 2017 this.element.classList.add("viewing-resource");
2020 this._splitView.showBoth(); 2018 this._splitView.showBoth();
2021 this._networkLogView.setAllowPopover(false); 2019 this._networkLogView.setAllowPopover(false);
2022 this._networkLogView._allowRequestSelection = true; 2020 this._networkLogView._allowRequestSelection = true;
2023 this._networkLogView.switchToBriefView(); 2021 this._networkLogView.switchViewMode(false);
2024 }, 2022 },
2025 2023
2026 /** 2024 /**
2027 * @param {string} query 2025 * @param {string} query
2028 * @param {boolean} shouldJump 2026 * @param {boolean} shouldJump
2029 * @param {boolean=} jumpBackwards 2027 * @param {boolean=} jumpBackwards
2030 */ 2028 */
2031 performSearch: function(query, shouldJump, jumpBackwards) 2029 performSearch: function(query, shouldJump, jumpBackwards)
2032 { 2030 {
2033 this._networkLogView.performSearch(query, shouldJump, jumpBackwards); 2031 this._networkLogView.performSearch(query, shouldJump, jumpBackwards);
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after
2124 * @constructor 2122 * @constructor
2125 * @implements {WebInspector.Revealer} 2123 * @implements {WebInspector.Revealer}
2126 */ 2124 */
2127 WebInspector.NetworkPanel.RequestRevealer = function() 2125 WebInspector.NetworkPanel.RequestRevealer = function()
2128 { 2126 {
2129 } 2127 }
2130 2128
2131 WebInspector.NetworkPanel.RequestRevealer.prototype = { 2129 WebInspector.NetworkPanel.RequestRevealer.prototype = {
2132 /** 2130 /**
2133 * @param {!Object} request 2131 * @param {!Object} request
2132 * @param {number=} lineNumber
2134 */ 2133 */
2135 reveal: function(request) 2134 reveal: function(request, lineNumber)
2136 { 2135 {
2137 if (request instanceof WebInspector.NetworkRequest) { 2136 if (request instanceof WebInspector.NetworkRequest) {
2138 var panel = /** @type {?WebInspector.NetworkPanel} */ (WebInspector. inspectorView.showPanel("network")); 2137 var panel = /** @type {?WebInspector.NetworkPanel} */ (WebInspector. inspectorView.showPanel("network"));
2139 if (panel) 2138 if (panel)
2140 panel.revealAndHighlightRequest(request); 2139 panel.revealAndHighlightRequest(request);
2141 } 2140 }
2142 } 2141 }
2143 } 2142 }
2144 2143
2145 /** 2144 /**
(...skipping 442 matching lines...) Expand 10 before | Expand all | Expand 10 after
2588 action: WebInspector.UserMetrics.UserActionNames.NetworkRequestSelec ted, 2587 action: WebInspector.UserMetrics.UserActionNames.NetworkRequestSelec ted,
2589 url: this._request.url 2588 url: this._request.url
2590 }); 2589 });
2591 }, 2590 },
2592 2591
2593 /** 2592 /**
2594 * @param {!RegExp=} regexp 2593 * @param {!RegExp=} regexp
2595 */ 2594 */
2596 _highlightMatchedSubstring: function(regexp) 2595 _highlightMatchedSubstring: function(regexp)
2597 { 2596 {
2597 // Ensure element is created.
2598 this.element();
2598 var domChanges = []; 2599 var domChanges = [];
2599 var matchInfo = this._element.textContent.match(regexp); 2600 var matchInfo = this._nameCell.textContent.match(regexp);
2600 if (matchInfo) 2601 if (matchInfo)
2601 WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges); 2602 WebInspector.highlightSearchResult(this._nameCell, matchInfo.index, matchInfo[0].length, domChanges);
2602 return domChanges; 2603 return domChanges;
2603 }, 2604 },
2604 2605
2605 _openInNewTab: function() 2606 _openInNewTab: function()
2606 { 2607 {
2607 InspectorFrontendHost.openInNewTab(this._request.url); 2608 InspectorFrontendHost.openInNewTab(this._request.url);
2608 }, 2609 },
2609 2610
(...skipping 415 matching lines...) Expand 10 before | Expand all | Expand 10 after
3025 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyNa me, revert, a, b) 3026 WebInspector.NetworkDataGridNode.RequestPropertyComparator = function(propertyNa me, revert, a, b)
3026 { 3027 {
3027 var aValue = a._request[propertyName]; 3028 var aValue = a._request[propertyName];
3028 var bValue = b._request[propertyName]; 3029 var bValue = b._request[propertyName];
3029 if (aValue > bValue) 3030 if (aValue > bValue)
3030 return revert ? -1 : 1; 3031 return revert ? -1 : 1;
3031 if (bValue > aValue) 3032 if (bValue > aValue)
3032 return revert ? 1 : -1; 3033 return revert ? 1 : -1;
3033 return a._request.indentityCompare(b._request); 3034 return a._request.indentityCompare(b._request);
3034 } 3035 }
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698