Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js (192615 => 192616)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js 2015-11-19 06:30:38 UTC (rev 192615)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js 2015-11-19 08:05:01 UTC (rev 192616)
@@ -61,17 +61,16 @@
}
}
- updateLayout()
+ // Protected
+
+ layout()
{
- super.updateLayout();
+ let secondsPerPixel = this.timelineOverview.secondsPerPixel;
+ let recordBarIndex = 0;
- var secondsPerPixel = this.timelineOverview.secondsPerPixel;
-
- var recordBarIndex = 0;
-
function createBar(rowElement, rowRecordBars, records, renderMode)
{
- var timelineRecordBar = rowRecordBars[recordBarIndex];
+ let timelineRecordBar = rowRecordBars[recordBarIndex];
if (!timelineRecordBar)
timelineRecordBar = rowRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
else {
@@ -84,9 +83,9 @@
++recordBarIndex;
}
- for (var rowRecords of this._timelineRecordGridRows) {
- var rowElement = rowRecords.__element;
- var rowRecordBars = rowRecords.__recordBars;
+ for (let rowRecords of this._timelineRecordGridRows) {
+ let rowElement = rowRecords.__element;
+ let rowRecordBars = rowRecords.__recordBars;
recordBarIndex = 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (192615 => 192616)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-11-19 06:30:38 UTC (rev 192615)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-11-19 08:05:01 UTC (rev 192616)
@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.TimelineOverview = class TimelineOverview extends WebInspector.Object
+WebInspector.TimelineOverview = class TimelineOverview extends WebInspector.View
{
constructor(identifier, timelineRecording, minimumDurationPerPixel, maximumDurationPerPixel, defaultSettingsValues)
{
@@ -37,16 +37,15 @@
this._recording.addEventListener(WebInspector.TimelineRecording.Event.MarkerAdded, this._markerAdded, this);
this._recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
- this._element = document.createElement("div");
- this._element.classList.add("timeline-overview", identifier);
- this._element.addEventListener("wheel", this._handleWheelEvent.bind(this));
- this._element.addEventListener("gesturestart", this._handleGestureStart.bind(this));
- this._element.addEventListener("gesturechange", this._handleGestureChange.bind(this));
- this._element.addEventListener("gestureend", this._handleGestureEnd.bind(this));
+ this.element.classList.add("timeline-overview", identifier);
+ this.element.addEventListener("wheel", this._handleWheelEvent.bind(this));
+ this.element.addEventListener("gesturestart", this._handleGestureStart.bind(this));
+ this.element.addEventListener("gesturechange", this._handleGestureChange.bind(this));
+ this.element.addEventListener("gestureend", this._handleGestureEnd.bind(this));
this._graphsContainerElement = document.createElement("div");
this._graphsContainerElement.classList.add("graphs-container");
- this._element.appendChild(this._graphsContainerElement);
+ this.element.appendChild(this._graphsContainerElement);
this._timelineOverviewGraphsMap = new Map;
@@ -56,7 +55,7 @@
this._timelineRuler.element.addEventListener("mousedown", this._timelineRulerMouseDown.bind(this));
this._timelineRuler.element.addEventListener("click", this._timelineRulerMouseClicked.bind(this));
this._timelineRuler.addEventListener(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
- this._element.appendChild(this._timelineRuler.element);
+ this.addSubview(this._timelineRuler);
this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
this._timelineRuler.addMarker(this._currentTimeMarker);
@@ -64,7 +63,7 @@
this._scrollContainerElement = document.createElement("div");
this._scrollContainerElement.classList.add("scroll-container");
this._scrollContainerElement.addEventListener("scroll", this._handleScrollEvent.bind(this));
- this._element.appendChild(this._scrollContainerElement);
+ this.element.appendChild(this._scrollContainerElement);
this._scrollWidthSizer = document.createElement("div");
this._scrollWidthSizer.classList.add("scroll-width-sizer");
@@ -100,11 +99,6 @@
// Public
- get element()
- {
- return this._element;
- }
-
get startTime()
{
return this._startTime;
@@ -117,7 +111,7 @@
this._startTime = x || 0;
- this._needsLayout();
+ this.needsLayout();
}
get currentTime()
@@ -133,7 +127,7 @@
this._currentTime = x || 0;
this._revealCurrentTime = true;
- this._needsLayout();
+ this.needsLayout();
}
get secondsPerPixel()
@@ -157,7 +151,7 @@
this._durationPerPixel = x;
this._durationPerPixelSetting.value = x;
- this._needsLayout();
+ this.needsLayout();
}
get pixelAlignDuration()
@@ -188,7 +182,7 @@
this._endTime = x || 0;
- this._needsLayout();
+ this.needsLayout();
}
get scrollStartTime()
@@ -203,7 +197,7 @@
this._scrollStartTime = x || 0;
- this._needsLayout();
+ this.needsLayout();
}
get visibleDuration()
@@ -311,16 +305,37 @@
this.updateLayout();
}
- updateLayout()
+ updateLayoutIfNeeded()
{
- if (this._scheduledLayoutUpdateIdentifier) {
- cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- this._scheduledLayoutUpdateIdentifier = undefined;
+ if (this.layoutPending) {
+ super.updateLayoutIfNeeded();
+ return;
}
+ this._timelineRuler.updateLayoutIfNeeded();
+
+ for (let timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
+ timelineOverviewGraph.updateLayoutIfNeeded();
+ }
+
+ // Protected
+
+ get timelineRuler()
+ {
+ return this._timelineRuler;
+ }
+
+ canShowTimeline(timeline)
+ {
+ // Implemented by subclasses.
+ console.error("Needs to be implemented by a subclass.");
+ }
+
+ layout()
+ {
// Calculate the required width based on the duration and seconds per pixel.
- var duration = this._endTime - this._startTime;
- var newWidth = Math.ceil(duration / this._durationPerPixel);
+ let duration = this._endTime - this._startTime;
+ let newWidth = Math.ceil(duration / this._durationPerPixel);
// Update all relevant elements to the new required width.
this._updateElementWidth(this._scrollWidthSizer, newWidth);
@@ -335,7 +350,7 @@
const visibleDuration = this.visibleDuration;
// Clamp the scroll start time to match what the scroll bar would allow.
- var scrollStartTime = Math.min(this._scrollStartTime, this._endTime - visibleDuration);
+ let scrollStartTime = Math.min(this._scrollStartTime, this._endTime - visibleDuration);
scrollStartTime = Math.max(this._startTime, scrollStartTime);
this._timelineRuler.zeroTime = this._startTime;
@@ -347,9 +362,7 @@
this._scrollContainerElement.scrollLeft = Math.ceil((scrollStartTime - this._startTime) / this._durationPerPixel);
}
- this._timelineRuler.updateLayout();
-
- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values()) {
+ for (let timelineOverviewGraph of this._timelineOverviewGraphsMap.values()) {
timelineOverviewGraph.zeroTime = this._startTime;
timelineOverviewGraph.startTime = scrollStartTime;
timelineOverviewGraph.currentTime = this._currentTime;
@@ -358,32 +371,6 @@
}
}
- updateLayoutIfNeeded()
- {
- if (this._scheduledLayoutUpdateIdentifier) {
- this.updateLayout();
- return;
- }
-
- this._timelineRuler.updateLayoutIfNeeded();
-
- for (var timelineOverviewGraph of this._timelineOverviewGraphsMap.values())
- timelineOverviewGraph.updateLayoutIfNeeded();
- }
-
- // Protected
-
- get timelineRuler()
- {
- return this._timelineRuler;
- }
-
- canShowTimeline(timeline)
- {
- // Implemented by subclasses.
- console.error("Needs to be implemented by a subclass.");
- }
-
// Private
_updateElementWidth(element, newWidth)
@@ -436,7 +423,7 @@
// cases of inadvertent zooming for slightly diagonal scrolls.
if (Math.abs(event.deltaX) >= Math.abs(event.deltaY) * 0.5) {
// Clone the event to dispatch it on the scroll container. Mark it as cloned so we don't get into a loop.
- var newWheelEvent = new event.constructor(event.type, event);
+ let newWheelEvent = new event.constructor(event.type, event);
newWheelEvent.__cloned = true;
this._scrollContainerElement.dispatchEvent(newWheelEvent);
@@ -444,16 +431,16 @@
}
// Remember the mouse position in time.
- var mouseOffset = event.pageX - this._element.totalOffsetLeft;
- var mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
- var deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
- var delta = event.deltaY * (this._durationPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
+ let mouseOffset = event.pageX - this.element.totalOffsetLeft;
+ let mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
+ let deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
+ let delta = event.deltaY * (this._durationPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
// Reset accumulated wheel delta when direction changes.
if (this._pixelAlignDuration && (delta < 0 && this._mouseWheelDelta >= 0 || delta >= 0 && this._mouseWheelDelta < 0))
this._mouseWheelDelta = 0;
- var previousDurationPerPixel = this._durationPerPixel;
+ let previousDurationPerPixel = this._durationPerPixel;
this._mouseWheelDelta += delta;
this.secondsPerPixel += this._mouseWheelDelta;
@@ -476,7 +463,7 @@
return;
}
- let mouseOffset = event.pageX - this._element.totalOffsetLeft;
+ let mouseOffset = event.pageX - this.element.totalOffsetLeft;
let mousePositionTime = this._scrollStartTime + (mouseOffset * this._durationPerPixel);
this._handlingGesture = true;
@@ -492,7 +479,7 @@
// Cap zooming out at 5x.
let scale = Math.max(1/5, event.scale);
- let mouseOffset = event.pageX - this._element.totalOffsetLeft;
+ let mouseOffset = event.pageX - this.element.totalOffsetLeft;
let newSecondsPerPixel = this._gestureStartDurationPerPixel / scale;
this.secondsPerPixel = newSecondsPerPixel;
@@ -523,21 +510,23 @@
var overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
this._timelineOverviewGraphsMap.set(timeline, overviewGraph);
+
+ // FIXME: use View.prototype.addSubview(overviewGraph) once <https://webkit.org/b/150982> is fixed.
this._graphsContainerElement.appendChild(overviewGraph.element);
}
_timelineRemoved(event)
{
- var timeline = event.data.timeline;
+ let timeline = event.data.timeline;
console.assert(timeline instanceof WebInspector.Timeline, timeline);
if (!this.canShowTimeline(timeline))
return;
console.assert(this._timelineOverviewGraphsMap.has(timeline), timeline);
- var overviewGraph = this._timelineOverviewGraphsMap.take(timeline);
+ let overviewGraph = this._timelineOverviewGraphsMap.take(timeline);
overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
- this._graphsContainerElement.removeChild(overviewGraph.element);
+ overviewGraph.element.remove();
}
_markerAdded(event)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js (192615 => 192616)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-11-19 06:30:38 UTC (rev 192615)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-11-19 08:05:01 UTC (rev 192616)
@@ -23,13 +23,12 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.TimelineOverviewGraph = class TimelineOverviewGraph extends WebInspector.Object
+WebInspector.TimelineOverviewGraph = class TimelineOverviewGraph extends WebInspector.View
{
constructor(timelineOverview)
{
super();
- this.element = document.createElement("div");
this.element.classList.add("timeline-overview-graph");
this._zeroTime = 0;
@@ -39,8 +38,7 @@
this._timelineOverview = timelineOverview;
this._selectedRecord = null;
this._selectedRecordChanged = false;
- this._scheduledLayoutUpdateIdentifier = 0;
- this._scheduledSelectedRecordLayoutUpdateIdentifier = 0;
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
}
// Public
@@ -176,36 +174,17 @@
// Implemented by sub-classes if needed.
}
- updateLayout()
- {
- if (this._scheduledLayoutUpdateIdentifier) {
- cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- this._scheduledLayoutUpdateIdentifier = 0;
- }
-
- // Implemented by sub-classes if needed.
- }
-
- updateLayoutIfNeeded()
- {
- if (!this._scheduledLayoutUpdateIdentifier)
- return;
- this.updateLayout();
- }
-
- // Protected
-
needsLayout()
{
+ // FIXME: needsLayout can be removed once <https://webkit.org/b/150741> is fixed.
if (!this._visible)
return;
- if (this._scheduledLayoutUpdateIdentifier)
- return;
-
- this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+ super.needsLayout();
}
+ // Protected
+
dispatchSelectedRecordChangedEvent()
{
if (!this._selectedRecordChanged)
@@ -226,20 +205,16 @@
_needsSelectedRecordLayout()
{
// If layout is scheduled, abort since the selected record will be updated when layout happens.
- if (this._scheduledLayoutUpdateIdentifier)
+ if (this.layoutPending)
return;
if (this._scheduledSelectedRecordLayoutUpdateIdentifier)
return;
- function update()
- {
- this._scheduledSelectedRecordLayoutUpdateIdentifier = 0;
-
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = requestAnimationFrame(() => {
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
this.updateSelectedRecord();
- }
-
- this._scheduledSelectedRecordLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this));
+ });
}
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (192615 => 192616)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-11-19 06:30:38 UTC (rev 192615)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-11-19 08:05:01 UTC (rev 192616)
@@ -47,8 +47,7 @@
this._currentTimelineOverview = this._linearTimelineOverview;
- // FIXME: use View.prototype.addSubview once <https://webkit.org/b/149190> is fixed.
- this.element.appendChild(this._currentTimelineOverview.element);
+ this.addSubview(this._currentTimelineOverview);
this._contentViewContainer = new WebInspector.ContentViewContainer;
this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
@@ -341,9 +340,7 @@
if (newTimelineOverview !== this._currentTimelineOverview) {
this._currentTimelineOverview.hidden();
- // FIXME: use View.prototype.replaceSubview once <https://webkit.org/b/149190> is fixed.
- this.element.insertBefore(newTimelineOverview.element, this._currentTimelineOverview.element);
- this.element.removeChild(this._currentTimelineOverview.element);
+ this.replaceSubview(this._currentTimelineOverview, newTimelineOverview);
this._currentTimelineOverview = newTimelineOverview;
this._currentTimelineOverview.shown();
