What does Weinre do to the target DOM when you select an element?

103 views
Skip to first unread message

Tarler

unread,
Sep 17, 2013, 3:30:20 PM9/17/13
to wei...@googlegroups.com
(This is a copy of mail I've just sent to stackoverflow http://stackoverflow.com/questions/18858200/what-does-weinre-do-to-the-target-dom-when-you-select-an-element)

What does Weinre actually do to the target DOM when you select an element with the remote client? It seems to inject code into the target page (e.g. to make the highlights), but sometimes it seems that just interacting with the page with the Weinre client can fix the problem

This has happened with CSS rendering bugs, but has also just happened when my app wasn't responding to touch events. Highlighting elements in the page fixed the problem.

So if I can do what Weinre does, I can perhaps fix - or get a better understanding of - my problems.

Thanks for any insight.

Patrick Mueller

unread,
Sep 17, 2013, 4:33:08 PM9/17/13
to wei...@googlegroups.com
I'm not sure what problems you are having that clicking on elements is fixing for you.

What should be happening is that a message is "sent" from the client to the target (XHR'd to the server from the client, the target will pick it up from an XHR GET messages thang).  Many of these messages are one-way, and don't require a response from the target back to the client - not sure if the "highlight the node" message sends a response or not.

Your problem sounds a bit like the what we used to calls the "wiggly mouse" problem on Windows.  You'd do something dumb in your code, and the UI would stop responding.  Until you moved the mouse a little bit.  And then it would do what it was supposed to, until you stopped moving the mouse, at which point it would stop responding again.  MADDENING!

Does your code exhibit the problem without weinre installed at all?  You can try using the --verbose and --debug flags and maybe something interesting will appear on the server's console.  I'd also try running the target on the desktop, with weinre, and open up Chrome DevTools and see if anything interesting shows up in it's console.

Tarler

unread,
Sep 18, 2013, 4:34:52 AM9/18/13
to wei...@googlegroups.com
Thanks for taking the time to reply

.Your problem sounds a bit like the what we used to calls the "wiggly mouse" problem on Windows.  You'd do something dumb in your code, and the UI would stop responding.  Until you moved the mouse a little bit.  And then it would do what it was supposed to, until you stopped moving the mouse, at which point it would stop responding again.  MADDENING!
I think the issues I'm having are those random CSS/rendering issues which only occur on some builds of some browsers. So I may well be doing something dumb in my CSS but it's the sort of dumb you can get away with most of the time.

Does your code exhibit the problem without weinre installed at all?  
Yes it does. Just to be clear, it's not that Weinre is causing the problem, it's that sometimes it fixes the problem. 

  I'd also try running the target on the desktop, with weinre, and open up Chrome DevTools and see if anything interesting shows up in it's console.
I thought to do this after sending my initial message, and saw that the target page had a weinrehighlighter element added, as below

<weinrehighlighter style="position: absolute; overflow: hidden; border: 0px solid rgba(246, 178, 107, 0.658824); background-color: rgba(255, 255, 153, 0.4); outline: black solid thin; display: block; z-index: 10000000; top: 97px; left: 282px; height: 1500px; width: 150px;"><weinrehighlighter style="position: absolute; display: block; overflow: hidden; border: 0px solid rgba(0, 255, 0, 0.2); background-color: rgba(0, 0, 255, 0.298039); top: 0px; left: 0px; bottom: 0px; right: 0px;"></weinrehighlighter></weinrehighlighter>

So it may be that something about having to render this new element on top of the rest of the page is giving the browser the necessary kick to render stuff correctly.

If I come up with any simple cases to reproduce or solutions to fix them, I will repost here.

Thanks again.

Patrick Mueller

unread,
Sep 18, 2013, 6:06:34 AM9/18/13
to wei...@googlegroups.com


On Wednesday, September 18, 2013 4:34:52 AM UTC-4, Tarler wrote:
I thought to do this after sending my initial message, and saw that the target page had a weinrehighlighter element added, as below

<weinrehighlighter style="position: absolute; overflow: hidden; border: 0px solid rgba(246, 178, 107, 0.658824); background-color: rgba(255, 255, 153, 0.4); outline: black solid thin; display: block; z-index: 10000000; top: 97px; left: 282px; height: 1500px; width: 150px;"><weinrehighlighter style="position: absolute; display: block; overflow: hidden; border: 0px solid rgba(0, 255, 0, 0.2); background-color: rgba(0, 0, 255, 0.298039); top: 0px; left: 0px; bottom: 0px; right: 0px;"></weinrehighlighter></weinrehighlighter>


I was thinking of the JavaScript interaction, but yeah, weinre does add some highlighting elements as well.  It may be that because they use alpha values in background colors, rendering them semi-opaque, that this triggers rendering differently.  You might try adding an alpha value to one of your colors. 
Reply all
Reply to author
Forward
0 new messages