[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

@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

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

(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 ?

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 !

Pushed by jodvarko@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/7f3e2d8c9991 Fix overlapped labels; r=nchevobbe

Hi Honza, Since this bug also affects 58, do you think it's worth uplifting to 58 if this patch is not too risky?

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

I confirm that 59.0b3 build2 (20180122192913) is verified fixed across platforms (Windows 10 x64, macOS 10.13.2, Ubuntu 16.04 x64).