DevTools: Add labels to the timeline overview strips

Source/devtools/front_end/timeline/TimelineEventOverview.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 14 matching lines @@
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineOverviewBase}
  * @param {string} id
+ * @param {string} title
  * @param {!WebInspector.TimelineModel} model
  */
-WebInspector.TimelineEventOverview = function(id, model)
+WebInspector.TimelineEventOverview = function(id, title, model)
 {
     WebInspector.TimelineOverviewBase.call(this);
     this.element.id = "timeline-overview-" + id;
     this.element.classList.add("overview-strip");
+    this.element.createChild("div", "timeline-overview-strip-placeholder").textContent = title;
     this._model = model;
 }
 
 WebInspector.TimelineEventOverview.prototype = {
     /**
      * @param {number} y
      * @param {string} label
      */
     _drawHorizontalGuide: function(y, label)
     {
@@ skipping 65 matching lines @@
     __proto__: WebInspector.TimelineOverviewBase.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineEventOverview.Input = function(model)
 {
-    WebInspector.TimelineEventOverview.call(this, "input", model);
+    WebInspector.TimelineEventOverview.call(this, "input", WebInspector.UIString("Input"), model);
 }
 
 WebInspector.TimelineEventOverview.Input.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
         var events = this._model.mainThreadEvents();
@@ skipping 33 matching lines @@
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineEventOverview.Network = function(model)
 {
-    WebInspector.TimelineEventOverview.call(this, "network", model);
+    WebInspector.TimelineEventOverview.call(this, "network", WebInspector.UIString("Net"), model);
 }
 
 WebInspector.TimelineEventOverview.Network.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
         var events = this._model.mainThreadEvents();
@@ skipping 30 matching lines @@
         WebInspector.TimelineUIUtils.iterateNetworkRequestsInRoundRobin(events, bandsCount, drawBar.bind(this));
     },
 
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {string} id
+ * @param {string} title
  * @param {!WebInspector.TimelineModel} model
  */
-WebInspector.TimelineEventOverview.Thread = function(id, model)
+WebInspector.TimelineEventOverview.Thread = function(id, title, model)
 {
-    WebInspector.TimelineEventOverview.call(this, id, model)
+    WebInspector.TimelineEventOverview.call(this, id, title, model)
     this._fillStyles = {};
     var categories = WebInspector.TimelineUIUtils.categories();
     for (var category in categories) {
         this._fillStyles[category] = categories[category].fillColorStop1;
         categories[category].addEventListener(WebInspector.TimelineCategory.Events.VisibilityChanged, this._onCategoryVisibilityChanged, this);
     }
     this._disabledCategoryFillStyle = "hsl(0, 0%, 67%)";
 }
 
 WebInspector.TimelineEventOverview.Thread.prototype = {
@@ skipping 25 matching lines @@
     __proto__: WebInspector.TimelineEventOverview.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview.Thread}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineEventOverview.MainThread = function(model)
 {
-    WebInspector.TimelineEventOverview.Thread.call(this, "main-thread", model)
+    WebInspector.TimelineEventOverview.Thread.call(this, "main-thread", WebInspector.UIString("CPU"), model)
 }
 
 WebInspector.TimelineEventOverview.MainThread.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
         var events = this._model.mainThreadEvents();
@@ skipping 63 matching lines @@
     __proto__: WebInspector.TimelineEventOverview.Thread.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview.Thread}
  * @param {!WebInspector.TimelineModel} model
  */
 WebInspector.TimelineEventOverview.OtherThreads = function(model)
 {
-    WebInspector.TimelineEventOverview.Thread.call(this, "other-threads", model);
+    WebInspector.TimelineEventOverview.Thread.call(this, "other-threads", WebInspector.UIString("BG"), model);
 }
 
 WebInspector.TimelineEventOverview.OtherThreads.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
         this._model.virtualThreads().forEach(this._drawThread.bind(this));
@@ skipping 51 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  */
 WebInspector.TimelineEventOverview.Responsiveness = function(model, frameModel)
 {
-    WebInspector.TimelineEventOverview.call(this, "responsiveness", model)
+    WebInspector.TimelineEventOverview.call(this, "responsiveness", WebInspector.UIString("Warn"), model)
     this._frameModel = frameModel;
 }
 
 WebInspector.TimelineEventOverview.Responsiveness.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
@@ skipping 21 matching lines @@
 }
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  */
 WebInspector.TimelineEventOverview.Frames = function(model, frameModel)
 {
-    WebInspector.TimelineEventOverview.call(this, "framerate", model);
+    WebInspector.TimelineEventOverview.call(this, "framerate", "FPS", model);
     this._frameModel = frameModel;
 }
 
 WebInspector.TimelineEventOverview.Frames.prototype = {
     /**
      * @override
      */
     update: function()
     {
         this.resetCanvas();
@@ skipping 159 matching lines @@
             counters[group] = this._quantDuration;
             this._callback(counters);
             interval -= this._quantDuration;
         }
         this._counters = [];
         this._counters[group] = interval;
         this._lastTime = time;
         this._remainder = this._quantDuration - interval;
     }
 }