1390727 - Add a consistent style for all the no result messages in the Inspector

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

We currently display "no result" messages like "No element selected.", "No CSS properties found.", "CSS Grid is not in use on this page" in the inspector side panels. We should style them consistently similar to debugger.html

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1390727 - Add a consistent style for all the no result messages in the Inspector sidepanel.

Review commit: https://reviewboard.mozilla.org/r/168974/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/168974/

Comment 2

[Brian Grinstead [:bgrins]]

Comment on attachment 8897692 [details]
Bug 1390727 - Add a consistent style for all the no result messages in the Inspector sidepanel.

https://reviewboard.mozilla.org/r/168974/#review174554

Nice! Please respond one way or another to the comment about renaming the class before landing

::: devtools/client/themes/common.css:692
(Diff revision 1)
>    background-position: center;
>  }
> +
> +/* No result message styles */
> +
> +.devtools-sidepanel-no-result {

I'm not sure we should include 'sidepanel' in this class name. That implies where the message will show up, but I could imagine showing a similar message in other tools in the main area (i.e. netmonitor or console).

Rename to `.devtools-no-result`?

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Brian Grinstead [:bgrins] from comment #2)
> Comment on attachment 8897692 [details]
> Bug 1390727 - Add a consistent style for all the no result messages in the
> Inspector sidepanel.
> 
> https://reviewboard.mozilla.org/r/168974/#review174554
> 
> Nice! Please respond one way or another to the comment about renaming the
> class before landing
> 
> ::: devtools/client/themes/common.css:692
> (Diff revision 1)
> >    background-position: center;
> >  }
> > +
> > +/* No result message styles */
> > +
> > +.devtools-sidepanel-no-result {
> 
> I'm not sure we should include 'sidepanel' in this class name. That implies
> where the message will show up, but I could imagine showing a similar
> message in other tools in the main area (i.e. netmonitor or console).
> 
> Rename to `.devtools-no-result`?

I did anticipate that we would have to style something similar for the main area for the netmonitor and other tools. I found that there were no consistencies between how the main area was styled and typically the font and padding is much bigger. This is why I included 'sidepanel' so that we know this style should be used for all sidepanels. I expect the no result styling for the main areas to be different. For now, I am gonna leave the 'sidepanel' in the class name.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/85d411f74b49
Add a consistent style for all the no result messages in the inspector sidepanel. r=bgrins

Comment 5

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/85d411f74b49