1593602 - Netmonitor Search: loading indicator hidden by label overflow (macos)

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Attachment: netmonitor_loading_indicator_invisible.mp4

Was trying to verify a fix from Bug 1593542, and I couldn't see the loading indicator, supposed to be displayed when you perform a search. Turns out it's hidden by the textoverflow of the label that contains it.

.search-panel .status-bar-label {
  min-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  min-width: 85px;
}

https://searchfox.org/mozilla-central/rev/35873cfc312a6285f54aa5e4ec2d4ab911157522/devtools/client/netmonitor/src/assets/styles/search.css#124-131

I used a slightly modified version of netmonitor that is always in status "fetching" to highlight the issue.

As you can see in the very beginning, after clicking on the search icon, the loading indicator is visible, but as soon as the mouse moves, it gets hidden and an additional ellipsis appears after the search label.

I tested on macos, not sure if this is platform specific.

Comment 1

[Itiel]

FWIW I can't reproduce on Windows.

Comment 2

[Julian Descottes [:jdescottes]]

(In reply to Itiel from comment #1)

FWIW I can't reproduce on Windows.

Just to make sure: if you are on a RTL build, you need your fixes from Bug 1593542 to see the issue :)

Comment 3

[Itiel]

(In reply to Julian Descottes [:jdescottes] from comment #2)

(In reply to Itiel from comment #1)

FWIW I can't reproduce on Windows.

Just to make sure: if you are on a RTL build, you need your fixes from Bug 1593542 to see the issue :)

I'm on LTR and still can't reproduce (without the patch included though, but I don't think this matters). Still on Windows.

Comment 4

[Julian Descottes [:jdescottes]]

(In reply to Itiel from comment #3)

I'm on LTR and still can't reproduce (without the patch included though, but I don't think this matters). Still on Windows.

Correct, thanks for checking. Going to mark as macos only.

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Lloan, is this simple to fix?

Honza

Comment 6

[lloan alas:[lloanalas]]

@Honza,

I can take a look at this and see if I can get a fix. However, if its a Mac OS issue, I have April who can help out with that as well. I'll check in a day or so.

Thanks for letting me know!

Comment 7

[abowler]

@lloanalas and @Honza

I'd be happy to help out on this. I'll take a look and see what I can do. ~ Thanks.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to abowler2 from comment #7)

I'd be happy to help out on this. I'll take a look and see what I can do. ~ Thanks.

Awesome, thanks!
Honza

Comment 9

[abowler]

Attachment: Screen Shot of title value (macOS)

It looks as though the title is already being passed in with an ellipsis (as per the screen shot attached).

If I remove the CSS for adding the ellipsis (text-overflow, overflow, and white-space) it works as expected, but I'm not sure what effect this will have on a Windows OS.

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thanks for the analysis!

Btw. I can reproduce that on Windows at this moment

I think that text-overflow: ellipsis; should be there since it's also used for the final text that's displayed when the search finishes. This text can be quite long and doesn't have to fit the available horizontal space (when the side Search panel is narrow).

So, let's keep the ellipsis and increase the min-width of the label to 150px

https://searchfox.org/mozilla-central/rev/652014ca1183c56bc5f04daf01af180d4e50a91c/devtools/client/netmonitor/src/assets/styles/search.css#130

Please post the patch to phabricator for review
https://docs.firefox-dev.tools/contributing/code-reviews-setup.html

Honza

Comment 11

[abowler]

Attachment: Bug 1593602 - Netmonitor Search: updated min-width to keep loading indicator for being hidden, r=honza

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/426df2f3f4a8
Netmonitor Search: updated min-width to keep loading indicator for being hidden, r=Honza

Comment 13

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/426df2f3f4a8

Comment 14

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Comment on attachment 9110241 [details]
Bug 1593602 - Netmonitor Search: updated min-width to keep loading indicator for being hidden, r=honza

Beta/Release Uplift Approval Request

• User impact if declined: Searching label not fully visible
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• 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): Just for developers
  Only one line CSS change
• String changes made/needed:

Comment 15

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9110241 [details]
Bug 1593602 - Netmonitor Search: updated min-width to keep loading indicator for being hidden, r=honza

Polish, uplift approved for the beta branch before RC.

Comment 16

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/releases/mozilla-beta/rev/7bd0303200aa