30595 - "Blue" skin: grippy looks like a vertical scrollbar

Status: RESOLVED WONTFIX

(SeaMonkey :: Themes, defect, P3)

Description

[Jesse Ruderman]

The thing used to resize the sidebar (the "grippy") looks like a scrollbar. I've
tried several times to scroll in the sidebar using the grippy.

Comment 1

[sairuh (rarely reading bugmail)]

->jrgm for xptoolkit stuff.

Comment 2

[John Morrison]

This is really a UI design issue, no? That grippy can take whatever style is 
requested.

Comment 3

[shuang (gone)]

 Assign it to german for later polish. 

Comment 4

[german]

We found in usability studies, that once folks closed the sidebar, they had a
hard time finding the control to re-open it. Here's a proposal for a more
visible showing of state, adding arrows to indicate where the splitter will go
once the grippy is pressed.
Here's the XUL that would replace the current splitters section in global.css:
/******* Splitters *******/

splitter {
   min-width: 6px;
   min-height: 6px;
   padding: 0px;
}

splitter[state="dragging"]
{
   background-color: gray;
}

[align="vertical"]>splitter {
	/* a vertical splitter */
    cursor: n-resize;
}

[align="horizontal"]>splitter {
	/* a horizontal splitter */
    cursor: w-resize;
}

grippy{
	margin: 0px;
	border: 1px solid transparent;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: #6699CC;
}

grippy:hover{
	border: 1px solid #003366;
	background-color: #6699CC;

}

grippy:active{
	border: 1px solid #003366;
	background-color: #6699CC;
}

[align="vertical"]>splitter grippy {
	/* a horizontal splitter */
	min-width: 65px;
	min-height: 8px;
	max-height: 8px;
}

[align="horizontal"]>splitter grippy {
	/* a horizontal splitter */
	min-width: 8px;
	max-width: 8px;
	min-height: 65px;
}

[align="horizontal"]>splitter[collapse="before"] grippy {
	/* a horizontal splitter collapsing to left, open*/
	background-image: url("chrome://global/skin/grippy-horizontal-before.gif");
}

[align="horizontal"]>splitter[collapse="before"][state="collapsed"] grippy {
	/* a horizontal splitter collapsing to left, closed*/
	background-image: url("chrome://global/skin/grippy-horizontal-after.gif");
}

[align="horizontal"]>splitter[collapse="after"] grippy {
	/* a horizontal splitter collapsing to right, open*/
	background-image: url("chrome://global/skin/grippy-horizontal-after.gif");
}

[align="horizontal"]>splitter[collapse="after"][state="collapsed"] grippy {
	/* a horizontal splitter collapsing to right, closed*/
	background-image: url("chrome://global/skin/grippy-horizontal-before.gif");
}

[align="vertical"]>splitter[collapse="before"] grippy {
	/* a vertical splitter collapsing to top, open*/
	background-image: url("chrome://global/skin/grippy-vertical-before.gif");
}

[align="vertical"]>splitter[collapse="before"][state="collapsed"] grippy {
	/* a vertical splitter collapsing to top, closed*/
	background-image: url("chrome://global/skin/grippy-vertical-after.gif");
}

[align="vertical"]>splitter[collapse="after"] grippy {
	/* a vertical splitter collapsing to bottom, open*/
	background-image: url("chrome://global/skin/grippy-vertical-after.gif");
}

[align="vertical"]>splitter[collapse="after"][state="collapsed"] grippy {
	/* a vertical splitter collapsing to bottom, closed*/
	background-image: url("chrome://global/skin/grippy-vertical-before.gif");
}
/**
 * gray horizontal splitter for pane views
 */
splitter.gray-horizontal-splitter {
	background-color: #CCCCCC;
}

splitter.gray-horizontal-splitter #begincap {
	min-width: 8px;
	max-width: 8px;
	background-image: url("chrome://global/skin/gray-bottomleft.gif");
	background-repeat: no-repeat;
	background-position: 0% 100%;
}

splitter.gray-horizontal-splitter #endcap {
	min-width: 8px;
	max-width: 8px;
}

