Inspector panes cannot be resized and CSS column occupies excessively large percentage

RESOLVED FIXED

Status

()

Firefox
Developer Tools: Inspector
P2
normal
RESOLVED FIXED
2 years ago
a year ago

People

(Reporter: elfgoh, Assigned: jdescottes)

Tracking

47 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

2 years ago
Created attachment 8751770 [details]
Screen Shot 2016-05-12 at 10.31.35 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160509171155

Steps to reproduce:

Open up inspector


Actual results:

Inspector appears but the panes widths are off and unresizeable


Expected results:

Panes width should be appropriately sized by default and can be resized

Updated

2 years ago
Blocks: 516752
Component: Untriaged → Developer Tools: Inspector

Updated

2 years ago
Blocks: 875871
tracking-e10s: --- → +
P1 since this sounds pretty serious, but this needs to be confirmed.
Priority: -- → P1
(Assignee)

Updated

2 years ago
Assignee: nobody → jdescottes
(Reporter)

Comment 2

2 years ago
Sorr
Summary: [e10s] Inspector panes cannot be resized and CSS column occupies excessively large percentage → Inspector panes cannot be resized and CSS column occupies excessively large percentage
(Reporter)

Comment 3

2 years ago
Sorry. This does not seem to be e10s related. I have disabled e10s and found that the issue is duplicated. Also, changing the theme from littlefox to default theme still duplicates the bug
(Assignee)

Comment 4

2 years ago
Thanks for reporting the issue! 
I can't reproduce it for now, so I'm going to need some more information.

This seems similar to Bug 1243598, which was fixed before Firefox 47 was released. It could be another layout issue we missed, maybe due to the littlefox theme. The page you tried to inspect at that time probably triggered the layout issue. And after you tried to resize the sidebar, the faulty width has been saved so you will have the symptom with all pages, and all themes. 

But it is most likely linked to the page you inspected when you had the bug and potentially to the littlefox theme. 

Some questions that could help narrowing down the problem:
- Did you get the bug right after upgrading to 47.0 ?
- Do you remember the page you were inspecting when you first got the issue?
- Do you remember which inspector sidebar tab was selected at that time (rules, computed, layout etc...)?
- Was this the first time you were opening the inspector for this profile? (asking because in Bug 1243598, the issue only occurred on clean profiles, because the sidebar had no user-defined width)

As a workaround, you can fix your profile by:
- opening about:config
- searching for devtools.toolsidebar-width.inspector 
- (note down the current value, could be interesting)
- change or reset the value (it is a width in pixels)

If this doesn't fix it, can you check if you also have the issue when using a clean profile ? (https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles)

Thanks!
Flags: needinfo?(elfgoh)
See Also: → bug 1243598
(Reporter)

Comment 5

2 years ago
- Did you get the bug right after upgrading to 47.0 ? --> Yes I believe so
- Do you remember the page you were inspecting when you first got the issue? --> Nope
- Do you remember which inspector sidebar tab was selected at that time (rules, computed, layout etc...)? --> I activated it by right click, inspect element. Unsure which is selected
- Was this the first time you were opening the inspector for this profile? (asking because in Bug 1243598, the issue only occurred on clean profiles, because the sidebar had no user-defined width)--> No
(Reporter)

Comment 6

2 years ago
- (note down the current value, could be interesting)-->1996
- change or reset the value (it is a width in pixels --> Changed to widths from range 100 to 1000. The width can now be resized
(Reporter)

Updated

2 years ago
Flags: needinfo?(elfgoh)
(Assignee)

Comment 7

2 years ago
Thanks for the information. I am not sure why you had the issue with an already used profile.

However I can confirm the issue comes from littlefox. The theme does not load the rules we used to fix Bug 1243598.

In littlefox's rules.css file the rule #sidebar-panel-ruleview, #sidebar-panel-computedview, #sidebar-panel-fontinspector, #sidebar-panel-layoutview must be modified to include the fix of Bug 1243598 which is to set:

- height: calc(100% - 24px);
- position: absolute

See https://bug1243598.bmoattachments.org/attachment.cgi?id=8720325
I tested this and it fixes the issue.

Alfred: I think you are the author of the Littlefox theme? We changed how the inspector sidebar panels were included in the inspector. They used to be wrapped in iframes, but it's no longer the case. We fixed some layout issues by updating CSS rules that are not loaded by littlefox. You should probably apply the fix I described above. For information, this was shipped with Firefox 47.
No longer blocks: 516752, 875871
Status: UNCONFIRMED → ASSIGNED
tracking-e10s: + → ---
Ever confirmed: true
Flags: needinfo?(alfredkayser)
Priority: P1 → P2
(Assignee)

Comment 8

2 years ago
Alfred: Seems to impact your other complete themes. You could also mark them as not compatible with FF47+ until this is fixed?  

Patrick: This issue could occur with any complete theme that overrides devtools CSS files? Any advice in this kind of situation? Testing quickly it looks like most complete themes are not customizing devtools CSS but still...
Flags: needinfo?(pbrosset)

Comment 9

a year ago
I can't seem to reproduce this issue with my themes in all current versions of Firefox.
But I will try to apply the proposed patch anyway, and see if that works in environment as well.

B.t.w. which version of Littlefox is this?
Flags: needinfo?(alfredkayser)
(Assignee)

Comment 10

a year ago
Littlefox version is 3.6 for me.

On Firefox 47 or newer, the following STRs should reproduce the issue if you need to test:

- install & enable littlefox
- make sure devtools are closed
- go to "about:config"
- reset devtools.toolsidebar-width.inspector
- open the url "data:text/html,<body style="background:linear-gradient(0deg,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red,red)">Inspect me" 
- Right click on "Inspect me", select Inspect Element
- (devtools inspector should open)
- (if not selected by default) select the "Rules" sidebar tab 

You should get the issue reported here.
(Reporter)

Comment 11

a year ago
Littlefox is also 3.6 for me

Comment 12

a year ago
Created attachment 8753234 [details]
littlefox_20.jar

Can you test if attached version also has this problem?

I am still not able to reproduce, so when I apply the proposed fix I wont not be able to verify the fix.

Is this also happening on Windows? Or is it only on Mac?
(In reply to Julian Descottes [:jdescottes] from comment #8)
> Patrick: This issue could occur with any complete theme that overrides
> devtools CSS files? Any advice in this kind of situation? Testing quickly it
> looks like most complete themes are not customizing devtools CSS but still...
Not sure about any specific thing we could do here. I believe there are very few themes that customize devtools css, so we've never had the case before.
We support 3 native themes (dark, light, firebug) which we make sure to update anytime there are markup or css changes. But beyond that, we don't have any sort of backward compatibility or supported public API that theme can rely on to avoid breaking when things change below.
I'm afraid we're going to have to rely on bugs like this in the future to detect broken custom themes. There's just not enough of them for us to spend time on building a more future-proof customization framework.
I'd love for our CSS theme variables [1] to be enough for customization, but in reality it's not yet the case.

[1] https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/variables.css
Flags: needinfo?(pbrosset)

Comment 14

a year ago
I have included a fix in my themes for this.
These will be uploaded soon to AMO.

I think that should cover this issue.
(Assignee)

Comment 15

a year ago
I assume this was released with littlefox 3.7 [1]. Please re-open if needed.

[1] https://addons.mozilla.org/en-US/firefox/addon/littlefox-for-firefox/versions/?page=1#version-3.7
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.