EPIC: Pane Resize/Reflow Particulars

[ninavizz]

Default Sizing

When the SD client opens, the VM window should open to show the client at 1555w x 924h as its default sizing.

• The client should fit into its VM window at 100% and should resize dynamically as a user may resize the VM window
• The functional regions within the client, should be sized as follows:
  • Left Pane should open with a fixed width of 200px
  • SourceList should open with the default width of 565px
    • Within the SourceList, each Source should be coded to fit 2 lines of Snippet text when that pane is at at the default width
  • ConversationPane should open with the default width of 790px
    • Nested within the ConversationPane are the Selected Source Header and the Reply Pane, both of which should scale with the ConversationPane. Neither are to reduce in vertical size when the VM window is shortened in height.

Resizing

Those darned users are likelt to increase or decrease the size of the window—assuming Qubes hasn't made that really difficult to do (pls tell me Qubes VM windows can resize by click/drag window corners... and that we can 100% fit the client's chrome into the window to dynamically resize with it?).

Users are most likely to change window sizes along a diagonal path. For the purposes of implementation however, I am breaking-up the specs across 4 issues:

• This one to summarize macro points & reflect the others as an EPIC
• ConversationPane things are detailed in Pane Resizing: Conversation Pane #472
• SourcePane things are detailed in Issue TBD 2
• Scrollbars are detailed in Restyle pane scrollbars to be more subtle and auto-hide #474
  • ...tho really, just copy the way the Slack client does them (transparency, size, up/down control, hide/show on pane mouseover). No, I'm not just lazily copying all the Slack client patterns, for ours.

Please also see this screen recording of me resizing & futzing with my Slack client's window, as a general reference point. How scrollbars appear and disappear when mousing into/out of a pane, and the total window "locking" at a fixed-minimum, I would like to see emulated in the client.

...when the user increases the window's size along either plane

• Scrollbars will happen per Restyle pane scrollbars to be more subtle and auto-hide #474
• The LeftPane and SourceList will both remain the same size
  • Both will remain fixed in position along their left edges
• The TopBarre will scale in width only, never height
  • AuthWidget will remain fixed to the left side, and it will not scale in size.
  • HexaBang (not likely in scope for beta)'s position will remain fixed to the right side, and it will not scale in size.
  • Messaging Bar will remain fixed to the middle, and will not increase in width.
• The ConversationPane will expand horizontally per Pane Resizing: Conversation Pane #472

...when the user reduces the window's size vertically:

• Scrollbars will happen per Restyle pane scrollbars to be more subtle and auto-hide #474
• The LeftPane will simply lose visible hexagons until hard-stopping at 600px min-height
  • By hard stop, I'm referencing the min-size attained by the Slack client window at the 0:45 mark in the above video; my mouse clearly is trying to reduce the window further, and Slack won't let it.
• The SourceList will simply lose visible background-space, or if filled with Sources will introduce a Scrollbar upon mouseover per Restyle pane scrollbars to be more subtle and auto-hide #474
• The ConversationPane will condense according to Pane Resizing: Conversation Pane #472

...when the user reduces the window's size horizontally:

• Scrollbars will never happen
• The LeftPane will remain fixed at 200px in width.
• The ConversationPane will reduce in size, first; then once it has hit its min-width of 610px, the SourceList will reduce in size until it hits its min-width of 445px. At that point the client will hard-stop at its total minimum width, as does the Slack client window at the 0:45 mark in the above video; my mouse clearly is trying to reduce the window further, and Slack won't let it.
• The SourceList will hard-stop at 445px in width.
  • Snippets for each Source in the SourceList at min-width should be 3 lines
    • At default-width, snippets should be 2 lines
  • Further details at Issue TBD2
• The ConversationPane will hard-stop at 610px in width
  • Further details at Pane Resizing: Conversation Pane #472

With Users

It would be helpful to observe* in contextual analysis, how users in fact do arrange their windows. We will likely need to make a number of submissions w/ files to the org's SecureDrop an hour or two in advance of CI sessions, in order to observe this.

* = If a UX researcher is not able to participate in this observation, it is an important caveat for others to understand, that users will not likely answer the question correctly if simply asked "How often do you resize windows?". Users just don't pay that much attention to such behavioral choices, and to please the interviewer may unknowingly provide a misleading answer.

Likewise, if prompted when being observed to arrange windows as they like, users are unlikely to mimic natural behavior choices unique circumstances (such as wanting to view or act upon a ton of files) could present. Contextual inquiry has to be done quietly, and the observer can only ask questions after a user has demonstrated a natural behavior, for observed findings to hold true.

[sssoleileraaa]

pls tell me Qubes VM windows can resize by click/drag window corners

Qubes VM windows can resize by dragging window corners

[ninavizz]

They dynamically resize the client apps running in the VMs when they do that, too—no special key combos required?

[sssoleileraaa]

Yes, the client dynamically resizes when the vm window is resized.

[sssoleileraaa]

Also the only way to resize the client is to resize the qubes window.

[ninavizz]

Yoohoo @creviera @eloquence! Everything in this epic, documents how I've been thinking the Client window dynamically being resized by the Qubes window being increased or decreased in size. Mebbe we chat on Monday or Tuesday about it all?

[sssoleileraaa]

Closing due to outdated pixel values and new minimum requirements noted here: freedomofpress/securedrop-ux#110