1254454 - Arrow twisties disappear in narrow window

Status: RESOLVED FIXED

(DevTools :: Memory, defect, P2)

Description

[magicp]

Attachment: devtools-memory-do-not-hide-twisties.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160307063917

Steps to reproduce:

1. Start Nightly
2. Open DevTools > Memory
3. Switch view to "Dominators" (or "Aggregate", Dominators view is easy for reproduce)
4. Take snapshot
5. Narrowing heap-view


Actual results:

Twisties are hidden.


Expected results:

Don't hide twisties in narrow window.

Comment 1

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

This is not intentional, and I have tried fixing this multiple times (clearly I am terrible with CSS). I mentioned this issue in another bug, but can't remember which one... Yes, *very* annoying!

Ah, here is the bug: bug 1248891

Will turn this bug into the arrow issue, let that bug be about the table cells.

Comment 2

[magicp]

Probably this issue will be solved, if overflow property is removed. And Bug 1254458 also.

memory.css line:464

.heap-tree-number,
.heap-tree-percent,
.heap-tree-item-name {
  white-space: nowrap;
-  overflow: hidden;
}

Comment 3

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: Fix disappearing arrow twisties in memory tool when narrow

Comment 4

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Attachment: arrows.gif

This demonstrates how the arrows do not disappear anymore with this patch applied.

Thanks magicp!

Comment 5

[Victor Porof [:vporof][:vp]]

Comment on attachment 8728508 [details] [diff] [review]
Fix disappearing arrow twisties in memory tool when narrow

Review of attachment 8728508 [details] [diff] [review]:
-----------------------------------------------------------------

r+ but see below.

::: devtools/client/themes/memory.css
@@ -452,5 @@
>  .heap-tree-number,
>  .heap-tree-percent,
>  .heap-tree-item-name {
>    white-space: nowrap;
> -  overflow: hidden;

This doesn't take care of the toolbox itself resizing, and the table will start overflowing horizontally in that case, and a scrollbar will appear. This might be ok, but if not desirable, a better fix would be making only these changes:

.heap-tree-item-field.heap-tree-item-name > .theme-twisty {
  min-width: 14px; /* this used to be only `width: 14px` in dark/light-theme.css */
}

.heap-tree-item-field.heap-tree-item-name > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

Comment 6

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

Thanks, Victor!

We have another bug open for making horizontal scrolling work better. We do want to be able to scroll deeply nested things into view, rather than hide them behind ellipses.

Comment 7

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/d0c962286d13

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/d0c962286d13