elfgoh Reporter
	Description • 8 years ago

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

	Patrick Brosset <:pbro>
	Comment 1 • 8 years ago

P1 since this sounds pretty serious, but this needs to be confirmed.

	elfgoh Reporter
	Comment 2 • 8 years ago

Sorr

	elfgoh Reporter
	Comment 3 • 8 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

	Julian Descottes [:jdescottes] Assignee
	Comment 4 • 8 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!

	elfgoh Reporter
	Comment 5 • 8 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

	elfgoh Reporter
	Comment 6 • 8 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

	Julian Descottes [:jdescottes] Assignee
	Comment 7 • 8 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.

	Julian Descottes [:jdescottes] Assignee
	Comment 8 • 8 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...

	Alfred Kayser
	Comment 9 • 8 years 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?

	Julian Descottes [:jdescottes] Assignee
	Comment 10 • 8 years 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.

	elfgoh Reporter
	Comment 11 • 8 years ago

Littlefox is also 3.6 for me

	Alfred Kayser
	Comment 12 • 8 years ago

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?

	Patrick Brosset <:pbro>
	Comment 13 • 8 years ago

(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

	Alfred Kayser
	Comment 14 • 8 years 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.

	Julian Descottes [:jdescottes] Assignee
	Comment 15 • 8 years 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