Open Bug 1327247 Opened 7 years ago Updated 2 years ago

Box model blinks (disappears and appears again) when I filter rules in computed view

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(Not tracked)

People

(Reporter: arni2033, Unassigned)

References

Details

(Keywords: regression) 

>>>   My Info:   Win7_64, Nightly 52, 32bit, ID 20161028030204 (2016-10-28)
Don't test STR 1-3 too much; check them once STR_4 and STR_5 are fixed.

>>>
STR_1:  (original)
1. Open url http://www.fontanka.ru/2016/10/28/140/
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Wait 3 seconds

AR:  Box model disappears after Step 2, and appears after Step 3. Often it causes twitching of content
ER:  Either X or Y
 X) Box model should always stay visible, just like before bug 1247729 + bug 1289995
 Y) Box model should hide after Step 2, and don't appear again in Step 3


STR_2:  (resize)
1. Open url http://example.org/
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Resize devtools toolbox


STR_3:  (works w/o JS)
1. Open url https://www.youtube.com/
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Hover mouse over any video in "Trending" section


STR_4:  (testcase 1)
1. Open url   data:text/html,<div><style>div{margin:2px;width:100%;height:100%}div:hover{margin:1px}
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Move mouse to the center of content area


STR_5:  (testcase 2)
1. Open url [1]
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Wait 3 seconds

[1]

data:text/html,<div style="position:absolute;margin-top:20px;width:0.1px">
<script>
D=document.querySelector('div');
setInterval("
    D.style.marginTop='0px';
    setTimeout(`D.style.marginTop='20px'`,1000);
",2000)
</script>

This is regression from bug 1289995. Regression range:
> https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=fc777f42356960dad649f977452d22d05e0154d9&tochange=cb8fe696526cea65b8bbdcb6f62ae0a7c4d13145
No longer blocks: 1277113
Component: Untriaged → Developer Tools: Computed Styles Inspector
Good catch. Searching in the computed-view search field should not hide the box-model diagram.
Gabriel: any guidance for how someone might want to solve this? Maybe this could be a good bug to mentor?
Flags: needinfo?(gl)
Priority: -- → P2
I actually did this in purpose since I didn't want the box model to get in the way when filtering for a computed property.

http://searchfox.org/mozilla-central/source/devtools/client/inspector/components/box-model.js#575
Flags: needinfo?(gl)
This was also discussed with UX at the time and it does make sense to me that when we are filtering the computed view, we don't necessarily want to show the box model view since that is not what is important in this particular context.

Forwarding a needinfo to you pbro to see if you have conflicting opinions, otherwise, I think we should close this bug.
Flags: needinfo?(pbrosset)
Ok, that makes sense to me, but there's still a bug:

STR_2:  (resize)
1. Open url http://example.org/
2. Open devtools -> inspector -> computed view, inspect <body>, type "asdf" in filter in computed view
3. Resize devtools toolbox

The box-model view sometimes re-appear even when it should not because the user has typed something in the filter input.
Flags: needinfo?(pbrosset)
Product: Firefox → DevTools
Component: Inspector: Computed → Inspector
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.