Remote DOM inspector causes black bars on device

RESOLVED FIXED in Firefox 36

Status

defect
RESOLVED FIXED
5 years ago
Last year

People

(Reporter: mikehenrty, Assigned: pbro)

Tracking

({regression})

Trunk
Firefox 36
All
macOS
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 4 obsolete attachments)

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.
Patrick, can you take a look?  This sounds related to your highlighter work.
Component: Developer Tools: WebIDE → Developer Tools: Inspector
Flags: needinfo?(pbrosset)
Michael, what build of Gaia and Gecko do you have on device?
Flags: needinfo?(mhenretty)
BuildID: 20141110040206
Gaia: c77f139ec97265a8b850dac2b6904f6bfc1d8902
Flags: needinfo?(mhenretty)
Assignee

Comment 4

5 years ago
(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.
Flags: needinfo?(pbrosset)
Assignee

Comment 5

5 years ago
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).
Assignee

Comment 6

5 years ago
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.
Assignee

Updated

5 years ago
Assignee: nobody → pbrosset
Duplicate of this bug: 1097123
Summary: WebIDE DOM inspector causes black bars on device → Remote DOM inspector causes black bars on device
Assignee

Comment 8

5 years ago
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.
Attachment #8520922 - Flags: review?(jryans)
Assignee

Comment 9

5 years ago
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
No longer blocks: 1097145
Duplicate of this bug: 1097145
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.
Attachment #8520922 - Flags: review?(jryans)
Attachment #8520922 - Flags: review?(dtownsend+bugmail)
Attachment #8520922 - Flags: feedback+
Assignee

Comment 12

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

Comment 13

5 years ago
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.
Attachment #8520922 - Flags: review?(dtownsend+bugmail) → review?(paolo.mozmail)
Assignee

Comment 14

5 years ago
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.
Attachment #8520922 - Attachment is obsolete: true
Attachment #8520922 - Flags: review?(paolo.mozmail)
Attachment #8522229 - Flags: review?(paolo.mozmail)
Assignee

Comment 15

5 years ago
Sorry, forgot to remove an unrelated change.
Attachment #8522229 - Attachment is obsolete: true
Attachment #8522229 - Flags: review?(paolo.mozmail)
Attachment #8522231 - Flags: review?(paolo.mozmail)

Comment 16

5 years ago
(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"?

Updated

5 years ago
Duplicate of this bug: 1098381
Assignee

Comment 18

5 years ago
Indeed, this makes the patch simpler.
Attachment #8522231 - Attachment is obsolete: true
Attachment #8522231 - Flags: review?(paolo.mozmail)
Attachment #8522285 - Flags: review?(paolo.mozmail)
Assignee

Comment 19

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

Comment 20

5 years ago
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.
Attachment #8522285 - Flags: review?(paolo.mozmail) → review+
Assignee

Comment 21

5 years ago
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
Attachment #8522285 - Attachment is obsolete: true
Attachment #8522344 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/2cb38f509731
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 36
Duplicate of this bug: 1100898

Updated

Last year
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.