DevTools: Tweak timeline group headers drawing

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 1338 matching lines @@
         hLine(lastGroupOffset + 0.5);
         context.stroke();
 
         forEachGroup(firstVisibleGroup, (offset, index, group) => {
             if (group.expanded)
                 return;
             var endLevel = index + 1 < groups.length ? groups[index + 1].startLevel : this._dataProvider.maxStackDepth();
             this._drawCollapsedOverviewForGroup(offset + 1, group.startLevel, endLevel);
         });
 
-        var headerX = 2;
+        var headerLeftPadding = 6;
         var arrowSide = 8;
-        var arrowHeight = arrowSide * Math.sqrt(3) / 2;
-        var expansionArrowX = headerX + arrowHeight;
+        var expansionArrowX = headerLeftPadding + arrowSide / 2;
         context.font = "11px " + WebInspector.fontFamily();
 
         context.save();
         context.fillStyle = "rgba(255, 255, 255, 0.5)";
-        context.shadowColor = "#fff";
-        context.shadowBlur = 10;

[caseq, 2016/02/26 20:53:24]

why?

[alph, 2016/02/26 21:04:36]

We currently don't like blurry stuff, gradients etc.

         forEachGroup(firstVisibleGroup, drawBackground.bind(this));
         context.restore();
 
-        context.fillStyle = "#888888";
+        context.fillStyle = "#6e6e6e";
         context.beginPath();
-        forEachGroup(firstVisibleGroup, (offset, index, group) => drawExpansionArrow(expansionArrowX, offset + barHeight / 2, group.expanded));
+        forEachGroup(firstVisibleGroup, (offset, index, group) => drawExpansionArrow(expansionArrowX, offset + textBaseHeight - arrowSide / 2, group.expanded));
         context.fill();
 
         context.fillStyle = "#222";
         forEachGroup(firstVisibleGroup, (offset, index, group) =>
             context.fillText(group.name, Math.floor(expansionArrowX + arrowSide), offset + textBaseHeight));
 
         context.strokeStyle = "#ddd";
         context.beginPath();
         forEachGroup(firstVisibleGroup, (offset, index, group) => {
             if (group.expanded)
@@ skipping 13 matching lines @@
         }
 
         /**
          * @param {number} offset
          * @param {number} index
          * @param {!WebInspector.FlameChart.Group} group
          * @this {WebInspector.FlameChart}
          */
         function drawBackground(offset, index, group)
         {
-            var backgroundPadding = 3;
-            var textPadding = 4;
-            var width = this._measureWidth(context, group.name) + textPadding + 2 * arrowSide;
-            context.fillRect(headerX, offset + backgroundPadding, width, barHeight - 2 * backgroundPadding);
+            var vPadding = 2;
+            var hPadding = 3;
+            var width = this._measureWidth(context, group.name) + 1.5 * arrowSide + 2 * hPadding;
+            context.fillRect(headerLeftPadding - hPadding, offset + vPadding, width, barHeight - 2 * vPadding);
         }
 
         /**
          * @param {number} x
          * @param {number} y
          * @param {boolean} expanded
          */
         function drawExpansionArrow(x, y, expanded)
         {
-            var arrowCenterOffset = arrowHeight / 3;
+            var arrowHeight = arrowSide * Math.sqrt(3) / 2;
+            var arrowCenterOffset = Math.round(arrowHeight / 2);
             context.save();
             context.translate(x, y);
             context.rotate(expanded ? Math.PI / 2 : 0);
             context.moveTo(-arrowCenterOffset, -arrowSide / 2);
             context.lineTo(-arrowCenterOffset, arrowSide / 2);
-            context.lineTo(2 * arrowCenterOffset, 0);
-            context.lineTo(-arrowCenterOffset, -arrowSide / 2);
+            context.lineTo(arrowHeight - arrowCenterOffset, 0);
             context.restore();
         }
 
         /**
          * @param {number} start
          * @param {function(number, number, !WebInspector.FlameChart.Group)} callback
          */
         function forEachGroup(start, callback)
         {
             for (var i = start; i < groups.length; ++i) {
@@ skipping 465 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }