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

RESOLVED FIXED in Firefox 45

Status

()

Firefox
Developer Tools: Memory
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: pbro, Assigned: vporof)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 45
Unspecified
Windows 10
Points:
---

Firefox Tracking Flags

(firefox44 affected, firefox45 fixed)

Details

Attachments

(4 attachments)

(Reporter)

Description

2 years ago
Created attachment 8680685 [details]
memory-toolbar.png

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

Updated

2 years ago
OS: Unspecified → Windows 10
Blocks: 1195323
(Reporter)

Comment 1

2 years ago
Created attachment 8681829 [details]
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;
}
(Assignee)

Comment 2

2 years ago
Bug 1213100
(Reporter)

Comment 3

2 years ago
Created attachment 8681961 [details]
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.
(Assignee)

Updated

2 years ago
Assignee: nobody → vporof
Status: NEW → ASSIGNED
QA Contact: vporof
(Reporter)

Updated

2 years ago
Duplicate of this bug: 1220636
(Assignee)

Comment 5

2 years ago
Created attachment 8682529 [details] [diff] [review]
v1
Attachment #8682529 - Flags: review?(bgrinstead)
No longer blocks: 1195323
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
Attachment #8682529 - Flags: review?(bgrinstead) → review+
Has STR: --- → yes

Comment 8

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/641ee9698183
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
status-firefox45: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 45
status-firefox44: --- → affected
You need to log in before you can comment on or make changes to this bug.