Devtools: Pretty print fix for CSS coverage decorations.

third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js

Index: third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js b/third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js
index e397119eae4b77ff588efc95f3269686d0bff4b9..6830c8accdec363b1c0bc44f2220542fa9a6d667 100644
--- a/third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js
+++ b/third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js
@@ -4,8 +4,15 @@
 
 Components.CoverageProfile = class {
   constructor() {
+    /** @type {!Multimap<string, !Protocol.CSS.SourceRange>} */
+    this._rangeDecorations = new Multimap();
     this._updateTimer = null;
     this.reset();
+
+    Workspace.workspace.uiSourceCodes().forEach(uiSourceCode => uiSourceCode.addEventListener(

[caseq, 2016/11/14 23:33:18]

When does this happen? What about those source codes that are added later?

+            Workspace.UISourceCode.Events.WorkingCopyChanged, this._uiSourceCodeWorkingCopyChanged.bind(this), this));
+
+    this._hasEventListenerSymbol = Symbol('coverageEventListener');

[caseq, 2016/11/14 23:33:18]

How is this used?

   }
 
   /**
@@ -30,14 +37,51 @@ Components.CoverageProfile = class {
     if (!uiSourceCode)
       return;
 
-    for (var line = range.startLine; line <= range.endLine; ++line)
-      uiSourceCode.addLineDecoration(line, Components.CoverageProfile.LineDecorator.type, range.startColumn);
+    if (range.startColumn)
+      range.startColumn--;
+
+    this._rangeDecorations.set(url, range);
+    this._markRangeDecoration(uiSourceCode, range);
   }
 
   reset() {
     Workspace.workspace.uiSourceCodes().forEach(
         uiSourceCode => uiSourceCode.removeAllLineDecorations(Components.CoverageProfile.LineDecorator.type));
   }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   * @param {!Protocol.CSS.SourceRange} range
+   */
+  _markRangeDecoration(uiSourceCode, range) {
+    for (var line = range.startLine; line <= range.endLine; ++line)
+      uiSourceCode.addLineDecoration(line, Components.CoverageProfile.LineDecorator.type, null);
+  }
+
+  /**
+   * @param {?} event

[caseq, 2016/11/14 23:33:18]

please annotate with type.

+   */
+  _uiSourceCodeWorkingCopyChanged(event) {
+      if (!event.data || !event.data.sourceMapping)
+        return;
+      this.reset();
+
+      var sourceMapping = event.data.sourceMapping;
+      var uiSourceCode = event.target;
+      if (!uiSourceCode.url())
+        return;
+
+      for (var decoration of this._rangeDecorations.get(uiSourceCode.url())) {
+        var oldRange = /** {!Protocol.CSS.SourceRange} */ (decoration);

[caseq, 2016/11/14 23:33:18]

Why do we need the cast here?

+        [decoration.startLine, decoration.startColumn] = sourceMapping.originalToFormatted(
+                                                                          oldRange.startLine, oldRange.startColumn);
+
+        [decoration.endLine, decoration.endColumn] = sourceMapping.originalToFormatted(
+                                                                          oldRange.endLine, oldRange.endColumn);
+
+        this._markRangeDecoration(uiSourceCode, decoration);
+      }
+  }
 };
 
 /**
@@ -54,7 +98,7 @@ Components.CoverageProfile.LineDecorator = class {
 
     var decorations = uiSourceCode.lineDecorations(Components.CoverageProfile.LineDecorator.type);
     textEditor.uninstallGutter(gutterType);
-    if (!decorations)
+    if (!decorations || !decorations.size)
       return;
 
     textEditor.installGutter(gutterType, false);