885973 - Add icons to changed tabs in Chatzilla

Status: NEW

(Other Applications :: ChatZilla, enhancement)

Description

[Will Pittenger]

Attachment: Screen capture of three CZ tabs as we have them now

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.

Comment 1

[Will Pittenger]

Attachment: This is what I think we need. (The shown icons are possibilities only. My drawings are rather crude and meant for illustration of what I would like to see only.)

Comment 2

[Tony Mechelynck [:tonymec]]

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 http://chatzilla.hacksrus.com/motifs/ )

  /***************************************************************
   *                         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
    }

Comment 3

[Will Pittenger]

Well, here's my version.  Everything's attached in upcoming posts.

Comment 4

[Will Pittenger]

Attachment: Sample userChrome.css by Will Pittenger

Comment 5

[Will Pittenger]

Attachment: Attention.svg (Required for Will Pittenger's userChrome.css)

Comment 6

[Will Pittenger]

Attachment: Talk.svg (required by Will Pittenger's version of userChrome.css)

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.

Comment 7

[Will Pittenger]

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?

Comment 8

[Will Pittenger]

Attachment: Placeholder to keep the tab width from constantly changing

Comment 9

[Will Pittenger]

Attachment: Sample userChrome.css by Will Pittenger

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.

Comment 10

[Will Pittenger]

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.

Comment 11

[Will Pittenger]

Attachment: Sample userChrome.css by Will Pittenger

I fixed the alignment issues.

Comment 12

[Will Pittenger]

Attachment: Sample tabs with this userChrome.css.png

This images shows what my userChrome.css looks like.

Comment 13

[Will Pittenger]

Attachment: 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.

Comment 14

[Will Pittenger]

Attachment: 8385352: Sample tabs with this userChrome.css.png

Comment 15

[Wayne Mery (:wsmwk)]

this will of course make tabs wider, hitting against bug 346539