DevTools: Initial implementation of line-level CPU profile.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 2083 matching lines @@
     case warnings.V8Deopt:
         span.appendChild(WebInspector.linkifyURLAsNode("https://github.com/GoogleChrome/devtools-docs/issues/53",
             WebInspector.UIString("Not optimized"), undefined, true));
         span.createTextChild(WebInspector.UIString(": %s", eventData["deoptReason"]));
         break;
     default:
         console.assert(false, "Unhandled TimelineModel.WarningType");
     }
     return span;
 }
+
+/**
+ * @constructor
+ * @implements {WebInspector.UISourceCodeFrame.LineDecorator}
+ */
+WebInspector.TimelineUIUtils.PerformanceLineDecorator = function()
+{
+}
+
+WebInspector.TimelineUIUtils.PerformanceLineDecorator.type = "performance";
+
+WebInspector.TimelineUIUtils.PerformanceLineDecorator.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     * @param {!WebInspector.CodeMirrorTextEditor} textEditor
+     */
+    decorate: function(uiSourceCode, textEditor)
+    {
+        var type = WebInspector.TimelineUIUtils.PerformanceLineDecorator.type;
+        var decorations = uiSourceCode.lineDecorations(type) || [];
+        textEditor.resetGutterDecorations(type);
+        for (var decoration of decorations) {
+            var time = /** @type {number} */ (decoration.data());
+            var text = WebInspector.UIString("%.1f\xa0ms", time);
+            var intensity = Number.constrain(Math.log10(1 + 2 * time) / 5, 0.02, 1);
+            var element = createElementWithClass("div", "text-editor-line-marker-performance");
+            element.textContent = text;
+            element.style.backgroundColor = `rgba(255, 0, 0, ${intensity.toFixed(3)})`;
+            textEditor.setGutterDecoration(decoration.line(), decoration.type(), element);
+        }
+    }
+}