DevTools: remove ruler bar from the main flamechart

third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 61 matching lines @@
     this._canvas.addEventListener('mousemove', this._onMouseMove.bind(this), false);
     this._canvas.addEventListener('mouseout', this._onMouseOut.bind(this), false);
     this._canvas.addEventListener('click', this._onClick.bind(this), false);
     this._canvas.addEventListener('keydown', this._onKeyDown.bind(this), false);
 
     this._entryInfo = this.viewportElement.createChild('div', 'flame-chart-entry-info');
     this._markerHighlighElement = this.viewportElement.createChild('div', 'flame-chart-marker-highlight-element');
     this._highlightElement = this.viewportElement.createChild('div', 'flame-chart-highlight-element');
     this._selectedElement = this.viewportElement.createChild('div', 'flame-chart-selected-element');
 
+    this._rulerEnabled = true;
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._rangeSelectionStart = 0;
     this._rangeSelectionEnd = 0;
     this._barHeight = dataProvider.barHeight();
     this._paddingLeft = this._dataProvider.paddingLeft();
     var markerPadding = 2;
     this._markerRadius = this._barHeight / 2 - markerPadding;
@@ skipping 20 matching lines @@
   }
 
   /**
    * @override
    */
   willHide() {
     this.hideHighlight();
   }
 
   /**
+   * @param {boolean} enable
+   */
+  enableRuler(enable) {
+    this._rulerEnabled = enable;
+  }
+
+  /**
    * @param {number} entryIndex
    */
   highlightEntry(entryIndex) {
     if (this._highlightedEntryIndex === entryIndex)
       return;
     this._highlightedEntryIndex = entryIndex;
     this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
   }
 
   hideHighlight() {
@@ skipping 71 matching lines @@
       return;
     if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) {
       this.hideHighlight();
       this.viewportElement.style.cursor = 'pointer';
       return;
     }
     this._updateHighlight();
   }
 
   _updateHighlight() {
-    var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.DividersBarHeight;
+    var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.HeaderHeight;
     this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(this._lastMouseOffsetX) : -1;
     this._updateMarkerHighlight();
 
     var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this._lastMouseOffsetY);
     if (entryIndex === -1) {
       this.hideHighlight();
       return;
     }
     if (this.isDragging())
       return;
@@ skipping 431 matching lines @@
       if (!text || !text.length)
         continue;
       context.fillStyle = this._dataProvider.textColor(entryIndex);
       context.fillText(text, barX + textPadding, barY + textBaseHeight);
     }
 
     context.restore();
 
     this._drawGroupHeaders(width, height);
     this._drawMarkers();
-    const headerHeight = 15;
+    const headerHeight = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 0;
     UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight);
 
     this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     this._updateMarkerHighlight();
   }
 
   /**
    * @param {number} width
    * @param {number} height
@@ skipping 212 matching lines @@
 
   _drawMarkers() {
     var markers = this._timelineData().markers;
     var left = this._markerIndexBeforeTime(this._calculator.minimumBoundary());
     var rightBoundary = this._calculator.maximumBoundary();
 
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     context.save();
     var ratio = window.devicePixelRatio;
     context.scale(ratio, ratio);
-    var height = UI.FlameChart.DividersBarHeight - 1;
+    context.translate(0, 3);
+    var height = UI.FlameChart.HeaderHeight - 1;
     for (var i = left; i < markers.length; i++) {
       var timestamp = markers[i].startTime();
       if (timestamp > rightBoundary)
         break;
       markers[i].draw(context, this._calculator.computePosition(timestamp), height, this._timeToPixel);
     }
     context.restore();
   }
 
   _updateMarkerHighlight() {
@@ skipping 53 matching lines @@
   }
 
   _updateLevelPositions() {
     var levelCount = this._dataProvider.maxStackDepth();
     var groups = this._rawTimelineData.groups || [];
     this._visibleLevelOffsets = new Uint32Array(levelCount + 1);
     this._visibleLevels = new Uint16Array(levelCount);
     this._groupOffsets = new Uint32Array(groups.length + 1);
 
     var groupIndex = -1;
-    var currentOffset = UI.FlameChart.DividersBarHeight;
+    var currentOffset = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 2;
     var visible = true;
     /** @type !Array<{nestingLevel: number, visible: boolean}> */
     var groupStack = [{nestingLevel: -1, visible: true}];
     for (var level = 0; level < levelCount; ++level) {
       while (groupIndex < groups.length - 1 && level === groups[groupIndex + 1].startLevel) {
         ++groupIndex;
         var style = groups[groupIndex].style;
         var nextLevel = true;
         while (groupStack.peekLast().nestingLevel >= style.nestingLevel) {
           groupStack.pop();
@@ skipping 168 matching lines @@
     /** @type {!Map<string,!Map<string,number>>} */
     this._textWidth = new Map();
     this.update();
   }
 
   _enabled() {
     return this._rawTimelineDataLength !== 0;
   }
 };
 
-UI.FlameChart.DividersBarHeight = 18;
+UI.FlameChart.HeaderHeight = 15;
 
 UI.FlameChart.MinimalTimeWindowMs = 0.5;
 
 /**
  * @interface
  */
 UI.FlameChartDataProvider = function() {};
 
 /**
  * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !UI.FlameChart.GroupStyle}}
@@ skipping 320 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };