469391 - Fix seizure-inducing flicker when inspector is hovered on element boundaries

Status: VERIFIED FIXED

(Testing Graveyard :: Mozmill, defect)

Description

[Tracy Walker [:tracy]]

MozMill with the Inspector enable goes into wicked flickering when mousing over boundaries of various elements.  

STR:
1) Open the default Firefox start page.  anything will work actually even inside MozMill interface.

2) slowly move the mouse around until you're hovering over the edge of an element

Tested results:
The outline of the elements vying for attention flicker back and forth and the UI in MozMill UI of inspector and View pane allows dance in attempt to report the element data for both elements

Expected results:  no seizure inducing flickering in either app content outlining nor in the MozMill UI.

Comment 1

[Adam Christian]

For the elements that would flicker, I am now not outlining them in blue and instead just displaying the locator.. everything else will be outlined as usual. If people could give this a try and let me know if it's better that would be helpful.

Comment 2

[Mikeal Rogers [:mikeal] (mrogers@)]

Is this fixed?

Comment 3

[Adam Christian]

Haven't had any complains since I checked in this code, so I am assuming the solution did the trick.. go ahead and mark this fixed.

Comment 4

[Henrik Skupin [:whimboo][⌚️UTC+1]]

It flickers heavily while hovering over the tab buttons beneath the inspector output, e.g. the Event button. Further the lines are moving some pixels while hovering over the output pane.

I believe that the output pane shouldn't be automatically resized. Can't we give it a fixed height and show scroll bars if needed?

Comment 5

[Henrik Skupin [:whimboo][⌚️UTC+1]]

To avoid flickering on webpages we should use outline instead of border. Outline doesn't add extra pixels around the element. inspectElement in inspection.js should be changed to following code:

  //Element hilighting
  if (e.type == "mouseover"){
    try {
      if (this.lastEvent){
        this.lastEvent.target.style.outline = "";
      }
      this.lastEvent = e;
      e.target.style.outline = "1px solid darkblue";
    } catch(err){}
  }
  else { e.target.style.outline = ""; }

Comment 6

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Attachment: [checked-in] Patch for border issue

This will fix the elements jumping issue on websites and for browser chrome.

Comment 7

[Adam Christian]

This worked like a charm, thanks so much Henrik, I had no idea the outline property even existed. Checked into trunk and tested.

Comment 8

[Henrik Skupin [:whimboo][⌚️UTC+1]]

You are welcome! Adam, can you take the review request and close this bug as fixed? Or are there any other issues to resolve?

I should file a new bug for the inspector output flickering, right?

Comment 9

[Adam Christian]

I actually don't have access to close this, can someone look into that? I'm not sure I can take the review request without access either. Yes I would file another bug for output flickering. Thanks again.

Comment 10

[Mikeal Rogers [:mikeal] (mrogers@)]

Fixed :)

Comment 11

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Comment on attachment 355656 [details] [diff] [review]
[checked-in] Patch for border issue

Seems like we don't need the request any longer.

Comment 12

[Henrik Skupin [:whimboo][⌚️UTC+1]]

(In reply to comment #9)
> sure I can take the review request without access either. Yes I would file
> another bug for output flickering. Thanks again.

Filed as bug 472453.

Comment 13

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Works sweet! Verified.