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.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.UISourceCode} uiSourceCode
+     * @param {!WebInspector.CodeMirrorTextEditor} textEditor
+     */
+    decorate: function(uiSourceCode, textEditor)
+    {
+        var type = "performance";

[caseq, 2016/03/11 22:52:06]

nit: decoratorType. Also, consider @const.

[alph, 2016/03/12 00:47:54]

Done.

+        var decorations = uiSourceCode.lineDecorations(type) || [];
+        textEditor.operation(() => {

[caseq, 2016/03/11 22:52:05]

nit: extract named function?

[alph, 2016/03/12 00:47:54]

Done.

+            textEditor.resetGutterDecorations(type);
+            for (var decoration of decorations) {
+                var data = /** @type {!{text: string, intensity: number}} */ (decoration.data());
+                var element = createElementWithClass("div", "text-editor-line-marker-performance");
+                element.textContent = data.text;
+                element.style.backgroundColor = `rgba(255, 0, 0, ${data.intensity.toFixed(3)})`;
+                textEditor.setGutterDecoration(decoration.line(), type, element);
+            }
+        });
+    }
+}