Closed Bug 662605 (bz-pretty) Opened 13 years ago Closed 10 years ago

Implement the winning Bugzilla:Pretty design by Jonathan Wilde

Categories

(Bugzilla :: User Interface, enhancement, P1)

enhancement

Tracking

()

RESOLVED WONTFIX

People

(Reporter: mkanat, Unassigned)

References

(Blocks 3 open bugs, )

Details

Attachments

(2 files, 1 obsolete file)

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.
Whiteboard: [roadmap: 5.0]
(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.
(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.
I applied the patch and the images to https://landfill.bugzilla.org/pretty/.
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
Alias: bz-pretty
Thanks.

By the way: one of the changes in the patch was to the doctype. It is now HTML5. It should be backward-compatible.
Attached patch patch 2Splinter Review
Attachment #553028 - Attachment is obsolete: true
Depends on: 679266
(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).
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?
(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.
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
^ (view in Firefox/Gecko for proper rendering; it's just a prototype for now)
(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?
Target Milestone: Bugzilla 4.4 → Bugzilla 5.0
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.
This looks great. DKL is someone tagged to implement this on BMO?
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
Depends on: 324402
Blocks: 400674
Blocks: 465041
Blocks: 324402, 679266
No longer depends on: 324402, 679266
Blocks: 647751
Blocks: 716024
Blocks: 490763
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
Attachment #553030 - Attachment mime type: application/octet-stream → application/x-bzip2
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>.
(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
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
Closed: 10 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.