1330451 - Make bug page header fixed

Status: NEW

(bugzilla.mozilla.org :: User Interface, enhancement)

Description

[Ryan Feeley [:rfeeley]]

Attachment: bugzilla.gif

I often find myself with many tabs open, on several long bugs, and unable to know what bug I'm on without scrolling to the top. Would love to see a feature like this (quickly Firebugged). Thoughts?

Comment 1

[Dylan Hardison [:dylan] (he/him)]

In principal I have no objection to something like this, with the assumption it would look a bit nicer. 

Is it possible to make a new <div> the is positioned at the top of the viewport when the viewport is scrolled down?

The particulars of the modal UI are a little hairy, but if you can come up with an implementation I'll do the template monkeying.

Comment 2

[Dylan Hardison [:dylan] (he/him)]

I think I was unclear: in particular, I'm thinking of a box with just the bug number and summary, but that is hidden when the primary summary line is visible.

Comment 3

[David Lawrence [:dkl]]

We have tried a fixed header in the early days of the Sandstone (Mozilla) skin and could not figure out a way to make it work with comment focus. i.e. show_bug.cgi?id=1330451#c12 The comment would be highlighted and display behind the header since the header would be removed from the document flow. If we can figure out a way to fix the comment issue, I would be open to it. Another issue I have is that the modal form is not centered and if your browser is large, it looks strange with the status/summary section to be fixed to the top but off center. And like Dylan said, it looks strange with the rest of the page scrolling behind the summary box all around it. Ideally it would be nice if once the summary/status box is out of view it morphed to a right side side bar type layout and then stayed in a fixed position. Just thinking out loud.

dkl

Comment 4

[Walter K.]

Please don't create a fixed header on Bugzilla. Static header is the most annoying modern "design" UI element. The header occupies the most looked at 1/3rd top part of the page with almost zero relevant information to the content of the page. It distracts from reading and, unlike the static content of browser chrome one is trained to ignore until needed, requires constant visual re-scan on every page scroll. While having a click target may look as an attractive idea for helping with content access on a general-purpose site, technical audience of Bugzilla has no need for such convenience. We all know that the information at the top of the page is just one Home button press away.

The static header is supposed to help knowing what bug is being looked at. Though turning on browser's Title Bar is a general solution. Having full page title always on helps every site one visits, not just Bugzilla.

For those who still may like a fixed header to be always visible, the best approach is to have an on/off "pin" to the right of the header that would make the header sticky for that particular user.

BTW, people do this to get rid of sticky headers [1].

[1] https://alisdair.mcdiarmid.org/kill-sticky-headers/

Comment 5

[Wayne Mery (:wsmwk)]

