1219801 - The toolbar in the memory panel on Windows is not looking too nice

Status: RESOLVED FIXED

(DevTools :: Memory, defect)

Description

[Patrick Brosset <:pbro>]

Attachment: memory-toolbar.png

In particular, the select and input elements aren't properly vertically aligned with their labels.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: toolbar-new.png

Things have a moved around a little bit over the week end. I just updated my fx-team repo and here's what I'm seeing.
The vertical-alignment of labels is still off a bit. And now the drop-down is a bit too high.

Apparently the <div> that contains the "group by", "invert", "stacks" controls is absolutely positioned now, while it was flex before. This seems to make harder to position correctly. I think it would work better in flex.
I think it was changed to absolute so that it would start only at var(--sidebar-width) pixels from the left side.

I think this would work better:

.devtools-toolbar .devtools-button.take-snapshot {
	-moz-appearance: none;
	margin-inline-start: 1px;
	margin-inline-end: calc(var(--sidebar-width) - 32px);
}

.devtools-toolbar .toolbar-group {
	display: flex;
}

.toolbar-group > label {
	margin-inline-end: 5px;
	display: flex;
	align-items: center;
}

Comment 2

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

Bug 1213100

Comment 3

[Patrick Brosset <:pbro>]

Attachment: memory-toolbar-1213100.png

With the last patch in bug 1213100, here's what the toolbar looks like.
It's a little better, but we still need better vertical alignment.

Comment 5

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

Attachment: v1

Comment 6

[Brian Grinstead [:bgrins]]

Comment on attachment 8682529 [details] [diff] [review]
v1

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

This fixes the alignment issues, thanks!  Please update the commit message to be more descriptive of the fix.

I keep accidentally selecting the label text when double clicking on a label so maybe we want to do some -moz-user-select magic there, but we could do that in another bug

Comment 7

[Pulsebot]

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

Comment 8

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/641ee9698183