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:
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.
(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.
Created attachment 553028 [details] [diff] [review]
first round of updates. only working with ff5 and show_bug
Created attachment 553030 [details]
3 images to go along with patch1
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:
By the way: one of the changes in the patch was to the doctype. It is now HTML5. It should be backward-compatible.
Created attachment 553365 [details] [diff] [review]
(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).
*** Bug 716024 has been marked as a duplicate of this bug. ***
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.
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?
^ (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?
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).
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
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
*** Bug 895547 has been marked as a duplicate of this bug. ***
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
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:
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:
(In reply to Londinium from comment #28)
I suspect Bug 540 would be handy right about now?
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).