1096575 - Remote DOM inspector causes black bars on device

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Michael Henretty [:mikehenrty][:mhenretty]]

Attachment: [screenshot] black bars

Using the 11/10/2014 build of nightly/webIDE, whenever I try to use the web inspector with my flame, I see a black box overlaying the screen. As I hover the mouse over different DOM elements in the WebIDE devtools, the black box sometimes goes away, and sometimes displays css information in plain black text below the box. I couldn't get a screenshot of the text, since it goes away when I'm not hovering over the devtools. Note: I can still interact with the device normally, but the bars make it hard to see what is going on.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Patrick, can you take a look?  This sounds related to your highlighter work.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Michael, what build of Gaia and Gecko do you have on device?

Comment 3

[Michael Henretty [:mikehenrty][:mhenretty]]

BuildID: 20141110040206
Gaia: c77f139ec97265a8b850dac2b6904f6bfc1d8902

Comment 4

[Patrick Brosset <:pbro>]

(In reply to Michael Henretty [:mhenretty] from comment #0)
> Created attachment 8520186 [details]
> [screenshot] black bars
> 
> Using the 11/10/2014 build of nightly/webIDE, whenever I try to use the web
> inspector with my flame, I see a black box overlaying the screen. As I hover
> the mouse over different DOM elements in the WebIDE devtools, the black box
> sometimes goes away, and sometimes displays css information in plain black
> text below the box. I couldn't get a screenshot of the text, since it goes
> away when I'm not hovering over the devtools. Note: I can still interact
> with the device normally, but the bars make it hard to see what is going on.
This looks like the CSS for the highlighter hasn't been properly loaded . I'm currently updating my device to check this out.

Comment 5

[Patrick Brosset <:pbro>]

Confirmed locally, the CSS is missing completely :(
I think the last time I tested on a B2G device was before I changed the way the css gets loaded.

The highlighter.css gets loaded thanks to the |installHelperSheet| function (http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/highlighter.js#1550) which is also the function we use for loading the CSS required for the simple outline highlighter (and I know this one works because that's the highlighter which has been used up until now on B2G).

The CSS that gets loaded is http://mxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/highlighter.js#439 so either that |@import| rule is failing or the actual CSS code itself isn't working on B2G (for info, this CSS relies on the new :-moz-native-anonymous pseudo-class added recently as seen here http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/highlighter.css?force=1#16).

Comment 6

[Patrick Brosset <:pbro>]

After talking to jryans, I realized that the css file being in /browser/ means that it never gets to B2G (or any other app). That file should be in /toolkit/ instead to be shared.
This used to work when the css code was in ua.css, but I moved it to its own file before landing the new highlighter.

Comment 8

[Patrick Brosset <:pbro>]

Attachment: bug1096575-missing-highlighter-css-on-b2g v1.patch

This patch moves highlighter.css to toolkit/content so that it is available in other apps too.
jryans: not sure who to ping for review for this.

Comment 9

[Patrick Brosset <:pbro>]

I have tested this on my peak device by updating omni.ja on the device. I'll properly re-build b2g with this patch too, to make sure this works fine.
Inspector devtools tests passed fine locally. Here's also a try build: https://treeherder.mozilla.org/ui/#/jobs?repo=try&revision=d355d42b770a

Comment 11

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8520922 [details] [diff] [review]
bug1096575-missing-highlighter-css-on-b2g v1.patch

Review of attachment 8520922 [details] [diff] [review]:
-----------------------------------------------------------------

Seems generally okay to me, but flagging Mossop as a toolkit reviewer in case some other name or file placement would preferred.

Comment 12

[Patrick Brosset <:pbro>]

Ok, just confirmed that the fix works fine after building B2G with the patch applied.

Comment 13

[Patrick Brosset <:pbro>]

Comment on attachment 8520922 [details] [diff] [review]
bug1096575-missing-highlighter-css-on-b2g v1.patch

Paolo has agreed to take a look at this after we discuss about the highlighter. Flagging him for review instead.

Comment 14

[Patrick Brosset <:pbro>]

Attachment: bug1096575-missing-highlighter-css-on-b2g v2.patch

Hi Paolo, after our discussion on IRC, I tried moving the highlighter.css file to toolkit/devtools/server/actors and loading it using a resource: URI, but that didn't work because the loader using in toolkit/devtools/Loader.jsm is JS loader only. The CSS file didn't get referenced.

Here's a patch with a different approach: the file is in toolkit/devtools/ (we don't have other devtools css files in toolkit for now, so it seemed weird to create a directory just for this one file), and I've added a jar.mn file that references it.

Comment 15

[Patrick Brosset <:pbro>]

Attachment: bug1096575-missing-highlighter-css-on-b2g v3.patch

Sorry, forgot to remove an unrelated change.

Comment 16

[:Paolo Amadini]

(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #14)
> Hi Paolo, after our discussion on IRC, I tried moving the highlighter.css
> file to toolkit/devtools/server/actors and loading it using a resource: URI,
> but that didn't work because the loader using in toolkit/devtools/Loader.jsm
> is JS loader only. The CSS file didn't get referenced.

Did you try adding the file to the EXTRA_JS_MODULES in moz.build, like "menu.css"?

Comment 18

[Patrick Brosset <:pbro>]

Attachment: bug1096575-missing-highlighter-css-on-b2g v4.patch

Indeed, this makes the patch simpler.

Comment 19

[Patrick Brosset <:pbro>]

I tested this new patch on a B2G device, it works fine.

Comment 20

[:Paolo Amadini]

Comment on attachment 8522285 [details] [diff] [review]
bug1096575-missing-highlighter-css-on-b2g v4.patch

Review of attachment 8522285 [details] [diff] [review]:
-----------------------------------------------------------------

Okay, since we discussed placing the CSS file as close as possible to the file that includes it, I suggest one change:

::: toolkit/devtools/moz.build
@@ +40,5 @@
>  
>  EXTRA_JS_MODULES.devtools += [
>      'Console.jsm',
>      'DevToolsUtils.jsm',
> +    'highlighter.css',

You can probably place the highlighter.css file closer to highlighter.js, by placing it in the server's moz.build file under this section:

EXTRA_JS_MODULES.devtools.server.actors

And adjust the URI accordingly.

Comment 21

[Patrick Brosset <:pbro>]

Attachment: bug1096575-missing-highlighter-css-on-b2g v5.patch

Thanks Paolo for the quick review!
Here's a new patch with the file closer to highlighter.js now.

Pushed to fx-team: https://hg.mozilla.org/integration/fx-team/rev/2cb38f509731

Comment 22

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/2cb38f509731