[Devtools] Added timeline event dividers bars to network timeline exp

third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator
  * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator
  * @param {!WebInspector.Setting} networkLogLargeRowsSetting
@@ skipping 16 matching lines @@
 
     /** @type {!Array<!Element>} */
     this._dropDownColumnSelectors = [];
 
     this._networkLogLargeRowsSetting = networkLogLargeRowsSetting;
     this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, this);
 
     /** @type {!Array<{time: number, element: !Element}>} */
     this._eventDividers = [];
 
+    /** @type {!Map<string, !Array<number>>} */
+    this._shownEventDividers = new Map();

[dgozman, 2016/10/28 18:35:38]

Why not just |_eventDividers|? The naming is confusing between this and boolean
flag below.

[allada, 2016/10/28 21:09:07]

Done.

+    /** @type {!Array<number>} */
+    this._filmStripDividers = [];
+    this._eventDividersShown = false;
+
     this._gridMode = true;
 
     /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
     /** @type {?WebInspector.TimelineGrid} */
     this._timelineGrid = null;
     this._timelineHeaderElement = null;
     this._timelineRequestsAreStale = false;
     this._timelineScrollerWidthIsStale = true;
@@ skipping 306 matching lines @@
                     title: WebInspector.UIString("Timeline \u2013 Latency"),
                     sort: WebInspector.DataGrid.Order.Descending,
                     sortingFunction: WebInspector.NetworkDataGridNode.RequestPropertyComparator.bind(null, "latency"),
                     calculator: WebInspector.NetworkLogViewColumns._calculatorTypes.Duration
                 }
             ]
         }
     }
 ];
 
+WebInspector.NetworkLogViewColumns._filmStripDividerColor = "#fccc49";
+
 /**
  * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig
  * @return {!WebInspector.DataGrid.ColumnDescriptor}
  */
 WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor = function(columnConfig)
 {
     return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({
         id: columnConfig.id,
         title: columnConfig.title,
         sortable: columnConfig.sortable,
@@ skipping 12 matching lines @@
     willHide: function()
     {
         this._popoverHelper.hidePopover();
     },
 
     reset: function()
     {
         if (this._popoverHelper)
             this._popoverHelper.hidePopover();
         this._timelineGrid.removeEventDividers();
+        this._shownEventDividers.clear();
+        this._filmStripDividers = [];
         this.updateDividersIfNeeded();
     },
 
     _setupDataGrid: function()
     {
         var defaultColumns = WebInspector.NetworkLogViewColumns._defaultColumns;
         var defaultColumnConfig = WebInspector.NetworkLogViewColumns._defaultColumnConfig;
 
         this._columns = /** @type {!Array<!WebInspector.NetworkLogViewColumns.Descriptor>} */ ([]);
         for (var currentConfigColumn of defaultColumns) {
@@ skipping 92 matching lines @@
         if (this._timelineScrollerWidthIsStale) {
             this._timelineScrollerWidthIsStale = false;
             this._timelineColumn.setRightPadding(this._timelineScroller.offsetWidth - this._timelineScrollerContent.offsetWidth);
         }
     },
 
     _redrawTimelineColumn: function()
     {
         if (!this._timelineRequestsAreStale) {
             this._updateScrollerWidthIfNeeded();
-            this._timelineColumn.update(this._activeScroller.scrollTop);
+            this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividersShown ? this._shownEventDividers : undefined);
             return;
         }
         var currentNode = this._dataGrid.rootNode();
         var requestData = {
             requests: [],
             navigationRequest: null
         };
         while (currentNode = currentNode.traverseNextNode(true)) {
             if (currentNode.isNavigationRequest())
                 requestData.navigationRequest = currentNode.request();
             requestData.requests.push(currentNode.request());
         }
-        this._timelineColumn.update(this._activeScroller.scrollTop, requestData);
+        this._timelineColumn.update(this._activeScroller.scrollTop, this._shownEventDividers, requestData);
     },
 
     /**
      * @param {?WebInspector.NetworkRequest} request
      */
     setHoveredRequest: function(request)
     {
         if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
             this._timelineColumn.setHoveredRequest(request);
     },
@@ skipping 456 matching lines @@
     {
         this._popupLinkifier.reset();
     },
 
     /**
      * @param {!Array<number>} times
      * @param {string} className
      */
     addEventDividers: function(times, className)
     {
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+        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-frame-divider":
+                color = WebInspector.NetworkLogViewColumns._filmStripDividerColor;
+                this._filmStripDividers = this._filmStripDividers.concat(times);
+                return;
+            case "network-blue-divider":
+                color = "hsla(240, 100%, 80%, 0.7)";
+                break;
+            case "network-red-divider":
+                color = "rgba(255, 0, 0, 0.5)";
+                break;
+            }
+            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});
         }
         // Update event dividers immediately
         this._updateEventDividers();
         // Schedule refresh in case dividers change the calculator span.
         this._networkLogView.scheduleRefresh();
     },
 
     _updateEventDividers: function()
     {
         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: function()
     {
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+        this._eventDividersShown = true;
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            this._redrawTimelineColumn();
             return;
+        }
         this._timelineGrid.hideEventDividers();
     },
 
     showEventDividers: function()
     {
-        if (Runtime.experiments.isEnabled("canvasNetworkTimeline"))
+        this._eventDividersShown = false;
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            this._redrawTimelineColumn();
             return;
+        }
         this._timelineGrid.showEventDividers();
     },
 
     /**
      * @param {number} time
      */
     selectFilmStripFrame: function(time)
     {
+        if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) {
+            this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor);
+            for (var dividertime of this._filmStripDividers) {
+                if (dividertime === time)
+                    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);
     },
 
     clearFilmStripFrame: function()
     {
+        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);
     }
 };