The default bug view has changed. See this FAQ.
Bug 662605 (bz-pretty)

Implement the winning Bugzilla:Pretty design by Jonathan Wilde

RESOLVED WONTFIX

Status

()

Bugzilla
User Interface
P1
enhancement
RESOLVED WONTFIX
6 years ago
2 years ago

People

(Reporter: Max Kanat-Alexander, Unassigned)

Tracking

(Blocks: 7 bugs)

Details

(URL)

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

6 years ago
Jonathan Wilde was the winner of our Bugzilla:Pretty contest, meaning that his UI design will be the official design of Bugzilla 5.0. His mockup needed a bit more work in order for us to fully implement it (mostly, we needed to see the other tabs). His current work is being tracked in a Dropbox, here:

  https://www.dropbox.com/s/krssz4i6za65f85

  The plan for implementation is basically this:

  1) We will create a branch called "pretty".
  2) Work will happen on this branch without formal review, but with continuous informal review. (There will be an active landfill demo site, and people can look at the code as we go.)
  3) We will continually merge trunk into "pretty" so that it stays up to date.
  4) Once "pretty" is complete, we will merge it back into trunk and delete the pretty branch.
  5) We will debug and test and then release 5.0.

  If "pretty" isn't ready by the time the next release freezes, it won't be merged into trunk until the release after that.
(Reporter)

Updated

6 years ago
Whiteboard: [roadmap: 5.0]

Comment 1

6 years ago
(In reply to comment #0)
>   4) Once "pretty" is complete, we will merge it back into trunk and delete
> the pretty branch.
>   5) We will debug and test and then release 5.0.

I would rather debug and test on the "pretty" branch, not upstream.
(Reporter)

Comment 2

