Devtools: Pretty print fix for CSS coverage decorations.

third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.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.
 
 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?

   }
 
   /**
    * @return {!Components.CoverageProfile}
    */
   static instance() {
     if (!Components.CoverageProfile._instance)
       Components.CoverageProfile._instance = new Components.CoverageProfile();
 
     return Components.CoverageProfile._instance;
   }
 
   /**
    * @param {string} url
    * @param {!Protocol.CSS.SourceRange} range
    */
   appendUnusedRule(url, range) {
     if (!url)
       return;
 
     var uiSourceCode = Workspace.workspace.uiSourceCodeForURL(url);
     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);
+      }
+  }
 };
 
 /**
  * @implements {Sources.UISourceCodeFrame.LineDecorator}
  */
 Components.CoverageProfile.LineDecorator = class {
   /**
    * @override
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @param {!TextEditor.CodeMirrorTextEditor} textEditor
    */
   decorate(uiSourceCode, textEditor) {
     var gutterType = 'CodeMirror-gutter-coverage';
 
     var decorations = uiSourceCode.lineDecorations(Components.CoverageProfile.LineDecorator.type);
     textEditor.uninstallGutter(gutterType);
-    if (!decorations)
+    if (!decorations || !decorations.size)
       return;
 
     textEditor.installGutter(gutterType, false);
 
     for (var decoration of decorations.values()) {
       var element = createElementWithClass('div', 'text-editor-line-marker-coverage');
       textEditor.setGutterDecoration(decoration.line(), gutterType, element);
     }
   }
 };
 
 Components.CoverageProfile.LineDecorator.type = 'coverage';