From c7d2b975d9749e92a18cb0532668c7a904a2f5b5 Mon Sep 17 00:00:00 2001 From: Antonin Hildebrand Date: Wed, 9 Nov 2016 00:14:05 +0100 Subject: [PATCH] squash 'resources/unpacked/devtools' changes from 902dfb7..64149c4 64149c4 [DevTools] Prepare BreakpointManager for column level breakpoints 370750e DevTools: Clear gutter markers when uninstalling CodeMirror gutter d81ab97 DevTools: Only give completions for expressions ending in . or [ 0bfff2a DevTools: add the logging aspect into the PerformanceMonitor, plumb it over the remote debugging protocol, surface it in DevTools. Also adds proof of concept violation reporting for layout thrashing and long running tasks. 1ba980e [Devtools] Move canvas timeline out of experiments git-subtree-dir: resources/unpacked/devtools git-subtree-split: 64149c4996ba301e28737632a2616b9a571ca676 --- BUILD.gn | 2 - front_end/Images/graphLabelCalloutLeft.png | Bin 95 -> 0 bytes front_end/Images/graphLabelCalloutRight.png | Bin 96 -> 0 bytes front_end/Tests.js | 18 +- front_end/bindings/BreakpointManager.js | 39 +- .../components/JavaScriptAutocomplete.js | 2 + front_end/console/ConsoleView.js | 26 +- front_end/console/ConsoleViewMessage.js | 13 +- front_end/console/consoleView.css | 2 +- front_end/console/module.json | 12 + front_end/main/Main.js | 6 - front_end/main/module.json | 8 - front_end/network/NetworkDataGridNode.js | 198 +------- front_end/network/NetworkLogView.js | 16 - front_end/network/NetworkLogViewColumns.js | 439 ++++-------------- front_end/network/networkLogView.css | 319 +------------ front_end/sdk/ConsoleModel.js | 3 + front_end/source_frame/SourcesTextEditor.js | 1 + front_end/sources/DebuggerPausedMessage.js | 3 +- .../JavaScriptBreakpointsSidebarPane.js | 3 +- front_end/sources/JavaScriptSourceFrame.js | 18 +- front_end/ui_lazy/DataGrid.js | 4 - 22 files changed, 198 insertions(+), 934 deletions(-) delete mode 100644 front_end/Images/graphLabelCalloutLeft.png delete mode 100644 front_end/Images/graphLabelCalloutRight.png diff --git a/BUILD.gn b/BUILD.gn index 4dd5d162ea..56925ef7ae 100644 --- a/BUILD.gn +++ b/BUILD.gn @@ -821,8 +821,6 @@ devtools_image_files = [ "front_end/Images/fileSystem.png", "front_end/Images/forward.png", "front_end/Images/frame.png", - "front_end/Images/graphLabelCalloutLeft.png", - "front_end/Images/graphLabelCalloutRight.png", "front_end/Images/ic_info_black_18dp.svg", "front_end/Images/ic_warning_black_18dp.svg", "front_end/Images/navigationControls.png", diff --git a/front_end/Images/graphLabelCalloutLeft.png b/front_end/Images/graphLabelCalloutLeft.png deleted file mode 100644 index 29fc04201ba259a10dce04b360656ca636487b1e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^+(696!3HEnjZ%I9DK$?Q#}J9B$v^)8w`blc!D1#H u@PPkF@j{csX-XesF8QdPJiA1Ljo~N%^w%}-C0Kzv7(8A5T-G@yGywoZY8%-A diff --git a/front_end/Images/graphLabelCalloutRight.png b/front_end/Images/graphLabelCalloutRight.png deleted file mode 100644 index 6c56a2bafb726995a41cf149015806e7f8a5bb15..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 96 zcmeAS@N?(olHy`uVBq!ia0vp^+(696!3HEnjZ%I9DRoa5#}J9B$v^)8w`blc!SbiE uLa#$@L4h%I$ip-xLr%5HPtt-!m>KqNnEqOL^5Qa}76wmOKbLh*2~7Y$CL0(4 diff --git a/front_end/Tests.js b/front_end/Tests.js index af949dad16..e821282a6a 100644 --- a/front_end/Tests.js +++ b/front_end/Tests.js @@ -517,13 +517,21 @@ }; TestSuite.prototype.testConsoleOnNavigateBack = function() { - if (WebInspector.multitargetConsoleModel.messages().length === 1) - firstConsoleMessageReceived.call(this); + + function filteredMessages() { + return WebInspector.multitargetConsoleModel.messages().filter( + a => a.source !== WebInspector.ConsoleMessage.MessageSource.Violation); + } + + if (filteredMessages().length === 1) + firstConsoleMessageReceived.call(this, null); else WebInspector.multitargetConsoleModel.addEventListener( WebInspector.ConsoleModel.Events.MessageAdded, firstConsoleMessageReceived, this); - function firstConsoleMessageReceived() { + function firstConsoleMessageReceived(event) { + if (event && event.data.source === WebInspector.ConsoleMessage.MessageSource.Violation) + return; WebInspector.multitargetConsoleModel.removeEventListener( WebInspector.ConsoleModel.Events.MessageAdded, firstConsoleMessageReceived, this); this.evaluateInConsole_('clickLink();', didClickLink.bind(this)); @@ -531,7 +539,7 @@ function didClickLink() { // Check that there are no new messages(command is not a message). - this.assertEquals(3, WebInspector.multitargetConsoleModel.messages().length); + this.assertEquals(3, filteredMessages().length); this.evaluateInConsole_('history.back();', didNavigateBack.bind(this)); } @@ -541,7 +549,7 @@ } function didCompleteNavigation() { - this.assertEquals(7, WebInspector.multitargetConsoleModel.messages().length); + this.assertEquals(7, filteredMessages().length); this.releaseControl(); } diff --git a/front_end/bindings/BreakpointManager.js b/front_end/bindings/BreakpointManager.js index 2ed3dd6bc4..542d48a1f1 100644 --- a/front_end/bindings/BreakpointManager.js +++ b/front_end/bindings/BreakpointManager.js @@ -46,7 +46,9 @@ WebInspector.BreakpointManager = class extends WebInspector.Object { this._debuggerWorkspaceBinding = debuggerWorkspaceBinding; this._breakpointsActive = true; + /** @type {!Map>>>} */ this._breakpointsForUISourceCode = new Map(); + /** @type {!Map>} */ this._breakpointsForPrimaryUISourceCode = new Map(); /** @type {!Multimap.} */ this._provisionalBreakpoints = new Multimap(); @@ -151,9 +153,10 @@ WebInspector.BreakpointManager = class extends WebInspector.Object { _uiSourceCodeAdded(event) { var uiSourceCode = /** @type {!WebInspector.UISourceCode} */ (event.data); this._restoreBreakpoints(uiSourceCode); - if (uiSourceCode.contentType().hasScripts()) + if (uiSourceCode.contentType().hasScripts()) { uiSourceCode.addEventListener( WebInspector.UISourceCode.Events.SourceMappingChanged, this._uiSourceCodeMappingChanged, this); + } } /** @@ -242,25 +245,25 @@ WebInspector.BreakpointManager = class extends WebInspector.Object { /** * @param {!WebInspector.UISourceCode} uiSourceCode * @param {number} lineNumber - * @param {number} columnNumber - * @return {?WebInspector.BreakpointManager.Breakpoint} + * @return {!Array} */ - findBreakpoint(uiSourceCode, lineNumber, columnNumber) { + findBreakpoints(uiSourceCode, lineNumber) { var breakpoints = this._breakpointsForUISourceCode.get(uiSourceCode); - var lineBreakpoints = breakpoints ? breakpoints.get(String(lineNumber)) : null; - var columnBreakpoints = lineBreakpoints ? lineBreakpoints.get(String(columnNumber)) : null; - return columnBreakpoints ? columnBreakpoints[0] : null; + var lineBreakpoints = breakpoints ? breakpoints.get(lineNumber) : null; + return lineBreakpoints ? lineBreakpoints.valuesArray()[0] : []; } /** * @param {!WebInspector.UISourceCode} uiSourceCode * @param {number} lineNumber + * @param {number} columnNumber * @return {?WebInspector.BreakpointManager.Breakpoint} */ - findBreakpointOnLine(uiSourceCode, lineNumber) { + findBreakpoint(uiSourceCode, lineNumber, columnNumber) { var breakpoints = this._breakpointsForUISourceCode.get(uiSourceCode); - var lineBreakpoints = breakpoints ? breakpoints.get(String(lineNumber)) : null; - return lineBreakpoints ? lineBreakpoints.valuesArray()[0][0] : null; + var lineBreakpoints = breakpoints ? breakpoints.get(lineNumber) : null; + var columnBreakpoints = lineBreakpoints ? lineBreakpoints.get(columnNumber) : null; + return columnBreakpoints ? columnBreakpoints[0] : null; } /** @@ -371,15 +374,15 @@ WebInspector.BreakpointManager = class extends WebInspector.Object { breakpoints = new Map(); this._breakpointsForUISourceCode.set(uiLocation.uiSourceCode, breakpoints); } - var lineBreakpoints = breakpoints.get(String(uiLocation.lineNumber)); + var lineBreakpoints = breakpoints.get(uiLocation.lineNumber); if (!lineBreakpoints) { lineBreakpoints = new Map(); - breakpoints.set(String(uiLocation.lineNumber), lineBreakpoints); + breakpoints.set(uiLocation.lineNumber, lineBreakpoints); } - var columnBreakpoints = lineBreakpoints.get(String(uiLocation.columnNumber)); + var columnBreakpoints = lineBreakpoints.get(uiLocation.columnNumber); if (!columnBreakpoints) { columnBreakpoints = []; - lineBreakpoints.set(String(uiLocation.columnNumber), columnBreakpoints); + lineBreakpoints.set(uiLocation.columnNumber, columnBreakpoints); } columnBreakpoints.push(breakpoint); this.dispatchEventToListeners( @@ -395,17 +398,17 @@ WebInspector.BreakpointManager = class extends WebInspector.Object { if (!breakpoints) return; - var lineBreakpoints = breakpoints.get(String(uiLocation.lineNumber)); + var lineBreakpoints = breakpoints.get(uiLocation.lineNumber); if (!lineBreakpoints) return; - var columnBreakpoints = lineBreakpoints.get(String(uiLocation.columnNumber)); + var columnBreakpoints = lineBreakpoints.get(uiLocation.columnNumber); if (!columnBreakpoints) return; columnBreakpoints.remove(breakpoint); if (!columnBreakpoints.length) - lineBreakpoints.remove(String(uiLocation.columnNumber)); + lineBreakpoints.remove(uiLocation.columnNumber); if (!lineBreakpoints.size) - breakpoints.remove(String(uiLocation.lineNumber)); + breakpoints.remove(uiLocation.lineNumber); if (!breakpoints.size) this._breakpointsForUISourceCode.remove(uiLocation.uiSourceCode); this.dispatchEventToListeners( diff --git a/front_end/components/JavaScriptAutocomplete.js b/front_end/components/JavaScriptAutocomplete.js index c53a7e7d6a..74da452d85 100644 --- a/front_end/components/JavaScriptAutocomplete.js +++ b/front_end/components/JavaScriptAutocomplete.js @@ -72,6 +72,8 @@ WebInspector.JavaScriptAutocomplete.completionsForExpression = function(expressi if (dotNotation || bracketNotation) expressionString = expressionString.substr(0, lastIndex); + else + expressionString = ''; // User is entering float value, do not suggest anything. if ((expressionString && !isNaN(expressionString)) || (!expressionString && query && !isNaN(query))) diff --git a/front_end/console/ConsoleView.js b/front_end/console/ConsoleView.js index 9006c4e812..62f9f08056 100644 --- a/front_end/console/ConsoleView.js +++ b/front_end/console/ConsoleView.js @@ -511,7 +511,8 @@ WebInspector.ConsoleView = class extends WebInspector.VBox { */ _appendMessageToEnd(viewMessage) { if (!this._filter.shouldBeVisible(viewMessage)) { - this._hiddenByFilterCount++; + if (this._filter.shouldBeVisibleByDefault(viewMessage)) + this._hiddenByFilterCount++; return; } @@ -1070,11 +1071,15 @@ WebInspector.ConsoleViewFilter = class extends WebInspector.Object { filterBar.addFilter(this._textFilterUI); this._hideNetworkMessagesCheckbox = new WebInspector.CheckboxFilterUI( - 'hide-network-messages', WebInspector.UIString('Hide network messages'), true, + '', WebInspector.UIString('Hide network'), true, WebInspector.moduleSetting('hideNetworkMessages')); - this._hideNetworkMessagesCheckbox.addEventListener( - WebInspector.FilterUI.Events.FilterChanged, this._filterChanged.bind(this), this); + this._hideViolationMessagesCheckbox = new WebInspector.CheckboxFilterUI( + '', WebInspector.UIString('Hide violations'), false, + WebInspector.moduleSetting('hideViolationMessages')); + WebInspector.moduleSetting('hideNetworkMessages').addChangeListener(this._filterChanged, this); + WebInspector.moduleSetting('hideViolationMessages').addChangeListener(this._filterChanged, this); filterBar.addFilter(this._hideNetworkMessagesCheckbox); + filterBar.addFilter(this._hideViolationMessagesCheckbox); var levels = [ {name: WebInspector.ConsoleMessage.MessageLevel.Error, label: WebInspector.UIString('Errors')}, @@ -1146,6 +1151,10 @@ WebInspector.ConsoleViewFilter = class extends WebInspector.Object { viewMessage.consoleMessage().source === WebInspector.ConsoleMessage.MessageSource.Network) return false; + if (WebInspector.moduleSetting('hideViolationMessages').get() && + viewMessage.consoleMessage().source === WebInspector.ConsoleMessage.MessageSource.Violation) + return false; + if (viewMessage.consoleMessage().isGroupMessage()) return true; @@ -1168,12 +1177,21 @@ WebInspector.ConsoleViewFilter = class extends WebInspector.Object { return true; } + /** + * @return {boolean} + */ + shouldBeVisibleByDefault(viewMessage) { + return viewMessage.consoleMessage().source !== + WebInspector.ConsoleMessage.MessageSource.Violation; + } + reset() { this._messageURLFilters = {}; this._messageURLFiltersSetting.set(this._messageURLFilters); this._messageLevelFiltersSetting.set({}); this._view._showAllMessagesCheckbox.inputElement.checked = true; WebInspector.moduleSetting('hideNetworkMessages').set(false); + WebInspector.moduleSetting('hideViolationMessages').set(true); this._textFilterUI.setValue(''); this._filterChanged(); } diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js index 781209df99..dda60e39a0 100644 --- a/front_end/console/ConsoleViewMessage.js +++ b/front_end/console/ConsoleViewMessage.js @@ -191,6 +191,7 @@ WebInspector.ConsoleViewMessage = class { */ _buildMessage(consoleMessage) { var messageElement; + var messageText = consoleMessage.messageText; if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource.ConsoleAPI) { switch (consoleMessage.type) { case WebInspector.ConsoleMessage.MessageType.Trace: @@ -213,13 +214,13 @@ WebInspector.ConsoleViewMessage = class { break; case WebInspector.ConsoleMessage.MessageType.Profile: case WebInspector.ConsoleMessage.MessageType.ProfileEnd: - messageElement = this._format([consoleMessage.messageText]); + messageElement = this._format([messageText]); break; default: if (consoleMessage.parameters && consoleMessage.parameters.length === 1 && consoleMessage.parameters[0].type === 'string') messageElement = this._tryFormatAsError(/** @type {string} */ (consoleMessage.parameters[0].value)); - var args = consoleMessage.parameters || [consoleMessage.messageText]; + var args = consoleMessage.parameters || [messageText]; messageElement = messageElement || this._format(args); } } else if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource.Network) { @@ -237,14 +238,16 @@ WebInspector.ConsoleViewMessage = class { ' ', String(consoleMessage.request.statusCode), ' (', consoleMessage.request.statusText, ')'); } else { var fragment = WebInspector.linkifyStringAsFragmentWithCustomLinkifier( - consoleMessage.messageText, linkifyRequest.bind(consoleMessage)); + messageText, linkifyRequest.bind(consoleMessage)); messageElement.appendChild(fragment); } } else { - messageElement = this._format([consoleMessage.messageText]); + messageElement = this._format([messageText]); } } else { - var args = consoleMessage.parameters || [consoleMessage.messageText]; + if (consoleMessage.source === WebInspector.ConsoleMessage.MessageSource.Violation) + messageText = WebInspector.UIString('[Violation] %s', messageText); + var args = consoleMessage.parameters || [messageText]; messageElement = this._format(args); } messageElement.classList.add('console-message-text'); diff --git a/front_end/console/consoleView.css b/front_end/console/consoleView.css index 2e9fa22cda..a33ca59b4d 100644 --- a/front_end/console/consoleView.css +++ b/front_end/console/consoleView.css @@ -156,10 +156,10 @@ flex: 1; } -.console-warning-level .repeated-message, .console-error-level .repeated-message, .console-revokedError-level .repeated-message, .console-log-level .repeated-message, +.console-warning-level .repeated-message, .console-debug-level .repeated-message, .console-info-level .repeated-message { display: flex; diff --git a/front_end/console/module.json b/front_end/console/module.json index 5eb1d771b0..b3d74cc6f0 100644 --- a/front_end/console/module.json +++ b/front_end/console/module.json @@ -69,6 +69,18 @@ { "value": false, "title": "Show network messages" } ] }, + { + "type": "setting", + "category": "Console", + "title": "Hide violations", + "settingName": "hideViolationMessages", + "settingType": "boolean", + "defaultValue": true, + "options": [ + { "value": true, "title": "Hide violations" }, + { "value": false, "title": "Show violations" } + ] + }, { "type": "setting", "category": "Console", diff --git a/front_end/main/Main.js b/front_end/main/Main.js index 63857cd80d..f0e01cc730 100644 --- a/front_end/main/Main.js +++ b/front_end/main/Main.js @@ -102,7 +102,6 @@ WebInspector.Main = class { Runtime.experiments.register('audits2', 'Audits 2.0', true); Runtime.experiments.register('autoAttachToCrossProcessSubframes', 'Auto-attach to cross-process subframes', true); Runtime.experiments.register('blackboxJSFramesOnTimeline', 'Blackbox JavaScript frames on Timeline', true); - Runtime.experiments.register('canvasNetworkTimeline', 'Canvas based timeline in Network panel', true); Runtime.experiments.register('colorContrastRatio', 'Contrast ratio line in color picker', true); Runtime.experiments.register('continueToFirstInvocation', 'Continue to first invocation', true); Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping'); @@ -1013,8 +1012,6 @@ WebInspector.BackendSettingsSync = class { this._autoAttachSetting.addChangeListener(this._update, this); this._disableJavascriptSetting = WebInspector.settings.moduleSetting('javaScriptDisabled'); this._disableJavascriptSetting.addChangeListener(this._update, this); - this._blockedEventsWarningSetting = WebInspector.settings.moduleSetting('blockedEventsWarningEnabled'); - this._blockedEventsWarningSetting.addChangeListener(this._update, this); WebInspector.targetManager.observeTargets(this, WebInspector.Target.Capability.Browser); } @@ -1022,9 +1019,6 @@ WebInspector.BackendSettingsSync = class { * @param {!WebInspector.Target} target */ _updateTarget(target) { - var blockedEventsWarningThresholdSeconds = 0.1; - target.pageAgent().setBlockedEventsWarningThreshold( - this._blockedEventsWarningSetting.get() ? blockedEventsWarningThresholdSeconds : 0); target.pageAgent().setAutoAttachToCreatedPages(this._autoAttachSetting.get()); target.emulationAgent().setScriptExecutionDisabled(this._disableJavascriptSetting.get()); } diff --git a/front_end/main/module.json b/front_end/main/module.json index 68a5a317e0..dde6e1538f 100644 --- a/front_end/main/module.json +++ b/front_end/main/module.json @@ -296,14 +296,6 @@ "settingType": "boolean", "defaultValue": false }, - { - "type": "setting", - "category": "Console", - "title": "Report input events blocked for too long", - "settingName": "blockedEventsWarningEnabled", - "settingType": "boolean", - "defaultValue": true - }, { "type": "@WebInspector.SettingUI", "category": "Extensions", diff --git a/front_end/network/NetworkDataGridNode.js b/front_end/network/NetworkDataGridNode.js index e7068ba4c6..408cad54ac 100644 --- a/front_end/network/NetworkDataGridNode.js +++ b/front_end/network/NetworkDataGridNode.js @@ -40,7 +40,6 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo super({}); this._parentView = parentView; this._request = request; - this._staleGraph = true; this._isNavigationRequest = false; this.selectable = true; } @@ -290,17 +289,12 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo * @override */ createCells() { - this._showTiming = !WebInspector.moduleSetting('networkColorCodeResourceTypes').get() && - !this._parentView.calculator().startAtZero; this._nameCell = null; - this._timelineCell = null; this._initiatorCell = null; this._element.classList.toggle('network-error-row', this._isFailed()); this._element.classList.toggle('network-navigation-row', this._isNavigationRequest); super.createCells(); - - this._updateGraph(); } /** @@ -323,9 +317,6 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo case 'name': this._renderNameCell(cell); break; - case 'timeline': - this._createTimelineBar(cell); - break; case 'method': this._setTextAndTitle(cell, this._request.requestMethod); break; @@ -368,6 +359,9 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo case 'time': this._renderTimeCell(cell); break; + case 'timeline': + this._setTextAndTitle(cell, ''); + break; default: this._setTextAndTitle(cell, this._request.responseHeaderValue(columnIdentifier) || ''); break; @@ -389,8 +383,6 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo * @protected */ willAttach() { - if (this._staleGraph) - this._updateGraph(); if (this._initiatorCell && this._request.initiatorInfo().type === WebInspector.NetworkRequest.InitiatorType.Script) this._initiatorCell.insertBefore(this._linkifiedInitiatorAnchor, this._initiatorCell.firstChild); } @@ -435,50 +427,6 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo InspectorFrontendHost.openInNewTab(this._request.url); } - /** - * @param {!Element} cell - */ - _createTimelineBar(cell) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - return; - cell = cell.createChild('div'); - this._timelineCell = cell; - - cell.className = 'network-graph-side'; - - this._barAreaElement = cell.createChild('div', 'network-graph-bar-area'); - this._barAreaElement.request = this._request; - - if (this._showTiming) - return; - - var type = this._request.resourceType().name(); - var cached = this._request.cached(); - - this._barLeftElement = this._barAreaElement.createChild('div', 'network-graph-bar'); - this._barLeftElement.classList.add(type, 'waiting'); - this._barLeftElement.classList.toggle('cached', cached); - - this._barRightElement = this._barAreaElement.createChild('div', 'network-graph-bar'); - this._barRightElement.classList.add(type); - this._barRightElement.classList.toggle('cached', cached); - - this._labelLeftElement = this._barAreaElement.createChild('div', 'network-graph-label'); - this._labelLeftElement.classList.add('waiting'); - - this._labelRightElement = this._barAreaElement.createChild('div', 'network-graph-label'); - - cell.addEventListener('mouseover', this._onMouseOver.bind(this), false); - } - - /** - * @param {!Event} event - */ - _onMouseOver(event) { - this._refreshLabelPositions(); - this._parentView[WebInspector.NetworkDataGridNode._hoveredRowSymbol] = this; - } - /** * @return {boolean} */ @@ -651,144 +599,4 @@ WebInspector.NetworkDataGridNode = class extends WebInspector.SortableDataGridNo subtitleElement.textContent = subtitleText; cellElement.appendChild(subtitleElement); } - - refreshGraph() { - if (!this._timelineCell) - return; - this._staleGraph = true; - if (this.attached()) - this.dataGrid.scheduleUpdate(); - } - - _updateTimingGraph() { - var calculator = this._parentView.calculator(); - var timeRanges = - WebInspector.RequestTimingView.calculateRequestTimeRanges(this._request, calculator.minimumBoundary()); - var right = timeRanges[0].end; - - var container = this._barAreaElement; - var nextBar = container.firstChild; - for (var i = 0; i < timeRanges.length; ++i) { - var range = timeRanges[i]; - var start = calculator.computePercentageFromEventTime(range.start); - var end = (range.end !== Number.MAX_VALUE) ? calculator.computePercentageFromEventTime(range.end) : 100; - if (!nextBar) - nextBar = container.createChild('div'); - nextBar.className = 'network-graph-bar request-timing'; - nextBar.classList.add(range.name); - nextBar.style.setProperty('left', start + '%'); - nextBar.style.setProperty('right', (100 - end) + '%'); - nextBar = nextBar.nextSibling; - } - while (nextBar) { - var nextSibling = nextBar.nextSibling; - nextBar.remove(); - nextBar = nextSibling; - } - } - - _updateGraph() { - this._staleGraph = false; - if (!this._timelineCell) - return; - if (this._showTiming) { - this._updateTimingGraph(); - return; - } - - var calculator = this._parentView.calculator(); - var percentages = calculator.computeBarGraphPercentages(this._request); - this._percentages = percentages; - - this._barAreaElement.classList.remove('hidden'); - - this._barLeftElement.style.setProperty('left', percentages.start + '%'); - this._barLeftElement.style.setProperty('right', (100 - percentages.middle) + '%'); - - this._barRightElement.style.setProperty('left', percentages.middle + '%'); - this._barRightElement.style.setProperty('right', (100 - percentages.end) + '%'); - - var labels = calculator.computeBarGraphLabels(this._request); - this._labelLeftElement.textContent = labels.left; - this._labelRightElement.textContent = labels.right; - - var tooltip = (labels.tooltip || ''); - this._barLeftElement.title = tooltip; - this._labelLeftElement.title = tooltip; - this._labelRightElement.title = tooltip; - this._barRightElement.title = tooltip; - - if (this._parentView[WebInspector.NetworkDataGridNode._hoveredRowSymbol] === this) - this._refreshLabelPositions(); - } - - _refreshLabelPositions() { - if (!this._percentages) - return; - this._labelLeftElement.style.removeProperty('left'); - this._labelLeftElement.style.removeProperty('right'); - this._labelLeftElement.classList.remove('before'); - this._labelLeftElement.classList.remove('hidden'); - - this._labelRightElement.style.removeProperty('left'); - this._labelRightElement.style.removeProperty('right'); - this._labelRightElement.classList.remove('after'); - this._labelRightElement.classList.remove('hidden'); - - const labelPadding = 10; - const barRightElementOffsetWidth = this._barRightElement.offsetWidth; - const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth; - - if (this._barLeftElement) { - var leftBarWidth = barLeftElementOffsetWidth - labelPadding; - var rightBarWidth = (barRightElementOffsetWidth - barLeftElementOffsetWidth) - labelPadding; - } else { - var leftBarWidth = (barLeftElementOffsetWidth - barRightElementOffsetWidth) - labelPadding; - var rightBarWidth = barRightElementOffsetWidth - labelPadding; - } - - const labelLeftElementOffsetWidth = this._labelLeftElement.offsetWidth; - const labelRightElementOffsetWidth = this._labelRightElement.offsetWidth; - - const labelBefore = (labelLeftElementOffsetWidth > leftBarWidth); - const labelAfter = (labelRightElementOffsetWidth > rightBarWidth); - const graphElementOffsetWidth = this._timelineCell.offsetWidth; - - if (labelBefore && (graphElementOffsetWidth * (this._percentages.start / 100)) < (labelLeftElementOffsetWidth + 10)) - var leftHidden = true; - - if (labelAfter && - (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < (labelRightElementOffsetWidth + 10)) - var rightHidden = true; - - if (barLeftElementOffsetWidth === barRightElementOffsetWidth) { - // The left/right label data are the same, so a before/after label can be replaced by an on-bar label. - if (labelBefore && !labelAfter) - leftHidden = true; - else if (labelAfter && !labelBefore) - rightHidden = true; - } - - if (labelBefore) { - if (leftHidden) - this._labelLeftElement.classList.add('hidden'); - this._labelLeftElement.style.setProperty('right', (100 - this._percentages.start) + '%'); - this._labelLeftElement.classList.add('before'); - } else { - this._labelLeftElement.style.setProperty('left', this._percentages.start + '%'); - this._labelLeftElement.style.setProperty('right', (100 - this._percentages.middle) + '%'); - } - - if (labelAfter) { - if (rightHidden) - this._labelRightElement.classList.add('hidden'); - this._labelRightElement.style.setProperty('left', this._percentages.end + '%'); - this._labelRightElement.classList.add('after'); - } else { - this._labelRightElement.style.setProperty('left', this._percentages.middle + '%'); - this._labelRightElement.style.setProperty('right', (100 - this._percentages.end) + '%'); - } - } }; - -WebInspector.NetworkDataGridNode._hoveredRowSymbol = Symbol('hoveredRow'); diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js index 231984e5b9..bbb887c55f 100644 --- a/front_end/network/NetworkLogView.js +++ b/front_end/network/NetworkLogView.js @@ -396,7 +396,6 @@ WebInspector.NetworkLogView = class extends WebInspector.VBox { this._timeFilter = WebInspector.NetworkLogView._requestTimeFilter.bind(null, start, end); this._timeCalculator.setWindow(new WebInspector.NetworkTimeBoundary(start, end)); } - this._columns.updateDividersIfNeeded(); this._filterRequests(); } @@ -766,13 +765,6 @@ WebInspector.NetworkLogView = class extends WebInspector.VBox { this._columns.wasShown(); } - /** - * @override - */ - willHide() { - this._columns.willHide(); - } - _refresh() { this._needsRefresh = false; @@ -831,14 +823,6 @@ WebInspector.NetworkLogView = class extends WebInspector.VBox { this._highlightNthMatchedRequestForSearch( this._updateMatchCountAndFindMatchIndex(this._currentMatchedRequestNode), false); - if (!this.calculator().boundary().equals(oldBoundary)) { - // The boundaries changed, so all item graphs are stale. - this._columns.updateDividersIfNeeded(); - var nodes = this._nodesByRequestId.valuesArray(); - for (var i = 0; i < nodes.length; ++i) - nodes[i].refreshGraph(); - } - this._staleRequestIds = {}; this._updateSummaryBar(); diff --git a/front_end/network/NetworkLogViewColumns.js b/front_end/network/NetworkLogViewColumns.js index 59b3a7814b..6035d31a7e 100644 --- a/front_end/network/NetworkLogViewColumns.js +++ b/front_end/network/NetworkLogViewColumns.js @@ -12,29 +12,16 @@ WebInspector.NetworkLogViewColumns = class { * @param {!WebInspector.Setting} networkLogLargeRowsSetting */ constructor(networkLogView, timeCalculator, durationCalculator, networkLogLargeRowsSetting) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - var timelineColumn = - WebInspector.NetworkLogViewColumns._defaultColumns.find(columnConfig => columnConfig.id === 'timeline'); - timelineColumn.visible = false; - timelineColumn.hideable = false; - } - this._networkLogView = networkLogView; /** @type {!WebInspector.Setting} */ this._persistantSettings = WebInspector.settings.createSetting('networkLogColumns', {}); - /** @type {!Array} */ - this._dropDownColumnSelectors = []; - this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, this); - /** @type {!Array<{time: number, element: !Element}>} */ - this._eventDividers = []; - /** @type {!Map>} */ - this._shownEventDividers = new Map(); + this._eventDividers = new Map(); this._eventDividersShown = false; this._gridMode = true; @@ -42,9 +29,6 @@ WebInspector.NetworkLogViewColumns = class { /** @type {!Array.} */ this._columns = []; - /** @type {?WebInspector.TimelineGrid} */ - this._timelineGrid = null; - this._timelineHeaderElement = null; this._timelineRequestsAreStale = false; this._timelineScrollerWidthIsStale = true; @@ -57,8 +41,7 @@ WebInspector.NetworkLogViewColumns = class { this._calculatorsMap.set(WebInspector.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator); this._setupDataGrid(); - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._setupTimeline(); + this._setupTimeline(); } /** @@ -87,9 +70,7 @@ WebInspector.NetworkLogViewColumns = class { reset() { if (this._popoverHelper) this._popoverHelper.hidePopover(); - this._timelineGrid.removeEventDividers(); - this._shownEventDividers.clear(); - this.updateDividersIfNeeded(); + this._eventDividers.clear(); } _setupDataGrid() { @@ -122,26 +103,16 @@ WebInspector.NetworkLogViewColumns = class { this._updateColumns(); this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortHandler, this); - this._dataGrid.addEventListener(WebInspector.DataGrid.Events.ColumnsResized, this.updateDividersIfNeeded, this); this._dataGrid.setHeaderContextMenuCallback(this._innerHeaderContextMenu.bind(this)); - this._timelineGrid = new WebInspector.TimelineGrid(); - this._timelineGrid.element.classList.add('network-timeline-grid'); - if (!Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._dataGrid.element.appendChild(this._timelineGrid.element); - - this._setupDropdownColumns(); - this._activeTimelineSortId = WebInspector.NetworkLogViewColumns.TimelineSortIds.StartTime; this._dataGrid.markColumnAsSortedBy( WebInspector.NetworkLogViewColumns._initialSortColumn, WebInspector.DataGrid.Order.Ascending); - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewTimeline', 200); - var widget = this._dataGrid.asWidget(); - widget.setMinimumSize(150, 0); - this._splitWidget.setMainWidget(widget); - } + this._splitWidget = new WebInspector.SplitWidget(true, true, 'networkPanelSplitViewTimeline', 200); + var widget = this._dataGrid.asWidget(); + widget.setMinimumSize(150, 0); + this._splitWidget.setMainWidget(widget); } _setupTimeline() { @@ -227,7 +198,7 @@ WebInspector.NetworkLogViewColumns = class { if (!this._timelineRequestsAreStale) { this._updateScrollerWidthIfNeeded(); this._timelineColumn.update( - this._activeScroller.scrollTop, this._eventDividersShown ? this._shownEventDividers : undefined); + this._activeScroller.scrollTop, this._eventDividersShown ? this._eventDividers : undefined); return; } var currentNode = this._dataGrid.rootNode(); @@ -238,7 +209,7 @@ WebInspector.NetworkLogViewColumns = class { requestData.navigationRequest = currentNode.request(); requestData.requests.push(currentNode.request()); } - this._timelineColumn.update(this._activeScroller.scrollTop, this._shownEventDividers, requestData); + this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividers, requestData); } /** @@ -246,8 +217,7 @@ WebInspector.NetworkLogViewColumns = class { * @param {boolean} highlightInitiatorChain */ setHoveredRequest(request, highlightInitiatorChain) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain); + this._timelineColumn.setHoveredRequest(request, highlightInitiatorChain); } _createTimelineHeader() { @@ -258,7 +228,7 @@ WebInspector.NetworkLogViewColumns = class { var innerElement = this._timelineHeaderElement.createChild('div'); innerElement.textContent = WebInspector.UIString('Waterfall'); this._timelineColumnSortIcon = this._timelineHeaderElement.createChild('div', 'sort-order-icon-container') - .createChild('div', 'sort-order-icon'); + .createChild('div', 'sort-order-icon'); /** * @this {WebInspector.NetworkLogViewColumns} @@ -276,13 +246,11 @@ WebInspector.NetworkLogViewColumns = class { * @param {!WebInspector.NetworkTimeCalculator} x */ setCalculator(x) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._timelineColumn.setCalculator(x); + this._timelineColumn.setCalculator(x); } dataChanged() { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._timelineRequestsAreStale = true; + this._timelineRequestsAreStale = true; } _updateRowsSize() { @@ -290,13 +258,10 @@ WebInspector.NetworkLogViewColumns = class { this._dataGrid.element.classList.toggle('small', !largeRows); this._dataGrid.scheduleUpdate(); - if (!Runtime.experiments.isEnabled('canvasNetworkTimeline')) - return; this._timelineScrollerWidthIsStale = true; this._timelineColumn.setRowHeight(this._networkLogView.rowHeight()); this._timelineScroller.classList.toggle('small', !largeRows); this._timelineHeaderElement.classList.toggle('small', !largeRows); - this._timelineGrid.element.classList.toggle('small', !this._networkLogLargeRowsSetting.get()); this._timelineColumn.setHeaderHeight(this._timelineScroller.offsetTop); } @@ -304,10 +269,7 @@ WebInspector.NetworkLogViewColumns = class { * @param {!Element} element */ show(element) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - this._splitWidget.show(element); - else - this._dataGrid.asWidget().show(element); + this._splitWidget.show(element); } /** @@ -317,28 +279,6 @@ WebInspector.NetworkLogViewColumns = class { return this._dataGrid; } - _setupDropdownColumns() { - for (var columnConfig of this._columns) { - if (!columnConfig.sortConfig || !columnConfig.sortConfig.entries) - continue; - var select = createElement('select'); - var placeHolderOption = select.createChild('option'); - placeHolderOption.classList.add('hidden'); - for (var entry of columnConfig.sortConfig.entries) { - var option = select.createChild('option'); - option.value = entry.id; - option.label = entry.title; - select.appendChild(option); - } - var header = this._dataGrid.headerTableHeader(columnConfig.id); - header.replaceChild(select, header.firstChild); - header.createChild('div', 'sort-order-icon-container').createChild('div', 'sort-order-icon'); - columnConfig.selectBox = select; - select.addEventListener('change', this._sortByDropdownItem.bind(this, columnConfig), false); - this._dropDownColumnSelectors.push(select); - } - } - sortByCurrentColumn() { this._sortHandler(); } @@ -346,7 +286,7 @@ WebInspector.NetworkLogViewColumns = class { _sortHandler() { var columnId = this._dataGrid.sortColumnId(); this._networkLogView.removeAllNodeHighlights(); - if (Runtime.experiments.isEnabled('canvasNetworkTimeline') && columnId === 'timeline') { + if (columnId === 'timeline') { this._timelineColumnSortIcon.classList.remove('sort-ascending', 'sort-descending'); if (this._dataGrid.sortOrder() === WebInspector.DataGrid.Order.Ascending) @@ -362,38 +302,10 @@ WebInspector.NetworkLogViewColumns = class { } var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId); - if (!columnConfig) - return; - if (columnConfig.sortConfig && columnConfig.sortConfig.entries) { - this._sortByDropdownItem(columnConfig); - return; - } - if (!columnConfig.sortConfig.sortingFunction) + if (!columnConfig || !columnConfig.sortingFunction) return; - this._dataGrid.sortNodes(columnConfig.sortConfig.sortingFunction, !this._dataGrid.isSortOrderAscending()); - this._networkLogView.dataGridSorted(); - } - - /** - * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig - */ - _sortByDropdownItem(columnConfig) { - this._networkLogView.removeAllNodeHighlights(); - var selectedIndex = columnConfig.selectBox.selectedIndex; - if (!selectedIndex) - selectedIndex = 1; // Sort by first item by default. - var selectedItemConfig = columnConfig.sortConfig.entries[selectedIndex - 1]; // -1 because of placeholder. - var selectedOption = columnConfig.selectBox[selectedIndex]; - var value = selectedOption.value; - - this._dataGrid.sortNodes(selectedItemConfig.sortingFunction); - this._dataGrid.markColumnAsSortedBy( - columnConfig.id, /** @type {!WebInspector.DataGrid.Order} */ (selectedItemConfig.sort)); - if (selectedItemConfig.calculator) - this._networkLogView.setCalculator(this._calculatorsMap.get(selectedItemConfig.calculator)); - columnConfig.selectBox.options[0].label = selectedItemConfig.title; - columnConfig.selectBox.selectedIndex = 0; + this._dataGrid.sortNodes(columnConfig.sortingFunction, !this._dataGrid.isSortOrderAscending()); this._networkLogView.dataGridSorted(); } @@ -421,29 +333,18 @@ WebInspector.NetworkLogViewColumns = class { if (gridMode) { if (this._dataGrid.selectedNode) this._dataGrid.selectedNode.selected = false; - } else { - this._networkLogView.removeAllNodeHighlights(); - this._popoverHelper.hidePopover(); - } - - this._networkLogView.element.classList.toggle('brief-mode', !gridMode); - this._updateColumns(); - - if (!Runtime.experiments.isEnabled('canvasNetworkTimeline')) - return; - // TODO(allada) Move this code into the code above. - if (gridMode) { this._splitWidget.showBoth(); this._activeScroller = this._timelineScroller; this._timelineScroller.scrollTop = this._dataGridScroller.scrollTop; - this._dataGridScroller.style.overflow = 'hidden'; this._dataGrid.setScrollContainer(this._timelineScroller); } else { + this._networkLogView.removeAllNodeHighlights(); this._splitWidget.hideSidebar(); this._activeScroller = this._dataGridScroller; - this._dataGridScroller.style.overflow = 'overlay'; this._dataGrid.setScrollContainer(this._dataGridScroller); } + this._networkLogView.element.classList.toggle('brief-mode', !gridMode); + this._updateColumns(); } /** @@ -498,42 +399,43 @@ WebInspector.NetworkLogViewColumns = class { _innerHeaderContextMenu(contextMenu) { var columnConfigs = this._columns.filter(columnConfig => columnConfig.hideable); var nonResponseHeaders = columnConfigs.filter(columnConfig => !columnConfig.isResponseHeader); - for (var columnConfig of nonResponseHeaders) + for (var columnConfig of nonResponseHeaders) { contextMenu.appendCheckboxItem( columnConfig.title, this._toggleColumnVisibility.bind(this, columnConfig), columnConfig.visible); + } contextMenu.appendSeparator(); var responseSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Response Headers')); var responseHeaders = columnConfigs.filter(columnConfig => columnConfig.isResponseHeader); - for (var columnConfig of responseHeaders) + for (var columnConfig of responseHeaders) { responseSubMenu.appendCheckboxItem( columnConfig.title, this._toggleColumnVisibility.bind(this, columnConfig), columnConfig.visible); + } responseSubMenu.appendSeparator(); responseSubMenu.appendItem( WebInspector.UIString('Manage Header Columns\u2026'), this._manageCustomHeaderDialog.bind(this)); - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - contextMenu.appendSeparator(); - var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds; - var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall')); - timelineSubMenu.appendCheckboxItem( - WebInspector.UIString('Start Time'), setTimelineMode.bind(this, timelineSortIds.StartTime), - this._activeTimelineSortId === timelineSortIds.StartTime); - timelineSubMenu.appendCheckboxItem( - WebInspector.UIString('Response Time'), setTimelineMode.bind(this, timelineSortIds.ResponseTime), - this._activeTimelineSortId === timelineSortIds.ResponseTime); - timelineSubMenu.appendCheckboxItem( - WebInspector.UIString('End Time'), setTimelineMode.bind(this, timelineSortIds.EndTime), - this._activeTimelineSortId === timelineSortIds.EndTime); - timelineSubMenu.appendCheckboxItem( - WebInspector.UIString('Total Duration'), setTimelineMode.bind(this, timelineSortIds.Duration), - this._activeTimelineSortId === timelineSortIds.Duration); - timelineSubMenu.appendCheckboxItem( - WebInspector.UIString('Latency'), setTimelineMode.bind(this, timelineSortIds.Latency), - this._activeTimelineSortId === timelineSortIds.Latency); - } + contextMenu.appendSeparator(); + + var timelineSortIds = WebInspector.NetworkLogViewColumns.TimelineSortIds; + var timelineSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString('Waterfall')); + timelineSubMenu.appendCheckboxItem( + WebInspector.UIString('Start Time'), setTimelineMode.bind(this, timelineSortIds.StartTime), + this._activeTimelineSortId === timelineSortIds.StartTime); + timelineSubMenu.appendCheckboxItem( + WebInspector.UIString('Response Time'), setTimelineMode.bind(this, timelineSortIds.ResponseTime), + this._activeTimelineSortId === timelineSortIds.ResponseTime); + timelineSubMenu.appendCheckboxItem( + WebInspector.UIString('End Time'), setTimelineMode.bind(this, timelineSortIds.EndTime), + this._activeTimelineSortId === timelineSortIds.EndTime); + timelineSubMenu.appendCheckboxItem( + WebInspector.UIString('Total Duration'), setTimelineMode.bind(this, timelineSortIds.Duration), + this._activeTimelineSortId === timelineSortIds.Duration); + timelineSubMenu.appendCheckboxItem( + WebInspector.UIString('Latency'), setTimelineMode.bind(this, timelineSortIds.Latency), + this._activeTimelineSortId === timelineSortIds.Latency); contextMenu.show(); @@ -608,9 +510,7 @@ WebInspector.NetworkLogViewColumns = class { isResponseHeader: true, isCustomHeader: true, visible: true, - sortConfig: { - sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, headerId) - } + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, headerId) })); this._columns.splice(index, 0, columnConfig); if (this._dataGrid) @@ -642,34 +542,6 @@ WebInspector.NetworkLogViewColumns = class { return true; } - updateDividersIfNeeded() { - // TODO(allada) Remove this code out when timeline canvas experiment is over. - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - return; - if (!this._networkLogView.isShowing()) { - this._networkLogView.scheduleRefresh(); - return; - } - - var timelineOffset = this._dataGrid.columnOffset('timeline'); - // Position timline grid location. - if (timelineOffset) - this._timelineGrid.element.style.left = timelineOffset + 'px'; - - var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time); - calculator.setDisplayWindow(this._timelineGrid.dividersElement.clientWidth); - this._timelineGrid.updateDividers(calculator, 75); - - if (calculator.startAtZero) { - // If our current sorting method starts at zero, that means it shows all - // requests starting at the same point, and so onLoad event and DOMContent - // event lines really wouldn't make much sense here, so don't render them. - return; - } - - this._updateEventDividers(); - } - /** * @param {!Element} element * @param {!Event} event @@ -678,11 +550,7 @@ WebInspector.NetworkLogViewColumns = class { _getPopoverAnchor(element, event) { if (!this._gridMode) return; - var anchor = element.enclosingNodeOrSelfWithClass('network-graph-bar') || - element.enclosingNodeOrSelfWithClass('network-graph-label'); - if (anchor && anchor.parentElement.request && anchor.parentElement.request.timing) - return anchor; - anchor = element.enclosingNodeOrSelfWithClass('network-script-initiated'); + var anchor = element.enclosingNodeOrSelfWithClass('network-script-initiated'); if (anchor && anchor.request) { var initiator = /** @type {!WebInspector.NetworkRequest} */ (anchor.request).initiator(); if (initiator && initiator.stack) @@ -695,18 +563,11 @@ WebInspector.NetworkLogViewColumns = class { * @param {!WebInspector.Popover} popover */ _showPopover(anchor, popover) { - var content; - if (anchor.classList.contains('network-script-initiated')) { - var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request); - var initiator = /** @type {!Protocol.Network.Initiator} */ (request.initiator()); - content = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents( - request.target(), this._popupLinkifier, initiator.stack); - popover.setCanShrink(true); - } else { - content = WebInspector.RequestTimingView.createTimingTable( - anchor.parentElement.request, this._networkLogView.timeCalculator().minimumBoundary()); - popover.setCanShrink(false); - } + var request = /** @type {!WebInspector.NetworkRequest} */ (anchor.request); + var initiator = /** @type {!Protocol.Network.Initiator} */ (request.initiator()); + var content = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents( + request.target(), this._popupLinkifier, initiator.stack); + popover.setCanShrink(true); popover.showForAnchor(content, anchor); } @@ -719,87 +580,44 @@ WebInspector.NetworkLogViewColumns = class { * @param {string} className */ addEventDividers(times, className) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - // TODO(allada) When we remove old timeline remove this and pass in the color. - var color = 'transparent'; - switch (className) { - case 'network-blue-divider': - color = 'hsla(240, 100%, 80%, 0.7)'; - break; - case 'network-red-divider': - color = 'rgba(255, 0, 0, 0.5)'; - break; - default: - return; - } - var currentTimes = this._shownEventDividers.get(color) || []; - this._shownEventDividers.set(color, currentTimes.concat(times)); - - this._networkLogView.scheduleRefresh(); - return; - } - - for (var i = 0; i < times.length; ++i) { - var element = createElementWithClass('div', 'network-event-divider ' + className); - this._timelineGrid.addEventDivider(element); - this._eventDividers.push({time: times[i], element: element}); + // TODO(allada) Remove this and pass in the color. + var color = 'transparent'; + switch (className) { + case 'network-blue-divider': + color = 'hsla(240, 100%, 80%, 0.7)'; + break; + case 'network-red-divider': + color = 'rgba(255, 0, 0, 0.5)'; + break; + default: + return; } - // Update event dividers immediately - this._updateEventDividers(); - // Schedule refresh in case dividers change the calculator span. + var currentTimes = this._eventDividers.get(color) || []; + this._eventDividers.set(color, currentTimes.concat(times)); this._networkLogView.scheduleRefresh(); } - _updateEventDividers() { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) - return; - var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewColumns._calculatorTypes.Time); - for (var divider of this._eventDividers) { - var timePercent = calculator.computePercentageFromEventTime(divider.time); - divider.element.classList.toggle('invisible', timePercent < 0); - divider.element.style.left = timePercent + '%'; - } - } - hideEventDividers() { this._eventDividersShown = true; - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - this._redrawTimelineColumn(); - return; - } - this._timelineGrid.hideEventDividers(); + this._redrawTimelineColumn(); } showEventDividers() { this._eventDividersShown = false; - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - this._redrawTimelineColumn(); - return; - } - this._timelineGrid.showEventDividers(); + this._redrawTimelineColumn(); } /** * @param {number} time */ selectFilmStripFrame(time) { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - this._shownEventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]); - this._redrawTimelineColumn(); - return; - } - for (var divider of this._eventDividers) - divider.element.classList.toggle('network-frame-divider-selected', divider.time === time); + this._eventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]); + this._redrawTimelineColumn(); } clearFilmStripFrame() { - if (Runtime.experiments.isEnabled('canvasNetworkTimeline')) { - this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor); - this._redrawTimelineColumn(); - return; - } - for (var divider of this._eventDividers) - divider.element.classList.toggle('network-frame-divider-selected', false); + this._eventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor); + this._redrawTimelineColumn(); } }; @@ -818,20 +636,12 @@ WebInspector.NetworkLogViewColumns._initialSortColumn = 'timeline'; * sortable: boolean, * align: (?WebInspector.DataGrid.Align|undefined), * isResponseHeader: boolean, - * sortConfig: !WebInspector.NetworkLogViewColumns.SortConfig, + * sortingFunction: (!function(!WebInspector.NetworkDataGridNode, !WebInspector.NetworkDataGridNode):number|undefined), * isCustomHeader: boolean * }} */ WebInspector.NetworkLogViewColumns.Descriptor; -/** - * @typedef {{ - * sortingFunction: (!function(!WebInspector.NetworkDataGridNode, !WebInspector.NetworkDataGridNode):number|undefined), - * entries: (!Array.|undefined) - * }} - */ -WebInspector.NetworkLogViewColumns.SortConfig; - /** @enum {string} */ WebInspector.NetworkLogViewColumns._calculatorTypes = { Duration: 'Duration', @@ -866,67 +676,66 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [ hideable: false, nonSelectable: false, alwaysVisible: true, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.NameComparator} + sortingFunction: WebInspector.NetworkDataGridNode.NameComparator }, { id: 'method', title: WebInspector.UIString('Method'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'requestMethod')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'requestMethod') }, { id: 'status', title: WebInspector.UIString('Status'), visible: true, subtitle: WebInspector.UIString('Text'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'statusCode')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'statusCode') }, { id: 'protocol', title: WebInspector.UIString('Protocol'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'protocol')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'protocol') }, { id: 'scheme', title: WebInspector.UIString('Scheme'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'scheme')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'scheme') }, { id: 'domain', title: WebInspector.UIString('Domain'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'domain')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'domain') }, { id: 'remoteaddress', title: WebInspector.UIString('Remote Address'), weight: 10, align: WebInspector.DataGrid.Align.Right, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RemoteAddressComparator} + sortingFunction: WebInspector.NetworkDataGridNode.RemoteAddressComparator }, { id: 'type', title: WebInspector.UIString('Type'), visible: true, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.TypeComparator} + sortingFunction: WebInspector.NetworkDataGridNode.TypeComparator }, { id: 'initiator', title: WebInspector.UIString('Initiator'), visible: true, weight: 10, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.InitiatorComparator} + sortingFunction: WebInspector.NetworkDataGridNode.InitiatorComparator }, { id: 'cookies', title: WebInspector.UIString('Cookies'), align: WebInspector.DataGrid.Align.Right, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestCookiesCountComparator} + sortingFunction: WebInspector.NetworkDataGridNode.RequestCookiesCountComparator }, { id: 'setcookies', title: WebInspector.UIString('Set Cookies'), align: WebInspector.DataGrid.Align.Right, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseCookiesCountComparator }, { id: 'size', @@ -934,7 +743,7 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [ visible: true, subtitle: WebInspector.UIString('Content'), align: WebInspector.DataGrid.Align.Right, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator} + sortingFunction: WebInspector.NetworkDataGridNode.SizeComparator }, { id: 'time', @@ -942,131 +751,75 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [ visible: true, subtitle: WebInspector.UIString('Latency'), align: WebInspector.DataGrid.Align.Right, - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration') }, { id: 'priority', title: WebInspector.UIString('Priority'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.InitialPriorityComparator} + sortingFunction: WebInspector.NetworkDataGridNode.InitialPriorityComparator }, { id: 'connectionid', title: WebInspector.UIString('Connection ID'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'connectionId')} + sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'connectionId') }, { id: 'cache-control', isResponseHeader: true, title: WebInspector.UIString('Cache-Control'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'cache-control')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'cache-control') }, { id: 'connection', isResponseHeader: true, title: WebInspector.UIString('Connection'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'connection')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'connection') }, { id: 'content-encoding', isResponseHeader: true, title: WebInspector.UIString('Content-Encoding'), - sortConfig: { - sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'content-encoding') - } + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'content-encoding') }, { id: 'content-length', isResponseHeader: true, title: WebInspector.UIString('Content-Length'), align: WebInspector.DataGrid.Align.Right, - sortConfig: { - sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderNumberComparator.bind(null, 'content-length') - } + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderNumberComparator.bind(null, 'content-length') }, { id: 'etag', isResponseHeader: true, title: WebInspector.UIString('ETag'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'etag')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'etag') }, { id: 'keep-alive', isResponseHeader: true, title: WebInspector.UIString('Keep-Alive'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'keep-alive')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'keep-alive') }, { id: 'last-modified', isResponseHeader: true, title: WebInspector.UIString('Last-Modified'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderDateComparator.bind(null, 'last-modified')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderDateComparator.bind(null, 'last-modified') }, { id: 'server', isResponseHeader: true, title: WebInspector.UIString('Server'), - sortConfig: - {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'server')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'server') }, { id: 'vary', isResponseHeader: true, title: WebInspector.UIString('Vary'), - sortConfig: {sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary')} + sortingFunction: WebInspector.NetworkDataGridNode.ResponseHeaderStringComparator.bind(null, 'vary') }, - { - id: 'timeline', - title: WebInspector.UIString('Waterfall'), - visible: true, - weight: 40, - sortable: false, - hideable: false, - sortConfig: { - entries: [ - { - id: 'starttime', - title: WebInspector.UIString('Waterfall \u2013 Start Time'), - sort: WebInspector.DataGrid.Order.Ascending, - sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'startTime'), - calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time - }, - { - id: 'responsetime', - title: WebInspector.UIString('Waterfall \u2013 Response Time'), - sort: WebInspector.DataGrid.Order.Ascending, - sortingFunction: - WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'responseReceivedTime'), - calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time - }, - { - id: 'endtime', - title: WebInspector.UIString('Waterfall \u2013 End Time'), - sort: WebInspector.DataGrid.Order.Ascending, - sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'endTime'), - calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Time - }, - { - id: 'duration', - title: WebInspector.UIString('Waterfall \u2013 Total Duration'), - sort: WebInspector.DataGrid.Order.Descending, - sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'duration'), - calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration - }, - { - id: 'latency', - title: WebInspector.UIString('Waterfall \u2013 Latency'), - sort: WebInspector.DataGrid.Order.Descending, - sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, 'latency'), - calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration - } - ] - } - } + // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown. + {id: 'timeline', title: '', visible: false, hideable: false} ]; WebInspector.NetworkLogViewColumns._filmStripDividerColor = '#fccc49'; diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css index a580dbb986..678eb7f3b5 100644 --- a/front_end/network/networkLogView.css +++ b/front_end/network/networkLogView.css @@ -123,10 +123,6 @@ text-decoration: underline; } -.network-log-grid.data-grid.small .network-graph-side { - height: 19px; -} - .network-log-grid.data-grid th.sortable:active { background-image: none !important; } @@ -271,295 +267,14 @@ max-height: 11px; } -/* Graph styles */ - -.network-graph-side { - position: relative; - height: 39px; - padding: 0; - white-space: nowrap; - overflow: hidden; -} - -.network-graph-bar-area { - position: absolute; - top: 0; - bottom: 0; -} - -.network-graph-bar-area, -.network-timeline-grid .resources-dividers, -.network-timeline-grid .resources-event-dividers, -.network-timeline-grid .resources-dividers-label-bar { - right: 12px; - left: 12px; -} - -.network-timeline-grid .resources-event-dividers { - margin-left: 1px; -} - -.network-graph-label { - position: absolute; - top: 0; - bottom: 0; - height: 13px; - line-height: 13px; - margin: auto; - font-size: 90%; - color: rgba(0, 0, 0, 0.75); - text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0; - z-index: 150; - overflow: hidden; - text-align: center; - visibility: hidden; -} - -.network-graph-side:hover .network-graph-label { - visibility: visible; -} - -.network-graph-label:empty { - display: none; -} - -.network-graph-label.waiting { - margin-right: 5px; -} - -.network-graph-label.before { - color: rgba(0, 0, 0, 0.7); - text-shadow: none; - text-align: right; - margin-right: -1px; -} - -.network-graph-label.before::after { - padding-left: 2px; - height: 6px; - content: url(Images/graphLabelCalloutLeft.png); -} - -.network-graph-label.after { - color: rgba(0, 0, 0, 0.7); - text-shadow: none; - text-align: left; - margin-left: -1px; -} - -.network-graph-label.after::before { - padding-right: 2px; - height: 6px; - content: url(Images/graphLabelCalloutRight.png); -} - -.small .network-graph-bar { - top: 3px; - bottom: 3px; -} - -.network-graph-bar { - position: absolute; - top: 13px; - bottom: 13px; - min-width: 3px; -} - -.network-graph-bar:not(.request-timing) { - border-width: 1px; - border-style: solid; - border-color: hsl(0, 0%, 75%); - background: linear-gradient(0deg, hsl(0, 0%, 85%), hsl(0, 0%, 95%)); -} - -.network-graph-bar.waiting:not(.request-timing) { - opacity: 0.5; -} - -/* Resource categories */ -/* TODO(allada) Remove these when we remove canvas timeline experiment */ -.network-graph-bar.request-timing.queueing, -.network-graph-bar.request-timing.total, -.network-graph-bar.request-timing.proxy, -.network-graph-bar.request-timing.dns, -.network-graph-bar.request-timing.ssl, -.network-graph-bar.request-timing.connecting, -.network-graph-bar.request-timing.blocking, -.network-graph-bar.request-timing.push { - margin: 3px 0; -} - -.network-graph-bar.request-timing.queueing, -.network-graph-bar.request-timing.total, -theme-preserve { - border: solid 1px #AAAAAA; -} - -.network-graph-bar.request-timing.receiving, -theme-preserve, -.network-graph-bar.request-timing.receiving-push, -theme-preserve { - background-color: #03A9F4; -} - -.network-graph-bar.request-timing.waiting, -theme-preserve { - background-color: #00C853; -} - -.network-graph-bar.request-timing.connecting, -theme-preserve { - background-color: #FF9800; -} - -.network-graph-bar.request-timing.ssl, -theme-preserve { - background-color: #9C27B0; -} - -.network-graph-bar.request-timing.dns, -theme-preserve { - background-color: #009688; -} - -.network-graph-bar.request-timing.proxy, -theme-preserve { - background-color: #A1887F; -} - -.network-graph-bar.request-timing.blocking, -theme-preserve { - background-color: #AAAAAA; -} - -.network-graph-bar.request-timing.push, -theme-preserve { - background-color: #8CDBff; -} - -.network-graph-bar.cached { - background: hsl(0, 0%, 90%); -} - -.network-graph-bar.document { - border-color: hsl(215, 49%, 60%); - background: linear-gradient(0deg, hsl(215, 72%, 65%), hsl(215, 100%, 80%)); -} - -.network-graph-bar.cached.document { - background: hsl(215, 99%, 80%); -} - -.network-graph-bar.stylesheet { - border-color: hsl(99, 34%, 60%); - background: linear-gradient(0deg, hsl(100, 50%, 65%), hsl(90, 50%, 80%)); -} - -.network-graph-bar.cached.stylesheet { - background: hsl(99, 100%, 80%); -} - -.network-graph-bar.image { - border-color: hsl(272, 31%, 60%); - background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%)); -} - -.network-graph-bar.cached.image { - background: hsl(272, 65%, 80%); -} - -.network-graph-bar.media { - border-color: hsl(272, 31%, 60%); - background: linear-gradient(0deg, hsl(272, 46%, 65%), hsl(272, 64%, 80%)); -} - -.network-graph-bar.cached.media { - background: hsl(272, 65%, 80%); -} - -.network-graph-bar.font { - border-color: hsl(8, 49%, 60%); - background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%)); -} - -.network-graph-bar.cached.font { - background: hsl(8, 100%, 80%); -} - -.network-graph-bar.texttrack { - border-color: hsl(8, 49%, 60%); - background: linear-gradient(0deg, hsl(8, 72%, 65%), hsl(8, 100%, 80%)); -} - -.network-graph-bar.cached.texttrack { - background: hsl(8, 100%, 80%); -} - -.network-graph-bar.script { - border-color: hsl(31, 49%, 60%); - background: linear-gradient(0deg, hsl(31, 72%, 65%), hsl(31, 100%, 80%)); -} - -.network-graph-bar.cached.script { - background: hsl(31, 100%, 80%); -} - -.network-graph-bar.xhr { - border-color: hsl(53, 49%, 60%); - background: linear-gradient(0deg, hsl(53, 72%, 65%), hsl(53, 100%, 80%)); -} - -.network-graph-bar.cached.xhr { - background: hsl(53, 100%, 80%); -} - -.network-graph-bar.websocket { - border-color: hsl(0, 0%, 60%); - background: linear-gradient(0deg, hsl(0, 0%, 65%), hsl(0, 0%, 80%)); -} - -.network-graph-bar.cached.websocket { - background: hsl(0, 0%, 80%); -} - .network-dim-cell { color: grey; } -/* Dividers */ - -.network-timeline-grid { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 14px; /* Keep in sync with td.corner width */ - pointer-events: none; -} - -.network-event-divider { - position: absolute; - width: 1px; - margin-left: -1px; - top: 31px; - bottom: 0; - z-index: 300; -} - -.network-event-divider.invisible { - visibility: hidden; -} - -.network-timeline-grid.small .network-event-divider { - top: 23px; -} - -.network-red-divider { - background-color: rgba(255, 0, 0, 0.5); -} - -.-theme-with-dark-background .network-red-divider { - background-color: hsla(0, 100%, 80%, 0.7); -} - .network-summary-bar .summary-red { color: red; } -.-theme-with-dark-background .network-blue-divider { - background-color: hsla(240, 100%, 80%, 0.7); -} - .network-frame-divider { width: 2px; background-color: #FCCC49; @@ -567,8 +282,8 @@ visibility: hidden; } -.network-frame-divider-selected { - visibility: visible; +#network-container:not(.brief-mode) .data-container { + overflow: hidden; } .network-summary-bar .summary-blue { @@ -590,40 +305,10 @@ pointer-events: none; } -.network-timeline-grid.small .resources-dividers-label-bar { - height: 23px; -} - -.network-timeline-grid .resources-divider-label { - top: 0; - margin-top: -5px; -} - -.network-timeline-grid .resources-dividers-label-bar .resources-divider { - top: 23px; -} - -.network-timeline-grid.small .resources-dividers-label-bar .resources-divider { - top: 15px; -} - -.network-timeline-grid .resources-divider:first-child .resources-divider-label { - display: none; -} - -.network-timeline-grid .resources-dividers-label-bar .resources-divider:first-child { - background-color: transparent; -} - #network-container { overflow: hidden; } -/* Brief mode peculiarities. */ -#network-container.brief-mode .network-timeline-grid { - display: none; -} - .network-log-grid.data-grid .data-container tr:not(.data-grid-filler-row):not(.selected).hover { background-color: #ebf2fc; } diff --git a/front_end/sdk/ConsoleModel.js b/front_end/sdk/ConsoleModel.js index 8feb866219..e7906e551f 100644 --- a/front_end/sdk/ConsoleModel.js +++ b/front_end/sdk/ConsoleModel.js @@ -50,6 +50,8 @@ WebInspector.ConsoleModel = class extends WebInspector.SDKModel { if (this._logAgent) { target.registerLogDispatcher(new WebInspector.LogDispatcher(this)); this._logAgent.enable(); + if (!InspectorFrontendHost.isUnderTest()) + this._logAgent.setReportViolationsEnabled(true); } } @@ -494,6 +496,7 @@ WebInspector.ConsoleMessage.MessageSource = { Rendering: 'rendering', CSS: 'css', Security: 'security', + Violation: 'violation', Other: 'other', Deprecation: 'deprecation', Worker: 'worker' diff --git a/front_end/source_frame/SourcesTextEditor.js b/front_end/source_frame/SourcesTextEditor.js index 3990481167..e31bfab713 100644 --- a/front_end/source_frame/SourcesTextEditor.js +++ b/front_end/source_frame/SourcesTextEditor.js @@ -220,6 +220,7 @@ WebInspector.SourcesTextEditor = class extends WebInspector.CodeMirrorTextEditor var index = this._gutters.indexOf(type); if (index === -1) return; + this.codeMirror().clearGutter(type); this._gutters.splice(index, 1); this.codeMirror().setOption('gutters', this._gutters.slice()); this.refresh(); diff --git a/front_end/sources/DebuggerPausedMessage.js b/front_end/sources/DebuggerPausedMessage.js index df121fd3c8..5e25e7a093 100644 --- a/front_end/sources/DebuggerPausedMessage.js +++ b/front_end/sources/DebuggerPausedMessage.js @@ -55,7 +55,8 @@ WebInspector.DebuggerPausedMessage = class { } else if (details.callFrames.length) { var uiLocation = debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()); var breakpoint = - uiLocation ? breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : null; + uiLocation ? breakpointManager.findBreakpoint( + uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber) : null; var defaultText = breakpoint ? WebInspector.UIString('Paused on breakpoint') : WebInspector.UIString('Debugger paused'); messageWrapper = buildWrapper(defaultText); diff --git a/front_end/sources/JavaScriptBreakpointsSidebarPane.js b/front_end/sources/JavaScriptBreakpointsSidebarPane.js index 04f1630241..51d5121b2b 100644 --- a/front_end/sources/JavaScriptBreakpointsSidebarPane.js +++ b/front_end/sources/JavaScriptBreakpointsSidebarPane.js @@ -145,7 +145,8 @@ WebInspector.JavaScriptBreakpointsSidebarPane = class extends WebInspector.VBox WebInspector.debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location()) : null; var breakpoint = uiLocation ? - this._breakpointManager.findBreakpointOnLine(uiLocation.uiSourceCode, uiLocation.lineNumber) : + this._breakpointManager.findBreakpoint( + uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber) : null; var breakpointItem = this._items.get(breakpoint); if (!breakpointItem) { diff --git a/front_end/sources/JavaScriptSourceFrame.js b/front_end/sources/JavaScriptSourceFrame.js index 1e67900de8..d5ebf0d801 100644 --- a/front_end/sources/JavaScriptSourceFrame.js +++ b/front_end/sources/JavaScriptSourceFrame.js @@ -245,8 +245,8 @@ WebInspector.JavaScriptSourceFrame = class extends WebInspector.UISourceCodeFram function populate(resolve, reject) { var uiLocation = new WebInspector.UILocation(this.uiSourceCode(), lineNumber, 0); this._scriptsPanel.appendUILocationItems(contextMenu, uiLocation); - var breakpoint = this._breakpointManager.findBreakpointOnLine(this.uiSourceCode(), lineNumber); - if (!breakpoint) { + var breakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), lineNumber); + if (!breakpoints.length) { // This row doesn't have a breakpoint: We want to show Add Breakpoint and Add and Edit Breakpoint. contextMenu.appendItem( WebInspector.UIString('Add breakpoint'), this._createNewBreakpoint.bind(this, lineNumber, 0, '', true)); @@ -256,6 +256,8 @@ WebInspector.JavaScriptSourceFrame = class extends WebInspector.UISourceCodeFram WebInspector.UIString('Never pause here'), this._createNewBreakpoint.bind(this, lineNumber, 0, 'false', true)); } else { + var breakpoint = breakpoints[0]; + // This row has a breakpoint, we want to show edit and remove breakpoint, and either disable or enable. contextMenu.appendItem(WebInspector.UIString('Remove breakpoint'), breakpoint.remove.bind(breakpoint)); contextMenu.appendItem( @@ -856,8 +858,8 @@ WebInspector.JavaScriptSourceFrame = class extends WebInspector.UISourceCodeFram if (this._shouldIgnoreExternalBreakpointEvents()) return; - var remainingBreakpoint = this._breakpointManager.findBreakpointOnLine(this.uiSourceCode(), uiLocation.lineNumber); - if (!remainingBreakpoint && this.loaded) + var remainingBreakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), uiLocation.lineNumber); + if (!remainingBreakpoints.length && this.loaded) this._removeBreakpointDecoration(uiLocation.lineNumber); } @@ -1003,12 +1005,12 @@ WebInspector.JavaScriptSourceFrame = class extends WebInspector.UISourceCodeFram * @param {boolean} onlyDisable */ _toggleBreakpoint(lineNumber, onlyDisable) { - var breakpoint = this._breakpointManager.findBreakpointOnLine(this.uiSourceCode(), lineNumber); - if (breakpoint) { + var breakpoints = this._breakpointManager.findBreakpoints(this.uiSourceCode(), lineNumber); + if (breakpoints.length) { if (onlyDisable) - breakpoint.setEnabled(!breakpoint.enabled()); + breakpoints[0].setEnabled(!breakpoints[0].enabled()); else - breakpoint.remove(); + breakpoints[0].remove(); } else this._createNewBreakpoint(lineNumber, 0, '', true); } diff --git a/front_end/ui_lazy/DataGrid.js b/front_end/ui_lazy/DataGrid.js index 1be8eef424..ff6c79e2e3 100644 --- a/front_end/ui_lazy/DataGrid.js +++ b/front_end/ui_lazy/DataGrid.js @@ -693,7 +693,6 @@ WebInspector.DataGrid = class extends WebInspector.Object { } this._positionResizers(); - this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); } /** @@ -1045,7 +1044,6 @@ WebInspector.DataGrid = class extends WebInspector.Object { _endResizerDragging() { this._currentResizer = null; this._saveColumnWeights(); - this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); } /** @@ -1105,7 +1103,6 @@ WebInspector.DataGrid = class extends WebInspector.Object { this._positionResizers(); event.preventDefault(); - this.dispatchEventToListeners(WebInspector.DataGrid.Events.ColumnsResized); } /** @@ -1171,7 +1168,6 @@ WebInspector.DataGrid.Events = { SelectedNode: Symbol('SelectedNode'), DeselectedNode: Symbol('DeselectedNode'), SortingChanged: Symbol('SortingChanged'), - ColumnsResized: Symbol('ColumnsResized'), PaddingChanged: Symbol('PaddingChanged') };