6 years ago
(In reply to comment #1)
> I would rather debug and test on the "pretty" branch, not upstream.

  Fair enough. We can have a stabilization period on "pretty" and then another stabilization period on "trunk" with more users and dev releases.

Comment 3

6 years ago
Created attachment 553028 [details] [diff] [review]
first round of updates. only working with ff5 and show_bug

Comment 4

6 years ago
Created attachment 553030 [details]
3 images to go along with patch1

Comment 5

6 years ago
I applied the patch and the images to https://landfill.bugzilla.org/pretty/.
(Reporter)

Comment 6

6 years ago
Hey Greg. Wow, thanks for your work on this. We should definitely communicate about this on IRC or in some other form of live communication if you want to take this on as a project in general. Also, you'll definitely want to see the Developer Guidelines here:

  http://wiki.mozilla.org/Bugzilla:Developers
(Reporter)

Updated

6 years ago
Alias: bz-pretty

Comment 7

6 years ago
Thanks.

By the way: one of the changes in the patch was to the doctype. It is now HTML5. It should be backward-compatible.

Comment 8

6 years ago
Created attachment 553365 [details] [diff] [review]
patch 2
Attachment #553028 - Attachment is obsolete: true

Updated

6 years ago
Depends on: 679266
(Reporter)

Comment 9

6 years ago
(In reply to Greg Martyn from comment #7)
> By the way: one of the changes in the patch was to the doctype. It is now
> HTML5. It should be backward-compatible.

  No, Bugzilla is not valid HTML5 and must stay HTML4 Transitional for now. There is another bug for making Bugzilla use HTML5, which is a huge undertaking (larger than this one).

Updated

5 years ago
Duplicate of this bug: 716024

Comment 11

5 years ago
Hi, I'd like to help out with this. I have a lot of professional experience with front end development -- how can I get involved?

Comment 12

5 years ago
(In reply to Bob Sawey from comment #11)
> Hi, I'd like to help out with this. I have a lot of professional experience
> with front end development -- how can I get involved?

glob or mkanat, I think this question is addressed to you. :)
i've contacted bob directly via email with an introduction and some guidance.

Comment 14

5 years ago
so... hows this going?
BMO Team has been working with the winner of the contest, Jonathan Wilde, and another designer Christoper Lee, during their internship here at Mozilla to come up with some enhancements for the UI of Bugzilla. BMO at least will be test bedding some of the changes initially and will be rolling out changes incrementally instead of a complete redesign. We will be pushing whatever we can upstream during the process if people tend to like the changes. Here is one work in progress that we are looking at now.

https://dl.dropbox.com/u/28610/bugzilla-sandstone/showbug.html

Mostly CSS changes for now. We just want to do some cleanup of the header and footer as well as some style changes initially. Major changes to the bug entry page and other important pages would happen later.

What do you think?

dkl

Comment 16

5 years ago
^ (view in Firefox/Gecko for proper rendering; it's just a prototype for now)

Comment 17

5 years ago
(In reply to David Lawrence [:dkl] from comment #15)
> What do you think?

- I like the big green "Save Changes" button, both its style and its position. Much easier to find than what we have currently.
- The header of the page looks good, except that the "Search" link disappeared. You can only run a QuickSearch unless you go to the bottom of the page to access it. I run queries very often, and having to always scroll to the bottom of the page is going to irritate me pretty quickly. Now, I admit that having both the QuickSearch box and a separate "Search" link is maybe confusing to newbies. So I wondered if it could at least be added to the drop-down menu for advanced users; at the first place right above "Reports" seems a good place for it.
- About the "Preferences" link, it would be great if it was a drop-down too where items would be the name of the panels (General Preferences, Email Preferences, Saved Searches, ...). This would be a big win.
- I LOVE that the header is now fixed, so that when I scroll the menu remains visible. It takes very few vertical space so won't harm. I wanted this feature for years! :)
- What I would love is that "My Bugs" is a drop-down too which list all my saved searches, so that I can very quickly access them. If that's too hard to implement, we could do it later, but that's definitely something I want to see implemented sooner or later.
- The QuickSearch syntax is pretty complex and we used to display a small [?] link besides the search box for newcomers. It would be great to have it back, e.g. as a white question mark in a blue disk.
- Could it be possible to have both the product and component fields to have the same width? It would look much better, IMO.
- There is a lot of wasted vertical space in the page footer.

But globally, I like the new UI a lot. :) Implementing the suggestions above would be a great plus. Is that doable?

Updated

5 years ago
Target Milestone: Bugzilla 4.4 → Bugzilla 5.0

Comment 18

5 years ago
Here's the source for the redesign: https://github.com/cleercode/bugzilla-sandstone As my internship finishes tomorrow, I likely won't be working on this much more, so hopefully someone can pick it up.

Comment 19

5 years ago
This looks great. DKL is someone tagged to implement this on BMO?

Comment 20

5 years ago
As one last contribution, here's a version with a red/brown styling that's technically what general Mozilla pages are supposed to use (blue is usually for Firefox).

https://dl.dropbox.com/u/28610/bugzilla-sandstone-sand/showbug.html
https://github.com/cleercode/bugzilla-sandstone/tree/sand

Going forward, I would recommend checking with the visual design team working on Sandstone/One Mozilla (including Sean Martell): https://bugzilla.mozilla.org/show_bug.cgi?id=727927

Updated

5 years ago
Depends on: 324402

Updated

5 years ago
Blocks: 400674

Updated

5 years ago
Blocks: 465041

Updated

5 years ago
Blocks: 324402, 679266
No longer depends on: 324402, 679266

Updated

5 years ago
Blocks: 647751

Updated

5 years ago
Blocks: 716024

Updated

5 years ago
Blocks: 490763

Updated

4 years ago
Assignee: mkanat → ui
I'll see if I can make Pretty UI implementation move forward. I'm planning to use the dkl/cleer BMO changes from comment 15 as a basis.
(In reply to Teemu Mannermaa (:wicked) from comment #21)
> I'll see if I can make Pretty UI implementation move forward. I'm planning
> to use the dkl/cleer BMO changes from comment 15 as a basis.

We have done additional work on this since comment 15 and the current status of our work can be seen at https://bugzilla.allizom.org

dkl

Updated

4 years ago
Attachment #553030 - Attachment mime type: application/octet-stream → application/x-bzip2

Updated

4 years ago
Duplicate of this bug: 895547
Looks like my Dropbox link went into the great beyond, so I've put up the original Bugzilla:Pretty material at <https://github.com/hellojwilde/bugzilla-pretty>.

Comment 25

4 years ago
(In reply to Jonathan Wilde [:jwilde] from comment #24)
> Looks like my Dropbox link went into the great beyond, so I've put up the
> original Bugzilla:Pretty material at
> <https://github.com/hellojwilde/bugzilla-pretty>.

How did you plan on achieving the custom styling for the <select> inputs?
(In reply to Christopher Trom from comment #25)
> (In reply to Jonathan Wilde [:jwilde] from comment #24)
> > Looks like my Dropbox link went into the great beyond, so I've put up the
> > original Bugzilla:Pretty material at
> > <https://github.com/hellojwilde/bugzilla-pretty>.
> 
> How did you plan on achieving the custom styling for the <select> inputs?

I was thinking that we could use a technique like the following to set a custom arrow graphic with background:

http://bavotasan.com/2011/style-select-box-using-only-css/

And then just toggle the background's visiblity with :hover.

Alternately, a technique like the following could work, but it's not quite as clean:
http://cssdeck.com/labs/styling-select-box-with-css3
Comment hidden (off-topic)
while the design here is excellent, we're not going to implement this as it's a large breaking change which nobody is actively working on.

instead we'll port bugzilla.mozilla.org's skin to the bugzilla product, and make that the default (bug 988971).
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WONTFIX
Whiteboard: [roadmap: 5.0]
Target Milestone: Bugzilla 5.0 → ---
Assignee: wicked → ui
You need to log in before you can comment on or make changes to this bug.