(In reply to Walter K. from comment #4)
> Please don't create a fixed header on Bugzilla. Static header is the most
> annoying modern "design" UI element. The header occupies the most looked at
> 1/3rd top part of the page with almost zero relevant information to the
> content of the page.

That would be horrible. But we're not headed to a full header or 1/3 of a page (attachment 8825980 [details] is a bit much), equivalent to 8-10 lines of text.  Comment 2 is suggesting 1-2 lines only. I'd be up for that if it also had a couple helpful buttons.


> We all know that the information at the top of the page is just one Home button press away.

And then you lose your place.


> [1] https://alisdair.mcdiarmid.org/kill-sticky-headers/

Not a high % of people have an 11" screen as that author.


I completely sympatize with the reporter that you can't see the full title of the current tab anywhere in the UI after you scroll.  Maybe not a big deal if you have only 10-20 bug tabs open. But if you have more bugs open, 30, 50, 100, ... well let's just say it totally stinks.  

That said, I've partly solved this issue with tabs on the left using https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/ which is now indispensible since drawing the tab title in the title bar seems to be totally gone.

Comment 6

[Walter K.]

(In reply to Wayne Mery (:wsmwk) from comment #5)
> [...] since drawing the tab title in the title bar seems to be
> totally gone.
Title Bar is still available but turned off by default. Turning it on in Customize is one of the first things I do when setting up Firefox on a new computer.

Comment 7

[Kohei Yoshino]

I’m planning a UX analysis and overhaul of the modal UI in Q2 or Q3, but several enhancements can be done now, before shipping Bugzilla 6.0, including:

• Make header fixed
• Apply 2-column layout (may look similar to Xfce Bugzilla, but both the main column and side column will be fixed like frames)
• Move the bottom action buttons (Format and New/Clone) to top

Comment 8

[Kohei Yoshino]

We need to remove the email notification recipient list that appears above the bug header like this:

Changes submitted for bug 2
Email sent to 1 recipient. (show)

Apparently it will be done in Bug 1514275.

Comment 9

[Jan Henning [:JanH]]

(In reply to Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat) from comment #7)

• Apply 2-column layout (may look similar to Xfce Bugzilla, but both the main column and side column will be fixed like frames)

How will that interact with mobile usage? Given the current [1] absence of a proper mobile layout, this does seem to have the potential to make the experience on mobile worse than it currently is.

[1] In bug 1531474 comment 10 you said that "minimum mobile/tablet optimization work" is planned for "later this year", which seems like some time after what "can be done now" above.

Comment 10

[Kohei Yoshino]

I’ll use media queries and CSS Grid or Flexbox to keep the current single column layout on mobile for now. In the future, we could use a tabbed UI (like BzDeck) or separate views to further optimize for mobile.

Comment 11

[Kohei Yoshino]

Attachment: Screenshot: BzDeck’s tabbed layout for mobile

A better screenshot. BugDroid has a similar UI.

Comment 12

[Kohei Yoshino]

Looks like Bug 1514275 is not removing the “Changes submitted” message, which can be a quite long list. It has to be collapsed as part of this bug.

Comment 14

[Kohei Yoshino]

Attachment: bugzilla-2-column-layout-dark.png

I used Firefox DevTools last weekend to experiment a 2-column layout and dark mode. Very rough but you’ll get the idea.

Comment 15

[Kohei Yoshino]

Attachment: bugzilla-2-column-layout-light.png

WIP

Comment 16

[Kohei Yoshino]

My plan was shipping this at the same time as Bug 1377977, but it’s probably better to do it separately.

• Bug 1344091 is still in the review queue
• Bug 1476107 affects how the comment box will be resized
• Bug 1514275 changes the “email sent to X recipients” message part

Comment 17

[Kohei Yoshino]

Still blocked by several other bugs.

Comment 18

[Boris Zbarsky [:bzbarsky]]

Will there be a way to try this out before it ships? I'd be happy to do it for my use case (a window about 930px wide by about 902px tall) and report issues if there are any problems at that window size...

Comment 19

[Kohei Yoshino]

Will deploy the new design on the dev server once it’s ready!

Comment 20

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Let's announce that when it's on -dev. Maybe as part of the email to dev-platform/dev-firefox.

Comment 21

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

This current has three blockers, and I'm not sure how they are related. Can this be finished without the three blockers?

Comment 22

[Kohei Yoshino]

• Bug 1476107 and Bug 1496879 can be removed from blockers
• Bug 1350424 can also be removed; part of the CSS work can be done as part of this bug
• Bug 1556727 has to be done to fix the bug header at the top; there is already a PR

Comment 23

[Kohei Yoshino]

So basic 2-column layout can be implemented once the PR for Bug 1556727 is reviewed and merged. And after this, we can fix Bug 1534087 which is also a big UX win.

Comment 24

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Closing per 2020 roadmap discussion. Reopen if someone wants to take this.

Comment 25

[Kohei Yoshino]

We can/should do this since Bug 1556727 is now solved, and Bug 1534087 is blocked by this. I’d split off the 2-pane layout change, because it’s rather a big change affecting the Crash Data and Phablicator sections that assume a full-width layout.