1260147 - (twitching at startup) Stylesheets in Style Editor sidebar twitch when the last stylesheet is loaded so it's possible to accidentally click wrong button

Status: NEW

(DevTools :: Style Editor, defect, P2)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 48, 32bit, ID 20160326030430
STR:
0. Open new tab, open devtools -> Style Editor
1. Open http://www.thedailybeast.com/ in a new tab. If your PC is fast, repeat Step 1 ten times.
2. Open devtools (F12)
3. While styles are still loading, hover mouse over the bottom of any stylesheet button
4. Wait until all styles are loaded
5. Click left mouse button
 [you can accidentally run into bug 1222991]

AR:
 It's easy to accidentally click wrong button. Read below:

 In Step 3 the spinner first appears at the middle of the left sidebar. Then when
           the first stylesheet appears, and the spinner teleports to the beginning
 In Step 4 the spinner disappears, so all stylesheet buttons twitch to the up by ~20px
 In Step 5 you click wrong stylesheet button. "Wrong" = not the same button as in Step 3
 
 There's sometimes a very small time interval between Step 3 and Step 4 (~0.1s),
 so there's literally no time to stop my finger from clicking the mouse button.
 
ER:
 User should be protected from replacing click target 0.1s before click happens.

Screencast:
> https://dl.dropboxusercontent.com/s/9istwemfqz77ynf/screencast%201%20-%20%28twitching%20at%20startup%29%20Stylesheets%20in%20Style%20Editor%20sidebar.webm?dl=0

Comment 1

[arni2033]

CSS workaround I'm currently using (with extension Stylish):
> .loading .splitview-nav-container .devtools-throbber {-moz-box-ordinal-group: 100!important;}

Comment 2

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).