1007073 - CSS coverage display in style editor should handle columns

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[Joe Walker [:jwalker]]

The css coverage tool just marks the line on which an unused selector exists with class="cm-unused-line".

There are 2 part to marking the whole rule:

1. The biggest hurdle is finding a way to mark up many non-rectangular sections in codemirror without killing performance.

2. We need to work out where the rule actually ends, which means:

  * UsageReport.createEditorReport() needs to propagate
    "end: { line:L, column:C }" in addition to similar for "start"
  * We need a calculateRuleEnds, which works something like:

  /**
   * Parse the text of a stylesheet to find out where the ends of the rules are
   * @return a promise when the parse is complete
   */
  calculateRuleEnds: function(ui, href) {
    return ui.getTokens(href).then(tokens => {
      for (let [ruleId, ruleData] of this._knownRules) {
        // Loop over the known rules from this stylesheet
        let { ruleHref, line } = idToRule(ruleId);
        if (ruleHref != href) {
          continue;
        }

        // Find the first token on the line of this selector
        let start = 0;
        while (tokens[start].loc.start.line < line) {
          start++;
        }

        // Find the first end token after the start token
        let end = start;
        while (tokens[end].tokenType != "}") {
          end++;
        }

        ruleData.end = {
          line: tokens[end].loc.end.line,
          column: tokens[end].loc.end.column
        };
      }
    });
  },

Comment 1

[Joe Walker [:jwalker]]

When we can mark-up non-rectangular sections in codemirror then we should also split out our reporting of selector lists, however when we do, we should remember that ".a, b..c { color:red; }" does not make things with class=a red since the whole complex selector is rendered invalid by the one error.

Comment 2

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).