Skip to content

GitLab

T
tangled
Commit ce369229 authored by allada's avatar allada Committed by Commit bot
Browse files
Options

[Devtools] Move canvas timeline out of experiments 

This patch moves the new canvas timeline out of experiments
and removes the old timeline canvas code.

R=dgozman,pfeldman
BUG=653738

Review-Url: https://codereview.chromium.org/2460073002
Cr-Commit-Position: refs/heads/master@{#430358}
parent 78bd9c63
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 878 deletions
third_party/WebKit/Source/devtools/BUILD.gn
View file @ ce369229
......@@ -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",
......
third_party/WebKit/Source/devtools/front_end/main/Main.js
View file @ ce369229
......@@ -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');
......
third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
View file @ ce369229
......@@ -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');
third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
View file @ ce369229
......@@ -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();
......
third_party/WebKit/Source/devtools/front_end/network/networkLogView.css
View file @ ce369229
......@@ -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;
}
......
third_party/WebKit/Source/devtools/front_end/ui_lazy/DataGrid.js
View file @ ce369229
......@@ -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')
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment