Move divider detection and creation onto TimelineUIUtils instance

BUG=361045
R=loislo@chromium.org

Review URL: https://codereview.chromium.org/339493006

git-svn-id: svn://svn.chromium.org/blink/trunk@176493 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/timeline/TimelineModelImpl.js

@@ -168,7 +168,7 @@ WebInspector.TimelineModelImpl.prototype = {
     _innerAddRecord: function(payload, parentRecord)
     {
         var record = new WebInspector.TimelineModel.RecordImpl(this, payload, parentRecord);
-        if (WebInspector.TimelineUIUtils.isEventDivider(record))
+        if (WebInspector.TimelineUIUtilsImpl.isEventDivider(record))
             this._eventDividerRecords.push(record);
 
         for (var i = 0; payload.children && i < payload.children.length; ++i)

third_party/WebKit/Source/devtools/front_end/timeline/TimelineOverviewPane.js

@@ -32,10 +32,12 @@
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.TimelineModel} model
+ * @param {!WebInspector.TimelineUIUtils} uiUtils
  */
-WebInspector.TimelineOverviewPane = function(model)
+WebInspector.TimelineOverviewPane = function(model, uiUtils)
 {
     WebInspector.VBox.call(this);
+    this._uiUtils = uiUtils;
     this.element.id = "timeline-overview-pane";
 
     this._eventDividers = [];
@@ -110,7 +112,7 @@ WebInspector.TimelineOverviewPane.prototype = {
             var dividerPosition = Math.round(positions.start * 10);
             if (dividers[dividerPosition])
                 continue;
-            var divider = WebInspector.TimelineUIUtils.createEventDivider(record.type());
+            var divider = this._uiUtils.createEventDivider(record.type());
             divider.style.left = positions.start + "%";
             dividers[dividerPosition] = divider;
         }
@@ -123,9 +125,10 @@ WebInspector.TimelineOverviewPane.prototype = {
     addRecord: function(record)
     {
         var eventDividers = this._eventDividers;
+        var uiUtils = this._uiUtils;
         function addEventDividers(record)
         {
-            if (WebInspector.TimelineUIUtils.isEventDivider(record))
+            if (uiUtils.isEventDivider(record))
                 eventDividers.push(record);
         }
         WebInspector.TimelineModel.forAllRecords([record], addEventDividers);

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

@@ -120,7 +120,7 @@ WebInspector.TimelinePanel = function()
     this._createRecordingOptions();
 
     // Create top overview component.
-    this._overviewPane = new WebInspector.TimelineOverviewPane(this._model);
+    this._overviewPane = new WebInspector.TimelineOverviewPane(this._model, this._uiUtils);
     this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.show(this._topPane.mainElement());
 

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js

@@ -59,6 +59,14 @@ WebInspector.TimelineUIUtils.prototype = {
     {
         throw new Error("Not implemented.");
     },
+    /**
+     * @param {!WebInspector.TimelineModel.Record} record
+     * @return {boolean}
+     */
+    isEventDivider: function(record)
+    {
+        throw new Error("Not implemented.");
+    },
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {?Object}
@@ -93,6 +101,15 @@ WebInspector.TimelineUIUtils.prototype = {
      * @param {boolean} loadedFromFile
      */
     generateDetailsContent: function(record, model, linkifier, callback, loadedFromFile)
+    {
+        throw new Error("Not implemented.");
+    },
+    /**
+     * @param {string} recordType
+     * @param {string=} title
+     * @return {!Element}
+     */
+    createEventDivider: function(recordType, title)
     {
         throw new Error("Not implemented.");
     }
@@ -195,22 +212,6 @@ WebInspector.TimelineUIUtils.recordStyle = function(record)
     return result;
 }
 
-/**
- * @param {!WebInspector.TimelineModel.Record} record
- * @return {boolean}
- */
-WebInspector.TimelineUIUtils.isEventDivider = function(record)
-{
-    var recordTypes = WebInspector.TimelineModel.RecordType;
-    if (record.type() === recordTypes.TimeStamp)
-        return true;
-    if (record.type() === recordTypes.MarkFirstPaint)
-        return true;
-    if (record.type() === recordTypes.MarkDOMContent || record.type() === recordTypes.MarkLoad)
-        return record.data()["isMainFrame"];
-    return false;
-}
-
 /**
  * @param {string=} recordType
  * @return {boolean}
@@ -231,35 +232,6 @@ WebInspector.TimelineUIUtils.needsPreviewElement = function(recordType)
     }
 }
 
-/**
- * @param {string} recordType
- * @param {string=} title
- * @return {!Element}
- */
-WebInspector.TimelineUIUtils.createEventDivider = function(recordType, title)
-{
-    var eventDivider = document.createElement("div");
-    eventDivider.className = "resources-event-divider";
-    var recordTypes = WebInspector.TimelineModel.RecordType;
-
-    if (recordType === recordTypes.MarkDOMContent)
-        eventDivider.className += " resources-blue-divider";
-    else if (recordType === recordTypes.MarkLoad)
-        eventDivider.className += " resources-red-divider";
-    else if (recordType === recordTypes.MarkFirstPaint)
-        eventDivider.className += " resources-green-divider";
-    else if (recordType === recordTypes.TimeStamp)
-        eventDivider.className += " resources-orange-divider";
-    else if (recordType === recordTypes.BeginFrame)
-        eventDivider.className += " timeline-frame-divider";
-
-    if (title)
-        eventDivider.title = title;
-
-    return eventDivider;
-}
-
-
 /**
  * @param {!WebInspector.TimelineModel} model
  * @param {!{name: string, tasks: !Array.<!{startTime: number, endTime: number}>, firstTaskIndex: number, lastTaskIndex: number}} info
@@ -302,7 +274,7 @@ WebInspector.TimelineUIUtils.recordTitle = function(record, model)
         return recordData["message"];
     if (record.type() === WebInspector.TimelineModel.RecordType.JSFrame)
         return recordData["functionName"];
-    if (WebInspector.TimelineUIUtils.isEventDivider(record)) {
+    if (WebInspector.TimelineUIUtilsImpl.isEventDivider(record)) {
         var startTime = Number.millisToString(record.startTime() - model.minimumRecordTime());
         return WebInspector.UIString("%s at %s", WebInspector.TimelineUIUtils.recordStyle(record).title, startTime, true);
     }

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtilsImpl.js

@@ -37,6 +37,15 @@ WebInspector.TimelineUIUtilsImpl.prototype = {
         return !!WebInspector.TimelineUIUtilsImpl._coalescableRecordTypes[recordType];
     },
 
+    /**
+     * @param {!WebInspector.TimelineModel.Record} record
+     * @return {boolean}
+     */
+    isEventDivider: function(record)
+    {
+        return WebInspector.TimelineUIUtilsImpl.isEventDivider(record);
+    },
+
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {?Object}
@@ -86,6 +95,16 @@ WebInspector.TimelineUIUtilsImpl.prototype = {
         WebInspector.TimelineUIUtilsImpl.generateDetailsContent(record, model, linkifier, callback, loadedFromFile);
     },
 
+    /**
+     * @param {string} recordType
+     * @param {string=} title
+     * @return {!Element}
+     */
+    createEventDivider: function(recordType, title)
+    {
+        return WebInspector.TimelineUIUtilsImpl._createEventDivider(recordType, title);
+    },
+
     __proto__: WebInspector.TimelineUIUtils.prototype
 }
 
@@ -98,6 +117,22 @@ WebInspector.TimelineUIUtilsImpl._coalescableRecordTypes[WebInspector.TimelineMo
 WebInspector.TimelineUIUtilsImpl._coalescableRecordTypes[WebInspector.TimelineModel.RecordType.ResizeImage] = 1;
 
 
+/**
+ * @param {!WebInspector.TimelineModel.Record} record
+ * @return {boolean}
+ */
+WebInspector.TimelineUIUtilsImpl.isEventDivider = function(record)
+{
+    var recordTypes = WebInspector.TimelineModel.RecordType;
+    if (record.type() === recordTypes.TimeStamp)
+        return true;
+    if (record.type() === recordTypes.MarkFirstPaint)
+        return true;
+    if (record.type() === recordTypes.MarkDOMContent || record.type() === recordTypes.MarkLoad)
+        return record.data()["isMainFrame"];
+    return false;
+}
+
 /**
  * @param {!WebInspector.TimelineModel.Record} record
  * @param {!WebInspector.Linkifier} linkifier
@@ -437,3 +472,31 @@ WebInspector.TimelineUIUtilsImpl._generateDetailsContentSynchronously = function
     fragment.appendChild(contentHelper.element);
     return fragment;
 }
+
+/**
+ * @param {string} recordType
+ * @param {string=} title
+ * @return {!Element}
+ */
+WebInspector.TimelineUIUtilsImpl._createEventDivider = function(recordType, title)
+{
+    var eventDivider = document.createElement("div");
+    eventDivider.className = "resources-event-divider";
+    var recordTypes = WebInspector.TimelineModel.RecordType;
+
+    if (recordType === recordTypes.MarkDOMContent)
+        eventDivider.className += " resources-blue-divider";
+    else if (recordType === recordTypes.MarkLoad)
+        eventDivider.className += " resources-red-divider";
+    else if (recordType === recordTypes.MarkFirstPaint)
+        eventDivider.className += " resources-green-divider";
+    else if (recordType === recordTypes.TimeStamp)
+        eventDivider.className += " resources-orange-divider";
+    else if (recordType === recordTypes.BeginFrame)
+        eventDivider.className += " timeline-frame-divider";
+
+    if (title)
+        eventDivider.title = title;
+
+    return eventDivider;
+}

third_party/WebKit/Source/devtools/front_end/timeline/TimelineView.js

@@ -135,7 +135,7 @@ WebInspector.TimelineView.prototype = {
             var dividerPosition = Math.round(position);
             if (dividerPosition < 0 || dividerPosition >= clientWidth || dividers[dividerPosition])
                 continue;
-            var divider = WebInspector.TimelineUIUtils.createEventDivider(record.type(), WebInspector.TimelineUIUtils.recordTitle(record, this._model));
+            var divider = this._uiUtils.createEventDivider(record.type(), record.title());
             divider.style.left = dividerPosition + "px";
             dividers[dividerPosition] = divider;
         }
@@ -181,7 +181,7 @@ WebInspector.TimelineView.prototype = {
             this._frameContainer.appendChild(frameStrip);
 
             if (actualStart > 0) {
-                var frameMarker = WebInspector.TimelineUIUtils.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
+                var frameMarker = this._uiUtils.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
                 frameMarker.style.left = frameStart + "px";
                 dividers.push(frameMarker);
             }

third_party/WebKit/Source/devtools/front_end/timeline/TracingTimelineModel.js

@@ -227,7 +227,7 @@ WebInspector.TracingTimelineModel.prototype = {
             }
             var parentRecord = recordStack.peekLast() || null;
             var record = new WebInspector.TracingTimelineModel.TraceEventRecord(this, event, parentRecord);
-            if (WebInspector.TimelineUIUtils.isEventDivider(record))
+            if (WebInspector.TracingTimelineUIUtils.isEventDivider(record))
                 this._eventDividerRecords.push(record);
             if (!recordStack.length)
                 this._addTopLevelRecord(record);

third_party/WebKit/Source/devtools/front_end/timeline/TracingTimelineUIUtils.js

@@ -39,6 +39,15 @@ WebInspector.TracingTimelineUIUtils.prototype = {
         return !!WebInspector.TracingTimelineUIUtils._coalescableRecordTypes[recordType];
     },
 
+    /**
+     * @param {!WebInspector.TimelineModel.Record} record
+     * @return {boolean}
+     */
+    isEventDivider: function(record)
+    {
+        return WebInspector.TracingTimelineUIUtils.isEventDivider(record);
+    },
+
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      * @return {?Object}
@@ -83,6 +92,16 @@ WebInspector.TracingTimelineUIUtils.prototype = {
         WebInspector.TracingTimelineUIUtils.buildTraceEventDetails(record.traceEvent(), tracingTimelineModel, linkifier, callback, loadedFromFile, record.target());
     },
 
+    /**
+     * @param {string} recordType
+     * @param {string=} title
+     * @return {!Element}
+     */
+    createEventDivider: function(recordType, title)
+    {
+        return WebInspector.TracingTimelineUIUtils._createEventDivider(recordType, title);
+    },
+
     __proto__: WebInspector.TimelineUIUtils.prototype
 }
 
@@ -191,6 +210,22 @@ WebInspector.TracingTimelineUIUtils.styleForTraceEvent = function(name)
     return result;
 }
 
+/**
+ * @param {!WebInspector.TimelineModel.Record} record
+ * @return {boolean}
+ */
+WebInspector.TracingTimelineUIUtils.isEventDivider = function(record)
+{
+    var recordTypes = WebInspector.TracingTimelineModel.RecordType;
+    if (record.type() === recordTypes.TimeStamp)
+        return true;
+    if (record.type() === recordTypes.MarkFirstPaint)
+        return true;
+    if (record.type() === recordTypes.MarkDOMContent || record.type() === recordTypes.MarkLoad)
+        return record.data()["isMainFrame"];
+    return false;
+}
+
 /**
  * @param {!WebInspector.TracingModel.Event} event
  * @param {!WebInspector.Linkifier} linkifier
@@ -629,3 +664,31 @@ WebInspector.TracingTimelineUIUtils._buildPicturePreviewContent = function(encod
         callback(container);
     }
 }
+
+/**
+ * @param {string} recordType
+ * @param {string=} title
+ * @return {!Element}
+ */
+WebInspector.TracingTimelineUIUtils._createEventDivider = function(recordType, title)
+{
+    var eventDivider = document.createElement("div");
+    eventDivider.className = "resources-event-divider";
+    var recordTypes = WebInspector.TracingTimelineModel.RecordType;
+
+    if (recordType === recordTypes.MarkDOMContent)
+        eventDivider.className += " resources-blue-divider";
+    else if (recordType === recordTypes.MarkLoad)
+        eventDivider.className += " resources-red-divider";
+    else if (recordType === recordTypes.MarkFirstPaint)
+        eventDivider.className += " resources-green-divider";
+    else if (recordType === recordTypes.TimeStamp)
+        eventDivider.className += " resources-orange-divider";
+    else if (recordType === recordTypes.BeginFrame)
+        eventDivider.className += " timeline-frame-divider";
+
+    if (title)
+        eventDivider.title = title;
+
+    return eventDivider;
+}