Closed Bug 1482607 Opened 3 years ago Closed 3 years ago

Attachment Pane lost visual demarcation

Categories

(Thunderbird :: Theme, defect)

defect
Not set
trivial

Tracking

(thunderbird_esr6062+ fixed, thunderbird62 wontfix, thunderbird63 fixed)

RESOLVED FIXED
Thunderbird 63.0
Tracking Status
thunderbird_esr60 62+ fixed
thunderbird62 --- wontfix
thunderbird63 --- fixed

People

(Reporter: thomas8, Assigned: Paenglab)

Details

Attachments

(5 files, 5 obsolete files)

+++ This bug was initially created as a clone of Bug #1482549 +++

STR

1 Compare attachment pane header in TB 52 vs. TB 60

Actual result (see screenshots):

TB 52: Attachment pane is clearly demarcated as a pane, by virtue of vertical divider between message header and attachment pane header

TB 60: Flat design, attachment pane demarcation lost
- looking untidy (as if we failed to vertically align things)
- confusing because it's not clear where the message header ends and the pane header starts, i.e. how elements relate or not ("From" dropdown arrow vs. attachment header)
- lost indication that this is a continuous pane border which can be dragged
- lost symmetry with contacts side bar (which is structurally similar)

Expected result:

- When attachment pane is expanded, please restore the vertical divider between message header and attachment pane header (as in TB 52)

