Closed Bug 1594359 Opened 4 years ago Closed 4 years ago

DevTools can be shrinked past the point it's no longer visible

Categories

(DevTools :: General, defect, P2)

defect

Tracking

(firefox-esr68 unaffected, firefox70 unaffected, firefox71 verified, firefox72 verified)

VERIFIED FIXED
Firefox 72
Tracking Status
firefox-esr68 --- unaffected
firefox70 --- unaffected
firefox71 --- verified
firefox72 --- verified

People

(Reporter: cfogel, Assigned: ghagrawal17)

References

(Regression)

Details

(Keywords: good-first-bug, regression, Whiteboard: [lang=css])

Attachments

(2 files, 1 obsolete file)

Attached image DTsize.gif

Affected versions

  • 71.0b6, 72.0a1 (2019-11-05)

Affected platforms

  • Windows 10, macOS 10.13, Ubuntu 18.04;

Steps to reproduce

  1. Launch Firefox, open the DevTools inspector;
  2. Grab the header_edge for the DevTools and re-size it to the min_value;

Expected result

  • min_size properties don't allow for the tool to shrink past the point it's no longer visible;

Actual result

  • exact the oposite;

Regression range

Additional notes

  • 70.0.1 not affected;
  • attached recording with the issue;
  • if docking to Left/Right DevTools do not have this issue;
  • on macOS the issue makes it so if the user attempts to drag back up the inspector it's no longer possible, instead the browser is resized.

Hi :Nika, mind taking a look?
It appears your patch may have caused this.

Has Regression Range: --- → yes
Has STR: --- → yes
Flags: needinfo?(nika)

I tested on Firefox 70 and Firefox 71, and the difference I see is on 70 (before the regression), you can make the toolbox as small as ~20px, which leaves only a little bit of the toolbar visible. But at least you can grab it again and make it bigger.
On 71 (after the regression), you can make the toolbox totally invisible. Grabbing it again after that is really hard.
It's also not recoverable, because it persists its size after you re-open the toolbox.

Component: CSS and Themes → General
Priority: -- → P2
Regressed by: 1581925

We used to rely on an <iframe> element which has a min-height coming from global.css:

xul|iframe {
  border: none;
  width: 100px;
  height: 100px;
  min-width: 10px;
  min-height: 10px;
}

https://searchfox.org/mozilla-central/rev/8b7aa8af652f87d39349067a5bc9c0256bf6dedc/toolkit/themes/osx/global/global.css#67-71

We now use a <browser> element, so we need to set a min height "manually".

Flags: needinfo?(nika)

Some notes if anyone wants to fix this:

The DevTools toolbar height is 29px, so that could be a good value to use.
To set it you can either do it from devtools-browser.css, which is the only DevTools stylesheet loaded in the browser window. Either target .devtools-toolbox-bottom-iframe explicitly or create a new class applied to all host types. Or you can set it in JS when we create the browser element https://searchfox.org/mozilla-central/rev/8b7aa8af652f87d39349067a5bc9c0256bf6dedc/devtools/client/framework/toolbox-hosts.js#436

Keywords: good-first-bug
Whiteboard: [lang=css]

Hey! I would like to give this a try.

Hi Harshil!

Thanks for offering to work on this, I am assigning the bug to you.
You can read our documentation on https://firefox-dev.tools/ and https://docs.firefox-dev.tools/.
It should have everything you need to get started.

I added some pointers in comment #4.
Feel free to ping if you need help, either here using the "Request information" box below, or on Slack.

Assignee: nobody → ghagrawal17
Status: NEW → ASSIGNED

In the devtools-browser.css file the min-height is set to 29px to the class .devtools-toolboc-bottom-iframe

The comment has been added and spaces for the indentation is correctes

Pushed by apavel@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/912ee67e3cf2
Fix DevTools shrink height r=jdescottes
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72

Comment on attachment 9107082 [details]
Bug 1594359 - Fix DevTools shrink height

Beta/Release Uplift Approval Request

  • User impact if declined: users can resize devtools (when docked to bottom) until they disappear, potentially losing access to the tools.
  • Is this code covered by automated tests?: No
  • Has the fix been verified in Nightly?: No
  • Needs manual test from QE?: No
  • If yes, steps to reproduce:
  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Simple CSS fix, just setting a hardcoded minimum height
  • String changes made/needed:
Attachment #9107082 - Flags: approval-mozilla-beta?
Attachment #9107237 - Flags: approval-mozilla-beta?

Comment on attachment 9107082 [details]
Bug 1594359 - Fix DevTools shrink height

Simple CSS fix for a 71 devtools regression, uplift approved for 71 beta 10, thanks.

Attachment #9107082 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Attachment #9107237 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

Pascal, sorry I missed the fact that Attachment #9107237 [details] was also checked for beta!
We only want Attachment #9107082 [details] here. The other one was "abandoned", but I forgot to mark it as such.

Flags: needinfo?(pascalc)
Attachment #9107237 - Attachment is obsolete: true
Flags: needinfo?(pascalc)
Attachment #9107237 - Flags: approval-mozilla-beta+

Fix verified with 71.0b11, 72.0a1 (2019-11-19) .

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.