I will add the images in a zip file shortly as well as a screenhot.

Comment 5

[german]

Attachment: zip archive containing the replacement images for grippies, drop into global/skin/default/

Comment 6

[german]

Attachment: screenshot of result: more visible grippy

Comment 7

[german]

re-assigning to Ben for review, possibly check-in if OK.

Comment 8

[german]

Attachment: updated global.css current with 20000306 builds

Comment 9

[german]

Attachment: patched version of sidebarOverlay.css current with 20000306 builds

Comment 10

[german]

sorry for cluttering up that bug with the patched css for global.css. I meant to
do an attachment.

I found one minor glitch with what I posted before, and have now attached
patched version of both global.css and sidebarOverlay.css that should properly.
Ben, Slamm can you pls take a look? Thanks.

Comment 11

[Chris Nelson]

I have tested this on the 2000030708 Win32 build, and it looks good (and much 
better than the previous grippy). It behaves as expected - now if only the 
actual opening and closing worked as well...

Comment 12

[Ben Goodger (use ben at mozilla dot org for email)]

not a priority, pushing out as far as possible.

Comment 13

[Eli Goldberg]

QA Assigning non-confidential New/Assigned User Interface: Design Feedback bugs 
to Matthew Thomas ([e-mail]).

Matthew Thomas is now the QA owner for the User Interface: Design Feedback 
component. (Bugs that involve UI issues in the Netscape-branded Mozilla browser 
should continue be QA assigned to [e-mail].)

Comment 14

[Steve Lamm]

I'll take this one. I have new images to add. I am cleaning up other sidebar 
styles too.

Comment 15

[Steve Lamm]

I checked in a fix. The list-style-image for the grippy seems to be broken, so I
used background-image for now.

Comment 16

[Steve Lamm]

Ben's new sidebar look does not have an image on the grippy.

Comment 17

[Steve Lamm]

You broke it. You fix it.

Comment 18

[german]

adding nsbeta2. Need to fix this broken UI.

Comment 19

[leger]

Putting on [nsbeta2-] radar.  

Comment 20

[Brendan Donohoe]

*** Bug 44748 has been marked as a duplicate of this bug. ***

Comment 21

[johng]

important piece of polish

nsbeta3

Comment 22

[johng]

nav traige team:
[NEED INFO] is this fixed?  If so, please close the bug.  (If we run into new 
usability issues, we will open a new bug, but lets close this baby.)

Comment 23

[german]

This was fixed but one of Ben's checkins overrod the proper images. we have the 
updated images, so we should update the grippy to show the arrow heads rather 
than the 4-point ploygon it using now.  Will mark nsbeta3 and this will be fixed 
with the revamp of the modern skin. adding [modern skin] to summary.

Comment 24

[Matthew T (active 1999-2002)]

--> Themes

Comment 25

[hangas]

Marking nsbeta3- while assigned to german.  Should be reconsidered when assinged 
to an engineer.

Comment 26

[Todd Pringle]

German, is this fixed (appears to be with new sidebar graphics)?

Comment 27

[Jesse Ruderman]

This bug is actually about the "blue" skin, not the new "modern" skin.  It just 
didn't get updated after the name switch.

Comment 28

[german]

The blue skin is not actively maintained by Netscape anymore. If somebody wants
to take this bug and run with go for it. Temp. assigning to Ben since I think he
knows somebody on Mozilla who volunteered to keep blue up-to-date.

Comment 29

[Ben Goodger (use ben at mozilla dot org for email)]

sending to jag, as he has foolishly expressed interest in the Blue skin... ;) 

Comment 30

[Gilles Durys]

Blue is dead (see bug 72717)
Marking wontfix

Comment 31

[Peter Trudelle]

I'm sure Netscape wouldn't really  mind if someone wanted to keep Blue alive. 
It is checked into an open source project, after all.  Besides, jag owns the
bug, and can do whatever he wants with it.

Comment 32

[Peter "jag" Annema]

I say ditch blue, unless someone else wants to try and revive it.

However, I would like to see a light-weight skin replace blue. Any takers?