[Devtools] Added padding to hover area in network timeline

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.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.
 /**
  * @unrestricted
  */
 WebInspector.NetworkTimelineColumn = class extends WebInspector.VBox {
   /**
    * @param {number} rowHeight
    * @param {!WebInspector.NetworkTimeCalculator} calculator
@@ skipping 80 matching lines @@
       var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0)
           .find(data => data.name === WebInspector.RequestTimeRangeNames.Total);
       var start = this._timeToPosition(range.start);
       var end = this._timeToPosition(range.end);
     } else {
       var range = this._getSimplifiedBarRange(this._hoveredRequest, 0);
       var start = range.start;
       var end = range.end;
     }
 
+    if (end - start < 50) {
+      var halfWidth = (end - start) / 2;
+      start = start + halfWidth - 25;
+      end = end - halfWidth + 25;
+    }
+
     if (event.clientX < this._canvasPosition.left + start || event.clientX > this._canvasPosition.left + end)
       return;
 
     var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
     var barHeight = this._getBarHeight(range.name);
     var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop) + ((this._rowHeight - barHeight) / 2);
 
     if (event.clientY < this._canvasPosition.top + y || event.clientY > this._canvasPosition.top + y + barHeight)
       return;
 
@@ skipping 503 matching lines @@
   font: 'hsl(8, 100%, 80%)',
   media: 'hsl(272, 64%, 80%)',
   image: 'hsl(272, 64%, 80%)',
   script: 'hsl(31, 100%, 80%)',
   stylesheet: 'hsl(90, 50%, 80%)',
   texttrack: 'hsl(8, 100%, 80%)',
   websocket: 'hsl(0, 0%, 95%)',
   xhr: 'hsl(53, 100%, 80%)',
   other: 'hsl(0, 0%, 95%)'
 };