Closed Bug 1574791 Opened 6 years ago Closed 6 years ago

Warning message from ensureCSSErrorReportingEnabled is confusing for users.

Categories

(DevTools :: Console, defect, P2)

Product:
DevTools
Component:
Console
Version:
68 Branch
Type:
defect

Tracking

(firefox70 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 70
Tracking Flags:
Tracking Status
firefox70 --- fixed

People

(Reporter: t20, Assigned: nchevobbe)

References

Details

Attachments

(4 files)

test.css
8 bytes, text/css
Details
Toggle
17.86 KB, image/png
Details
Message in CSS filter tooltip
136.61 KB, image/png
Details
Bug 1574791 - Don't emit a warning message when enabling CSS warnings. r=Honza.
47 bytes, text/x-phabricator-request
Details | Review
Attached file test.css —

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

  1. Open HTML file test.html attached to this report in Firefox in Windows, with attached test.css file in current folder.
  2. Using the toolbar, open Web Developer > Web Console.

Actual results:

A difficult-to-understand error or warning message appears, starting "Stylesheets without CSSOM changes..."

This message may be meaningful, but it includes several terms that are not in common use by programmers who wish to use the Firefox Web Console (including myself, a retired software engineer with 40 years of experience).

The message only appears once for this test case, and all my other pages. It disappears on reloading the page. There is no explanation for its disappearance.

I also do not know if this bug report also applies to the Browser Console.

Expected results:

Since my test case uses standard HTML5 and standard CSS, and furthermore uses only the CSP (security) standard method of including a separate CSS file, not "inline" CSS, I can see no reason why the program should appear to contain a problem of any kind.

Note that this error has been happening for a very long time, but I am finally moved to report it. I do not see exactly the same error report in Bugzilla, but it certainly is possible that this is a duplicate bug. I do see many related bugs, most still Open, so I imagine this issue may need to be elevated to a more urgent status level.

Note: in my own programming I attempt to use "strict" code that does not create any error messages in validators or other developer tools. I do understand (very well) that much modern software (such as programming frameworks) use loose CSS (sometimes for valid reasons of browser compatibility) that does generate CSS errors, however, I try to avoid this practice in my programming so that I can see my own CSS errors when I test, and at other times as well. The message described in this report certainly looks like a real error, and cannot be understood due to its use of unfamiliar terminology, with not even a link to an explanation.

I see that the file test.css was successfully included in my report, but the file test.html, which I attached first, seems to have disappeared. This may be a bug or misconfiguration in Mozilla. Here is test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>Test CSS Warning Message</title>
<link rel=stylesheet type="text/css" href="test.css">
</head>
<body>
Test css warning message: view in Firefox Web Console.
</body>
</html>

Sorry, I realize that Markdown requires four spaces before each line. I apologize.

Hey David,

That warning appears when the CSS message filter is toggled on in the Web Console. You can check it out here too: https://searchfox.org/mozilla-central/source/devtools/shared/locales/en-US/browsing-context.properties
It can be seen for the first time after toggling the filter on or loading the web console for the first time with the filter already toggled. Refreshing the page will make it disappear since it's a general warning message, not a straightforward pointing to an issue.

Thanks for the good intentions in giving an answer. But I still have questions and it still looks like a bug.

  1. How do I turn off the "CSS message filter" and what will that mean in the Developer Tools? 2. Why is the message so obscure, and the method for turning it off so difficult to learn? This is an ugly part of Firefox, in my opinion. I still don't understand it, and if I don't understand it, why is it shown to me?

A useful general principle: software should be neither surprising nor opaque.

Attached image Toggle —

You can toggle it on/off by clicking on "CSS", check the attached image.
Unfortunately, I can't explain what will that impact developers tools with given that I'm not a developer myself.

However, I can move this over to the developer tools component if you require further explanations.

Thank you for your time, but that is no solution! The purpose of the Console tool is to show error messages for debugging code. Turning off CSS means not being able to see CSS (style sheet) error messages. If you have ever written any CSS, you know that even though its syntax is simple, it is easy (for most of us) to make mistakes, especially if we are in a rush. If I turned CSS error reporting off, then my CSS would fail silently. As a developer, I cannot afford to waste time looking for syntax errors without the help of the Firefox debugger.

This bug should really be fixed, not worked around in such a dreadful way.

If no one has time to triage bugs, then, yes, the component should be set to Developer Tools. I don't seem to have access rights to do this.

Sorry if there was any misunderstanding in my response but I did not advice to toggle it off as a solution.
You asked me: "How do I turn off the "CSS message filter" and "why is for turning it off so difficult to learn". I offered you the answer for that and will gladly move this issue to it's component given that it needs further discussions.

Component: Untriaged → Console
Product: Firefox → DevTools

Thanks for the report David.

I agree the message is confusing.
It appears as a warning message, but really, it's only a notice for the user that some CSS errors might not be displayed.
Emilio, do you think we could either:

  1. have a better wording for that, or
  2. drop this message?

If we really need it, it be replaced by a simple title attribute on the CSS filter button when the button is disabled.

Flags: needinfo?(emilio)

These are great suggestions! I hope someone can make this happen.

I'd be ok with either of those. Maybe using "dynamically modified" rather than "CSSOM" would be useful for folks that are less aware of the name of the spec?

Flags: needinfo?(emilio)

And / or just making it an "info" message rather than a warning message, if we have something like that?

I would rather not be bothered by the message at all, if it really doesn't tell me something useful. I still don't understand the message, and perhaps I never will, but it doesn't seem to affect my CSS debugging at all, so it is probably not needed.

What the message is saying is that dynamic errors like document.body.style.color = "bogus", or document.styleSheets[0].cssRules... aren't shown when you click the button for the first time, you need to reload and let that execute while CSS error reporting is on.

I knew that :hover and :active aren't shown, but I didn't know that styles set in JavaScript require a restart, so that is actually useful. But the message should say "restart if you wish to see styles that are changed in JavaScript code", not some jargon only the person who read the standard understands. And the message should appear when hovering over the CSS button, not looking very much like an error message. This bug really needs to be fixed. Every time I restart the console, I think there is an error in my program even though I know better. I believe that lots of other people truly believe there is an error in their page somewhere.

Priority: -- → P2

Here's a screenshot of a WIP patch (we also don't emit the warning message anymore)

