Last Comment Bug 662605 - (bz-pretty) Implement the winning Bugzilla:Pretty design by Jonathan Wilde
(bz-pretty)
: Implement the winning Bugzilla:Pretty design by Jonathan Wilde
Status: RESOLVED WONTFIX
:
Product: Bugzilla
Classification: Server Software
Component: User Interface (show other bugs)
: unspecified
: All All
: P1 enhancement with 2 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: default-qa
:
Mentors:
https://landfill.bugzilla.org/pretty/
: 895547 (view as bug list)
Depends on:
Blocks: 324402 400674 465041 490763 647751 679266 716024
  Show dependency treegraph
 
Reported: 2011-06-07 12:28 PDT by Max Kanat-Alexander
Modified: 2015-02-06 13:48 PST (History)
28 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
first round of updates. only working with ff5 and show_bug (49.77 KB, patch)
2011-08-14 14:22 PDT, Greg Martyn
no flags Details | Diff | Splinter Review
3 images to go along with patch1 (2.31 KB, application/x-bzip2)
2011-08-14 14:36 PDT, Greg Martyn
no flags Details
patch 2 (67.42 KB, patch)
2011-08-15 21:29 PDT, Greg Martyn
no flags Details | Diff | Splinter Review

Description Max Kanat-Alexander 2011-06-07 12:28:41 PDT
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.
Comment 1 Frédéric Buclin 2011-06-07 13:01:04 PDT
(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.
Comment 2 Max Kanat-Alexander 2011-06-08 17:10:12 PDT
(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 Greg Martyn 2011-08-14 14:22:35 PDT
Created attachment 553028 [details] [diff] [review]
first round of updates. only working with ff5 and show_bug
Comment 4 Greg Martyn 2011-08-14 14:36:22 PDT
Created attachment 553030 [details]
3 images to go along with patch1
Comment 5 Frédéric Buclin 2011-08-14 14:59:55 PDT
I applied the patch and the images to https://landfill.bugzilla.org/pretty/.
Comment 6 Max Kanat-Alexander 2011-08-15 16:13:04 PDT
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
Comment 7 Greg Martyn 2011-08-15 21:25:37 PDT
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 Greg Martyn 2011-08-15 21:29:37 PDT
Created attachment 553365 [details] [diff] [review]
patch 2
Comment 9 Max Kanat-Alexander 2011-08-16 17:32:32 PDT
(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).
Comment 10 Frédéric Buclin 2012-01-06 13:46:25 PST
*** Bug 716024 has been marked as a duplicate of this bug. ***
Comment 11 Bob Sawey 2012-03-02 17:53:51 PST
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 Frédéric Buclin 2012-03-03 07:28:12 PST
(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. :)
Comment 13 Byron Jones ‹:glob› [PTO until 2016-10-10] 2012-03-18 22:45:43 PDT
i've contacted bob directly via email with an introduction and some guidance.
Comment 14 Guy Pyrzak 2012-08-18 17:37:59 PDT
so... hows this going?
Comment 15 David Lawrence [:dkl] 2012-08-21 12:57:49 PDT
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 Chris Lee (:cleer) 2012-08-21 13:09:25 PDT
^ (view in Firefox/Gecko for proper rendering; it's just a prototype for now)
Comment 17 Frédéric Buclin 2012-08-21 13:59:26 PDT
(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?
Comment 18 Chris Lee (:cleer) 2012-08-23 15:52:07 PDT
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 Guy Pyrzak 2012-08-23 19:48:58 PDT
This looks great. DKL is someone tagged to implement this on BMO?
Comment 20 Chris Lee (:cleer) 2012-08-24 17:30:13 PDT
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
Comment 21 Teemu Mannermaa (:wicked) 2013-01-06 11:25:11 PST
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.
Comment 22 David Lawrence [:dkl] 2013-01-06 13:52:39 PST
(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
Comment 23 Frédéric Buclin 2013-07-20 08:48:08 PDT
*** Bug 895547 has been marked as a duplicate of this bug. ***
Comment 24 Jonathan Wilde [:jwilde] 2013-07-20 14:23:18 PDT
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 Christopher Trom 2013-08-04 12:11:19 PDT
(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?
Comment 26 Jonathan Wilde [:jwilde] 2013-08-05 01:06:30 PDT
(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 29 Denis Roy 2013-11-12 13:07:13 PST Comment hidden (off-topic)
Comment 30 Byron Jones ‹:glob› [PTO until 2016-10-10] 2014-04-23 08:03:33 PDT
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).

Note You need to log in before you can comment on or make changes to this bug.