Further ideas:
- When hovering the pane border of placeholder, the pane border should appear as a visual feedback that this is the right spot to drag the border (maybe dotted?)
Note the vertical line which demarcates message header pane from attachment pane - we should keep it that way
Note how the transition between message header pane and attachment pane (header) looks fuzzy and untidy
And looking at the empty attachment pane, this is really an ux flaw:
As message header pane and attachment pane have been melted into a consistent block, user can be mislead to assume that clicking the [x] will make the entire header section go away, not just the attachment pane (which is no longer demarcated). Iow, the scope of [x] button is no longer clear, which violates ux principles. Let's just put that little vertical divider back, then we're good.
Attached patch attachmentbucket-sizer.patch (obsolete) — Splinter Review
Windows only and Mac has no visible splitters. When the bucket is minimized (the paperclip is shown) there is now the border too.
Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #8999378 - Flags: review?(jorgk)
Attachment #8999378 - Flags: approval-comm-esr60?
Attachment #8999378 - Flags: approval-comm-beta?
(In reply to Richard Marti (:Paenglab) from comment #4)
> Windows only and Mac has no visible splitters. When the bucket is minimized
> (the paperclip is shown) there is now the border too.
I liked it better without the splitters. That said, the collapsed bucket is missing a bottom border. That looks particularly ugly since the lines from the addressing widget are no way aligned. Please add a bottom border.
(In reply to Richard Marti (:Paenglab) from comment #4)
> Windows only and Mac has no visible splitters. When the bucket is minimized
> (the paperclip is shown) there is now the border too.

Hmm, my proposal was to keep the collapsed bucket as-is (no borders, blends in with the flat design of message header pane and the toolbar). But (only) when attachment pane is expanded, we must have a demarcating border on the left of the attachment pane header, wrt the ux requirements of comment 3.

(In reply to Jorg K (GMT+2) from comment #5)
> I liked it better without the splitters.

Yes, collapsed bucket doesn't need permanent splitter.
We could show the splitter when the splitter is hovered.

> That said, the collapsed bucket is
> missing a bottom border. That looks particularly ugly since the lines from
> the addressing widget are no way aligned. Please add a bottom border.

???
(In reply to Richard Marti (:Paenglab) from comment #4)
> Created attachment 8999378 [details] [diff] [review]

Could you attach a screenshot?
Attached image 1482607.png
Ugly, no?
(In reply to Jorg K (GMT+2) from comment #8)
> Created attachment 8999398 [details]
> 1482607.png
> 
> Ugly, no?

Ugh, yes. Can we add the bottom border to this and see how it looks? Maybe collapsed bucket does look neater with left and bottom border after all, because it preserves the pane character and makes the splitter more discoverable.
(In reply to Jorg K (GMT+2) from comment #5)
> I liked it better without the splitters.
Perhaps not. Without the visible splitter, the <--> appears when hovering empty space. Unless you only want to make the splitter appear when hovered.
Btw it's not aligned because the subject line is part of an input box which normally has some px vertical padding underneath. Whereas attachment pane goes all the way down to the toolbar edge, so it's a bit taller. Atm that's by design. We could try to align the subject line with bottom of attachment pane and see how it looks. It might make the toolbar appear bigger than wanted, but somehow it already does that anyway, so the non-alignment might look like an oversight even though it's not.
Attached patch attachmentbucket-sizer.patch (obsolete) — Splinter Review
That's why I especially wrote that the border is visible when the placeholder is shown. I also didn't like it.

Now invisible with placeholder. Also not when hovering then because this looks weird and to open the bucket you can click on the paper clip.
Attachment #8999378 - Attachment is obsolete: true
Attachment #8999378 - Flags: review?(jorgk)
Attachment #8999378 - Flags: approval-comm-esr60?
Attachment #8999378 - Flags: approval-comm-beta?
Attachment #8999399 - Flags: review?(jorgk)
Attachment #8999399 - Flags: approval-comm-esr60?
Attachment #8999399 - Flags: approval-comm-beta?
How about this?
Comment on attachment 8999401 [details] [diff] [review]
attachmentbucket-sizer.patch (JK)

I like it more without this borders.
Attached image 1482607-2.png (obsolete) —
Hmm, but without border, the <--> arrow doesn't have a visible line underneath.

What does the reporter say?
Comment on attachment 8999399 [details] [diff] [review]
attachmentbucket-sizer.patch

Yes, this gives a splitter for the non-collapsed state and no borders for the collapsed state.

Can we come to a decision here for the collapsed pane, I'd like to land and uplift this RSN.

Either the current state with no borders/sizer visible for the collapsed bucket or with borders as in attachment 8999402 [details]. That way the <--> doesn't is associated with the border.

BTW, Richard, is this correct?
+#attachments-box[collapsed="true"]:not([empty="true"]) + #attachments-placeholder-box {
+  border-bottom: 1px solid #a9b7c9;
+}

I copied the selector from mail/themes/shared/mail/messengercompose.css
Attachment #8999399 - Flags: review?(jorgk) → review+
Attachment #8999401 - Flags: feedback?(bugzilla2007)
Attachment #8999401 - Flags: feedback?(bugzilla2007)
Attachment #8999402 - Flags: feedback?(bugzilla2007)
Compromise, show splitter on hover?
Same as the r+ patch with no cursor shown when the placeholder papaer clip is shown.

(In reply to Jorg K (GMT+2) from comment #16)
> Can we come to a decision here for the collapsed pane, I'd like to land and
> uplift this RSN.

Without border. Start the composer in text only mode and the bottom border is almost at the bottom of the header. Only the horizontal splitter is below and this looks not so good.

> BTW, Richard, is this correct?
> +#attachments-box[collapsed="true"]:not([empty="true"]) +
> #attachments-placeholder-box {
> +  border-bottom: 1px solid #a9b7c9;
> +}

Yes, that would be correct.
Comment on attachment 8999417 [details] [diff] [review]
attachmentbucket-sizer.patch no cursor when placeholder

You need |cursor: default|.
Attachment #8999417 - Flags: review+
Pushed by mozilla@jorgk.com:
https://hg.mozilla.org/comm-central/rev/a9406a5e7b4a
Make the attachmentbucket-sizer visible. r=jorgk DONTBUILD
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 63.0
Attachment #8999414 - Attachment is obsolete: true
Attachment #8999402 - Attachment is obsolete: true
Attachment #8999402 - Flags: feedback?(bugzilla2007)
Attachment #8999401 - Attachment is obsolete: true
Attachment #8999399 - Attachment is obsolete: true
Attachment #8999399 - Flags: approval-comm-esr60?
Attachment #8999399 - Flags: approval-comm-beta?
Comment on attachment 8999417 [details] [diff] [review]
attachmentbucket-sizer.patch no cursor when placeholder

Note that the landed patch is different in |cursor: default;|.
Attachment #8999417 - Flags: approval-comm-release+
Attachment #8999417 - Flags: approval-comm-esr60+
Attachment #8999417 - Flags: approval-comm-release+
You need to log in before you can comment on or make changes to this bug.