832980 - [Computed view] we see the template in the UI

Status: RESOLVED DUPLICATE of bug 834187

(DevTools :: Inspector, defect, P1)

Description

[Paul Rouget [:paul]]

Attachment: screenshot

Some errors in the console (there are hundreds):

Expected selector.openStyleEditor to resolve to a function, but got undefined (In: div#templateMatchedSelectors > table > loop > foreach > 6 > tr > td > a > onclick)

Expected selector.maybeOpenStyleEditor to resolve to a function, but got undefined (In: div#templateMatchedSelectors > table > loop > foreach > 6 > tr > td > a > onkeydown)

"selectorInfo" is undefined (In: div#templateMatchedSelectors > table > loop > foreach > 6 > tr > td > a > title > ${selector.selectorInfo.href})

Template error evaluating 'selector.humanReadableText(__element)' (In: div#templateMatchedSelectors > table > loop > foreach > 7 > tr > td > #text >  ${selector.humanReadableText(__element)} )

TypeError: selector.humanReadableText is not a function

Comment 1

[Paul Rouget [:paul]]

STR:

- go to paulrouget.com
- inspector the round top left image
- use the computed view
- uncheck Only User Styles
- unfold -moz-box-sizing

It doesn't happen all the time.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

That was a difficult one to hunt down:

http://mxr.mozilla.org/mozilla-central/source/layout/base/nsPresShell.cpp#1387 contains the following:
1387       InsertRuleInternal(NS_LITERAL_STRING("*|*:-moz-any-link:not(svg|a){text-decoration:underline}"),
1388                          sInsertPrefSheetRulesAt, &index);

As of http://dev.w3.org/csswg/selectors4/#typenmsp using type selectors in :not() is fine and this is supported by Fx as illustrated by the preceding code.

Unfortunately, the following works just fine:
document.body.mozMatchesSelector("*|*:-moz-any-link:not(a)") // Returns false

But as soon as we add the svg namespace it fails:
document.body.mozMatchesSelector("*|*:-moz-any-link:not(svg|a)") // Exception: An invalid or illegal string was specified

This exception then stops the template from processing.

Comment 3

[Paul Rouget [:paul]]

(In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #2)
> But as soon as we add the svg namespace it fails:
> document.body.mozMatchesSelector("*|*:-moz-any-link:not(svg|a)") //
> Exception: An invalid or illegal string was specified
> 
> This exception then stops the template from processing.

It doesn't fail because of svg, it fails because it's an invalid selector.
:not(svg|a) doesn't mean anything.

:not(svg):not(a) is, I think, what you want.

Comment 4

[Paul Rouget [:paul]]

ignore my comment 3. I was mistaken.

Comment 5

[Joe Walker [:jwalker]]

As a workaround, why not just wrap humanReadableText in a try catch, and return something better than an error message?

Comment 6

[Paul Rouget [:paul]]

 (In reply to Joe Walker [:jwalker] from comment #5)
> As a workaround, why not just wrap humanReadableText in a try catch, and
> return something better than an error message?

What if we just bail on exception for mozMatchSelector and just consider it doesn't match? It makes me sad, but I think it's the best we can do until we get a better CSS logic.

Comment 7

[Joe Walker [:jwalker]]

So to be clear, a simple workaround would be:

CssHtmlTree.jsm:1200

  /**
   * A localized Get localized human readable info
   */
  humanReadableText: function SelectorView_humanReadableText(aElement)
  {
    try {
      if (this.tree.getRTLAttr == "rtl") {
        return this.selectorInfo.value + " \u2190 " + this.text(aElement);
      } else {
        return this.text(aElement) + " \u2192 " + this.selectorInfo.value;
      }
    }
    catch (ex) {
      return "Unsupported selector";
    }
  },

We can probably do better than this, but you get the idea...

Comment 8

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Patch

(In reply to Joe Walker [:jwalker] from comment #7)
> So to be clear, a simple workaround would be:
> 
> CssHtmlTree.jsm:1200
> 
>   /**
>    * A localized Get localized human readable info
>    */
>   humanReadableText: function SelectorView_humanReadableText(aElement)
>   {
>     try {
>       if (this.tree.getRTLAttr == "rtl") {
>         return this.selectorInfo.value + " \u2190 " + this.text(aElement);
>       } else {
>         return this.text(aElement) + " \u2192 " + this.selectorInfo.value;
>       }
>     }
>     catch (ex) {
>       return "Unsupported selector";
>     }
>   },
> 
> We can probably do better than this, but you get the idea...

That wouldn't quite work as this is not where we check whether the selector matches the node. This patch dumps a warning and should be fixed (Bug 834187) once Bug 833808 is implemented.

Comment 9

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Patch v2

Removed crud

Comment 10

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 705825 [details] [diff] [review]
Patch v2

Actually, the patch in bug 834187 fixes this.

Comment 11

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Because this was fixed as part of bug 834187  I am resolving it as a duplicate.