Open Bug 885973 Opened 7 years ago Updated 4 years ago

Add icons to changed tabs in Chatzilla


(Other Applications :: ChatZilla, enhancement)

Not set


(Not tracked)


(Reporter: will.pittenger1+mozbugzilla, Assigned: rginda)



(8 files, 3 obsolete files)

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20100101 Firefox/21.0 (Beta/Release)
Build ID: 20130511120803

Steps to reproduce:

When a tab's contents change, it can be hard to tell it changed.  On my screen, tabs with no changes have black text.  Tabs were the only change was a change to the nick list are shown with blue text that is hard for me to tell apart from the black text tabs.  Only tabs where someone posted something are obvious with green text.  All this would probably be worse for someone who happens to be color-blind.

So it might make sense to add icons to each changed tab.  The icon would reflect the type of change.
FWIW, I am using the following in {profile}/chrome/userChrome.css (where {profile} is my profile directory) in order (among others) to make cZ tabs more distinctive. Other combinations of background / foreground / bold / underline / before-text / etc. could of course be applied to these or other attributes of the tabs.
This requires no changes to the extension source and comes as a complement to any motif applied by the user (see )

   *                         CHATZILLA                           *

   * styling for the Chatzilla userlist
  #chatzilla-window #user-list treechildren::-moz-tree-cell-text(selected)
    { color:              white                   !important
  #chatzilla-window #user-list treechildren:-moz-tree-cell-text(selected)
    { color:              white                   !important

   * make the views more distinctive by means of tab background colors etc.
   * the order of the "tab" rules is important (last one wins)
  #chatzilla-window #view-tabs tab                        /* channel tab  */
    { background-color:   #9FF                    !important /* lightcyan */
  #chatzilla-window #view-tabs tab[href$=",isnick"]       /* query tab    */
    { background-color:   #F99                    !important      /* pink */
  #chatzilla-window #view-tabs tab[href$="/"]             /* server tab   */
    { background-color:   yellow                  !important    /* yellow */
  #chatzilla-window #view-tabs tab[href="irc://"]         /* client tab   */
    { background-color:   white                   !important     /* white */
  #chatzilla-window #view-tabs tab[selected="true"]       /* current tab  */
    { outline:            2px solid #090          !important     /* green */
  #chatzilla-window #view-tabs tab[state="attention"]     /* tab signalling
                          for attention (I wanted blink but doesn't work) */
    { color:              #900                    !important       /* red */
  #chatzilla-window #view-tabs tab[state="activity"]      /* tab with
                                                            unread speech */
    { color:              #093                    !important     /* green */
    ; text-decoration:    underline               !important
  #chatzilla-window #view-tabs tab[state="activity"] *
    { text-decoration:    underline               !important
Well, here's my version.  Everything's attached in upcoming posts.
I can't say that I'm entirely happy with this version of the icon, but it will have to do.  I'm not much of an artist.
The only issue I've seen so far is cZ seems to let items inserted by my userChrome.css flicker.  Icons will appear normal until you mouse over the first time.  Then, cZ will act for a moment like state attribute doesn't match what it does.  I find myself wondering if there's a bug in toolkit code responsible for tabs.  Does Firefox handle favicons in tabs differently than I did?
New version of my userChrome.css adds a placeholder to otherwise blank tabs to cut down how how much the tab width can change.  It also prevents the client and network tabs from being highlighted unless you need it.
Attachment #8383019 - Attachment is obsolete: true
One quirk I'm seeing in my latest userChrome.css is that some tabs have their title drawn too low.  It's readable, but downright close to being too low.  I don't see a handy fix.
I fixed the alignment issues.
Attachment #8384235 - Attachment is obsolete: true
Attached image Sample tabs with this userChrome.css.png (obsolete) —
This images shows what my userChrome.css looks like.
Attached image plus-minus.svg
I got tired of the text for superfluous tabs not being aligned with the other tabs.  So I made another icon for those tabs that's the same height as the other icons.  Like the others, this one's a SVG rather than plain text.  However, it looks the same.
Attachment #8385352 - Attachment is obsolete: true
this will of course make tabs wider, hitting against bug 346539
Severity: normal → enhancement
Ever confirmed: true
You need to log in before you can comment on or make changes to this bug.