Closed Bug 1399125 Opened 2 years ago Closed 2 years ago

The hidden messages label is overlapping the log persistence label for a certain console width interval

Categories

(DevTools :: Console, defect, P1)

57 Branch
defect

Tracking

(firefox57 wontfix, firefox58 wontfix, firefox59 verified)

VERIFIED FIXED
Firefox 59
Tracking Status
firefox57 --- wontfix
firefox58 --- wontfix
firefox59 --- verified

People

(Reporter: JuliaC, Assigned: Honza)

References

Details

(Whiteboard: [reserve-console-html])

Attachments

(2 files)

[Note]:
- see https://bugzilla.mozilla.org/show_bug.cgi?id=1307881#c37

[Affected versions]:
- 57.0a1 (2017-09-12)

[Affected platforms]:
- Windows 10 x64
- Ubuntu 16.04 x64
- Mac OS X 10.11.6

[Steps to reproduce]:
1. Launch Firefox
2. Navigate to a random page (e.g. https://www.mozilla.org/en-US/) 
3. Open the Console 
4. Open the filter bar and disable all the filters (in order to have the hidden messages UI displayed)
5. Gradually decrease the console width and inspect the Persist Logs UI

[Expected result]:
- A blur effect is applied for the overlapped label (like is done in the main tools tabs case - Inspector, Console, Debugger etc.)
or
- The hidden messages label and the "Reset filters" button are moved down to the second row at the right console width value, so the labels overlapping is avoided 

[Actual result]:
- For a certain console width interval, the hidden messages label is overlapping the log persistence label and no blur effect is applied (see the screencast https://goo.gl/QBCrSF) 

[Regression range]:
- The issue is not a regression, since it's reproducible all the way back to 57.0a1 (2017-09-01), when bug 1307881 was implemented 

[Additional notes]:
- It takes place when console has the default position, when is docked on the side of the browser window and when is displayed in a separate window
Whiteboard: [console-html]
Flags: qe-verify+
Priority: -- → P3
Whiteboard: [console-html] → [reserve-console-html]
Assignee: nobody → odvarko
Status: NEW → ASSIGNED
Attached image console-toolbar.png
@Nicolas, I fixed the overlapping labels and also vertically centered all three labels: 
- `Persist Logs` checkbox
- label for hidden items
- `Reset filters` button

I am also attaching a screenshot showing wrong centering before and new layout with the patch applied. Note that all three texts are using the same baseline.

Honza
Priority: P3 → P1
Comment on attachment 8926845 [details]
Bug 1399125 - Fix overlapped labels;

https://reviewboard.mozilla.org/r/198092/#review203376

::: devtools/client/themes/webconsole.css:832
(Diff revision 1)
>  
>  .webconsole-filterbar-primary {
>    display: flex;
> -  /* We want the toolbar (which contain the text search input) to be at least 200px
> +  /* We want the toolbar (which contain the text search input) to be at least 300px
>    so we don't allow to shrink it */
> -  flex: 100 0 200px;
> +  flex: 100 0 300px;

mh, could there be locale where the bug still happens because the text is longer ?
I don't think this meets the criteria to uplift for Firefox 57 given how close we are to release.
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)
> mh, could there be locale where the bug still happens because the text is
> longer ?
I guess. Do you think we should make the width even bigger?

Honza
Flags: needinfo?(nchevobbe)
(In reply to Jan Honza Odvarko [:Honza] from comment #5)
> (In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)
> > mh, could there be locale where the bug still happens because the text is
> > longer ?
> I guess. Do you think we should make the width even bigger?
> 
> Honza

Can we do something without putting an explicit width ?
Flags: needinfo?(nchevobbe)
You are right and I think it's better now,
-moz-fit-content should do the trick.

Honza
Comment on attachment 8926845 [details]
Bug 1399125 - Fix overlapped labels;

https://reviewboard.mozilla.org/r/198092/#review204210

This looks good (I made some changes to the "X items hidden" and it holds up :) )
Thanks Honza !
Attachment #8926845 - Flags: review?(nchevobbe) → review+
https://hg.mozilla.org/mozilla-central/rev/7f3e2d8c9991
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
Hi Honza,
Since this bug also affects 58, do you think it's worth uplifting to 58 if this patch is not too risky?
Flags: needinfo?(odvarko)
Mass won't fix for 58. Let it ride the train.
(In reply to Gerry Chang [:gchang] from comment #12)
> Hi Honza,
> Since this bug also affects 58, do you think it's worth uplifting to 58 if
> this patch is not too risky?
So, I guess no (according to the comment # 13)

Honza
Flags: needinfo?(odvarko)
I confirm that 59.0b3 build2 (20180122192913) is verified fixed across platforms (Windows 10 x64, macOS 10.13.2, Ubuntu 16.04 x64).
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.