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
P1 since this sounds pretty serious, but this needs to be confirmed.
Priority: -- → P1
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
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
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!
See Also: → 1243598
- 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
- (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
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.
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...
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?
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.
Littlefox is also 3.6 for me
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  to be enough for customization, but in reality it's not yet the case.  https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/variables.css
I have included a fix in my themes for this. These will be uploaded soon to AMO. I think that should cover this issue.
I assume this was released with littlefox 3.7 . Please re-open if needed.  https://addons.mozilla.org/en-US/firefox/addon/littlefox-for-firefox/versions/?page=1#version-3.7
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.