Open Bug 1330451 Opened 3 years ago Updated 1 month ago

Make bug page header fixed

Categories

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

Production
enhancement
Not set

Tracking

()

REOPENED

People

(Reporter: rfeeley, Assigned: kohei)

References

(Blocks 3 open bugs)

Details

(Keywords: bmo-ux, Whiteboard: [october-2019-bmo-triage])

Attachments

(4 files)

Attached image 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?
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.
Component: User Interface → User Interface: Modal
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.
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
Depends on: 1376826
No longer depends on: 1376826
See Also: → 1376826
Depends on: 1376826
See Also: 1376826
Keywords: bmo-ux
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/
(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.
(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.
Severity: normal → enhancement

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
Assignee: nobody → kohei.yoshino
Blocks: 490763
Summary: Fixed headers in Bugzilla so you can know the bug, even far down the page → Adjust modal bug page layout to introduce fixed header and 2-column layout

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.

Depends on: 1514275

(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.

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.

Depends on: 1496879
Blocks: 1534087
No longer blocks: 490763

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.

No longer depends on: 1514275
Blocks: bugzilla-6
Blocks: 1539271
See Also: → 237549
Duplicate of this bug: 1541276

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

Status: NEW → ASSIGNED
Due Date: 2019-05-09
Blocks: 1478674, 1435315

WIP

See Also: → bmo-jedi-theme

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
Due Date: 2019-05-09
Depends on: 1547980
No longer depends on: 1547980
Depends on: 1350424
Blocks: 1465481
Depends on: 1514275, 1476107, 1344091
Depends on: 1556727
No longer depends on: 1514275
Blocks: 1332066
Blocks: 1371148
No longer blocks: 1465481
No longer blocks: 1371148

Still blocked by several other bugs.

Status: ASSIGNED → NEW
No longer blocks: 1435315

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...

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

Summary: Adjust modal bug page layout to introduce fixed header and 2-column layout → Apply responsive design to bug page: fixed header and 2-column layout on desktop, single column on mobile

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

Blocks: 1576238
Assignee: kohei.yoshino → nobody
Component: User Interface: Modal → User Interface

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

Flags: needinfo?(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
No longer depends on: 1350424, 1476107, 1496879
Flags: needinfo?(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.

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

Status: NEW → RESOLVED
Closed: 1 month ago
Resolution: --- → WONTFIX

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.

Assignee: nobody → kohei.yoshino
No longer blocks: 1539271, 1576238, 1332066, 1478674
Status: RESOLVED → REOPENED
Resolution: WONTFIX → ---
Summary: Apply responsive design to bug page: fixed header and 2-column layout on desktop, single column on mobile → Make bug page header fixed
Blocks: 1600753
You need to log in before you can comment on or make changes to this bug.