Summary: A strange CSS warning message appears sometimes in Web Console → Warning message from ensureCSSErrorReportingEnabled is confusing for users.

Wow. This is great. Excellent change. I'm glad this got approved.

There was a warning message displayed to indicate that
the stylesheets where parsed again for checking errors,
and that in order to see errors for CSS modified in
Javascript, the tab should be reloaded.
The jargon used there was confusing, and also this was
more a notice than an actual warning message.
In order to remove confusion, we don't emit this message
anymore, but add a title to the CSS filter button when
it's disabled. The sentence is reworded to be simpler
to understand.

Assignee: nobody → nchevobbe
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/4b5fb6e4c7f9 Don't emit a warning message when enabling CSS warnings. r=Honza.

Comment #17 says that the new Title will appear only when the CSS button is 'off' (what you call 'disabled'). But since the message is informative, and since when the CSS button is 'off' no CSS errors are shown in any case, would it make more sense to show this title when the button is 'on' as well? Or just when the button is 'on'? I'm just asking, is all.

That makes little sense. If you enabled the CSS warnings at some point, we will always show the warning messages. Having the same title when the button is active would be misleading (one could think the stylesheets will be reparsed when disabling it).
We'll see if we get any feedback with how we are doing this now, and if so, we'll adjust the message and/or when we are showing it :)

I think you are implying that when the CSS button is 'on', the stylesheets don't have to be reparsed, so the message is not needed? But this makes no sense to me. I am totally confused. I think the situation should be explained clearly here in this bug before a final decision is made as to implementation. If it is really true that some error messages can be missed unless the user reloads the page, then that should be explained somehow, somewhere when the CSS button is 'on', don't you agree?

If it is really true that some error messages can be missed unless the user reloads the page, then that should be explained somehow, somewhere when the CSS button is 'on', don't you agree?

I don't.

The only way you can miss CSS error messages is if the CSS filter was off, and you turn it on.
When it's on, every CSS errors will be emitted, including the ones that originates from JS modifications to the stylesheets.

So really, the only place where it makes sense to warn the user that they may have to reload the page is when the CSS filter is 'off'

I think I understand. Turning the CSS button from 'off' to 'on' will not show certain error messages (although it may show others) until the page is reloaded by the user. If this is correct, then the 'title' message must explain this =very= clearly, so that even someone with less programming experience than myself (several years with JavaScript alone) will understand. What is the =exact= wording of the message that will be displayed?

https://hg.mozilla.org/mozilla-central/rev/4b5fb6e4c7f9

Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox70: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

I notice that this bug has been resolved. Yet there has been no public review of the exact changes made. I protest. This is not good procedure. Bug fixes should not be approved automatically, without review.

The patch was reviewed in https://phabricator.services.mozilla.com/D44118... Or do you mean some other kind of review?

QA Whiteboard: [qa-70b-p2]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: