195415 - No support for alternating colours in bug list

Status: RESOLVED WORKSFORME

(Bugzilla :: User Interface, enhancement)

Description

[Chris L. Mason]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2.1) Gecko/20021226 Debian/1.2.1-9
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2.1) Gecko/20021226 Debian/1.2.1-9


There's no support for alternating colours in the bug list.  Support for this
should be added to the template so that the colours can be set in the style sheet.

(I'll be including a patch)


Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

[Chris L. Mason]

Okay, I'll attach a simple patch to table.html.tmpl that add a tag of
"bz_alternate_1" or "bz_alternate_2" to the tr class.

This allows alternating colours to be set in buglist.css, such as:

/* Use alternating colors for the rows */
.bz_alternate_1 { background-color: #ffffff; }
.bz_alternate_2 { background-color: #dddddd; }

Comment 2

[Chris L. Mason]

Attachment: Add alternating colour support to table.html.tmpl

Add bz_alternate_1 or bz_alternate_2 to the tr class to allow setting via style
sheets.

Comment 3

[Christian Reis]

Chris, can we see this in action somewhere? I'm trying to search for a dupe for
this bug but can't find it

Comment 4

[Chris L. Mason]

This is an internal system only, but I have taken a screenshot that I'll attach.
 I did a query on desktop issues so that nothing confidential would be shown. 
(Bugzilla is primarily used by our Engineering group.)

Comment 5

[Chris L. Mason]

Attachment: Screenshot showing alternating colours in action

Comment 6

[Christian Reis]

I would really like it if we could have a more descriptive name for the rows.
Something like bz_buglist_odd and bz_buglist_even would be perfect. 

I think the colours you provided are excellent; you can patch buglist.css and
I'll review the finished one (shouldn't be too much work)

(hint: A diff -uN is easier to read, too :-)

Sorry for having left this so long untouched.

Comment 7

[Chris L. Mason]

I won't have access to the system I was working on for a couple weeks,
so I won't be able to do this until then.  Since the changes are so simple,
maybe someone could just apply this with the different tag names
and updated .css file?

Thanks a lot, I know this wasn't high priority, but it will be one less
thing I need to maintain separately.  :)

Anyway, I'll be happy to provide an updated patch in unified format
in a couple weeks if no one has time for this until then.

Comment 8

[Vlad Dascalu]

Attachment: Chris L. Mason's patch per kiko's suggestions.

Ok, so I was bored and I created this. I've tested it and works like expected.

Comment 9

[Joel Peshkin]

Comment on attachment 127947 [details] [diff] [review]
Chris L. Mason's patch per kiko's suggestions.


This will break the bz_secure mechanism.  It needs to be set up in a way where
either ...
a) A param controls the use of the background color (selects between meaning
secure and just alternating)
b) The styles need to make it possible to differentiate between secure and
insecure even while the rows are alternating.

One caution.....

Some browsers don't blend classes well even when they don't conflict.  I
suspect it is the LAST class that wins.

Comment 10

[Christian Reis]

Joel: the problem is rather that secure bugs are improperly styled, IMO. In a
long buglist, not having a visual cue to differentiate between rows is a
usability bug.

Unfortunately, the real problem here is defining a policy for styling the
buglist, and that needs to be discussed in bug 130276.

Comment 11

[Gervase Markham [:gerv]]

I'm not sure that alternately-coloured rows would be a usability improvement -
when scrolling, the strobing effect might actually be quite offputting.

How about a thin line under each row?

Gerv

Comment 12

[Joel Peshkin]

Kiko:
   I'm OK with "restyling" the secure highlighting, though it is a place where I
went to some pains to keep it working like people are used to.  I'll defer to
Gerv on the issues of what the right way to do this would be.

Comment 13

[Myk Melez [:myk] [@mykmelez]]

Actually Kiko is right that background color may not be the optimal way to
identify secure bugs.  I've often regarded it as a kludge, although it's one
people are used to (and thus anything we do should be easy for people to
transition over to).  One option is to use list-style-image to add a lock icon
(or something similar) to the beginning of each secure bug row.

Gerv is right to be wary, however.  I'd like to see this bug focus only on
adding the relevant classes to each row without also modifying the stylesheet. 
That'll let installations (and individuals with good browsers) experiment with
this feature, and hopefully we can get some insight into what works best before
we make the change in the Bugzilla codebase.

Comment 14

[Chris L. Mason]

FWIW, as the requestor, that sounds great to me.  People are expected
to customize the style sheets, but not the template code.  With the
tags there, people can do whatever they want for the alternate rows.
(is the blink tag still supported?  :) :) :)

Thanks!

Comment 15

[Joel Peshkin]

The lock/unlock approach sounds like a good one.  I think that would have to be
done in the template rather than the stylsheet though.... correct?

Comment 16

[Vlad Dascalu]

Comment on attachment 127947 [details] [diff] [review]
Chris L. Mason's patch per kiko's suggestions.

Since this needs more work, I'll cancel my review request.

Comment 17

[Christian Reis]

If we want the lock icon, we need to alter the display style of the TDs to
list-item, since by default list-style-image only applies in that case. I'm not
sure that will work, but it's an idea.

A horizontal line offers a lot less visual contrast to ease perceiving borders
between bugs in the list; I *really* recommend using a soft background colour
(#E0E0E0 would do fine).

I should point out that soft alternating background colours are used in many
user interfaces that use lists of similar elements (GTK+'s Treeview, for
instance, has it on by default; other web apps like phpMySQLadmin do the same).
I think they have improved usability a lot for long buglists on our system (see
http://makeashorterlink.com/?V51442055), and larger installations with fat
queries would benefit further.

Comment 18

[Myk Melez [:myk] [@mykmelez]]

We may be able to make just the bug ID's TD (or a SPAN enclosing the bug ID) be
styled like a list item so that a lock icon appears on the left-hand side of
each secure bug.  The other option, if that's not noticeable enough, is to
underlay a repeating lock icon image (or similar image indicating security like
a "confidential" stamp) behind the whole row using a background image, although
that brings us back to using background color for secure bugs.

Comment 19

[Asa Dotzler [:asa]]

Highlighting alternate lines in a buglist improves usability quite a bit for me,
expecially when I'm moving between other browser windows/tabs and a buglist. In
that case it dramatically improves the time it takes relocating a particular bug
in the list. I support enabling this feature for bmo.

One Web site, the Usability Institute
<http://www.rsiprogram.com/uinst/genericUI/default.htm> recommends light blue
#eff7ff.  I assume that blue is better than gray for differentiating from the
font color if your standard font is going to be black. Another UI guideline
recommends to use light gray (RGB 230-230-230 and Hex #E6E6E6) as the background
color of the striped rows in tabular data. 

Comment 20

[Christian Reis]

I finally decided to tackle this as a part of but 252810.

Comment 21

[Christian Reis]

Fixed with checkin for bug 252810. Landed on both 2.18 branch and trunk, so
watch out for it landing on a Bugzilla site neat you.