You are currently viewing a snapshot of www.mozilla.org taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to www.mozilla.org, please file a bug.

Skip to main content

You are here: Mozilla Editor > Color Picker Widget

Color Picker Widget

by Charles Manske

This will be implemented as an XPFE widget to be used by all Communicator modules that require color selection. We will probably enhance the widget for use in Ender/Composer to match the features we added during the Gromit (MozillaClassic) project. This document describes that implementation, not the version in Communicator 4.x or earlier. See Enhancements below for suggestions to simplify the widget for general use.

For convience, the UI element that is clicked on to change a color is refered to as the "color button" and the actual color picker that popup up below the button is referred to as the "color picker."

Windows: Mac: UNIX:
<= the "color button"

Invoke

  • Click on the color button on the toolbar. This button looks like a closed combobox with the current text color in the area to the left of the down arrow. The "color picker" should display just below the button, as shown above, unless this would place the picker's bottom border below the bottom of the screen. In that case, the picker should be located above the color button (aligned along left edge of each.) We should also check if the right edge is past the edge of the screen (we don't currently, so its possible to launch it off the right edge.) Move the widget so the right edge aligns with the right screen edge in this case.
  • Press the Alt key down while clicking on the toolbar color button to set a background color. The type of background color set depends on the location of the caret or what is selected:
    • In a table cell or a cell is selected: Cell Background
    • Table is selected: Table Background
    • Anywhere that is not in a table cell: Page Background.
  • Window Menu: Format | Text Color... to change text color (brings up color picker in same location as if you clicked on the toolbar button.)
  • From the Page Properties dialog (Format | Background and Page Colors): Click on one of the color buttons for Text, Link Text, Active Link Text, Followed Link Text, or Background colors.
  • From the Table Properties dialogs (Table | Properties): In both the Table and Cell panes, there is a color button to set the table or cell background respectively.

The color picker behaves exactly like a Windows combobox control and can be invoked with both "Windows-like" and "Mac-like" mouse behaviors. Both behaviors are implemented on the Windows platform (this is normal combobox behavior.) Should we allow "Windows" behavior for the Mac version?

  • The color picker should appear on mouse down on the color button.
  • Mac-like: Hold the mouse down while dragging over the color to be selected. Dragging over a button should show the pressed-down look for the button (and return to normal when moved off the button) and the mouse up should invoke the action for the button.
  • Windows-like: Click (mouse up and down) on the color button and the widget stays visible, so user doesn't have to hold the mouse down when moving over the color squares or buttons.
  • Pressing the Esc key or a mouse up or down anywhere outside of the color widget borders should remove the widget and not set any color.

Initialization

  1. Set the caption text using the string ID passed in during creation. Choices are self explanatory:
    • Text Color
    • Link Text Color
    • Active Link Text Color
    • Page Background Color
    • Table Background Color
    • Cell Background Color
  2. Set the 70 main color squares: 69 are "web-safe" or "Netscape" colors that are guarenteed to be solid when displayed in most browsers. There is one light gray color (192 for R,G, and B; or #C0C0C0 in the HTML hex code) used to make a symetric array of 70 colors. This is the important "silver" color in the Window's fixed 20-color system palette.
  3. Set the "Current color" square from the color passed in during creation.
  4. Set the "Last Picked Color" obtained from editor preferences: "editor.last_color_picked" or "editor.last_background_color_picked" for text and background colors respectively. The default colors (before the very first use of the color picker) are black for last_color_picked and white for last_background_color_picked.
  5. Set the "Quick Palette" colors obtained from editor preferences: "editor.custom_color_x" where "x" is "0" through "9" for the 10 user colors.

Actions

User Action Action
Move mouse cursor over any color square
  1. Show the focus rectangle around the color. (This is a dotted line around the color square on Windows. The focus rectangle is show around the "Last Picked Color" in the Windows image shown above.) This should be done if the mouse button is currently down or up.
  2. Display a tooltip showing the color numbers for the focus color. (E.g., the tooltip for the red Last Picked Color in the image above is "R=204, G=0, B=0 HTML: #CC0000"). In the Window's version, the tooltip will display only if the mouse is up. We should try to make this work when the mouse is down as well.
  3. If mouse is up, show a cursor image () to indicate that the color square may be clicked on or dragged
Click or mouse up over a color square Return the selected color and save in the appropriate "Last Picked Color" preference. Close the picker and save the Quick Palette colors back to preferences.
Click or mouse up on "Other" button Close picker and bring up the OS-specific color picker. This allows the user to pick any other color (including non-websafe colors). The color selected should be passed back to original widget caller as well as being saved in the appropriate "Last Picked Color" preference. In Windows, the 10 Quick Palette colors are used for the first 10 of the 16 "Custom Colors" in the Windows color picker. The fist 10 of those colors should be copied back to the Quick Palette preferences unless the user Cancels from the OS dialog -- this allows changing a Quick Palette color to any color supported by the OS.
Click or mouse up on "Browser Default" button Tell caller to remove any color value, so the viewer's default browser color will be used. Close the picker and save the Quick Palette colors back to preferences.
Click or mouse up on "Help" button Bring up the help topic for the widget. Keep color picker active while using or after returning from help.
Press a number key (1 through 0) when mouse cursor is over a color square Copy the color under the mouse cursor to the Quick Palette color square identified by the number key pressed.
Drag a color from any square and drop on a Quick Palette color square Copy the color under the mouse pointer on mouse down to the Quick Palette color square where the mouse up occurred.
This action is not available (on all platforms) if using the widget in "Mac-like" fashion (dragging the mouse over the color to be selected.)
During the dragging operation, an appropriate cursor icon should be show when moving the cursor over the color picker. These are currently used:
after mouse down on any color square to show that it can be dragged.
when mouse is over a Quick Palette square to show that the color may be dropped (copied) there.
over anywhere else in or outside of the color picker

Enhancements

  • Simplify the widget for use in all modules that require color changing:
  • Since the "current color" will usually be shown on the color button, it is not needed in the simpler widget. The primary reason it is included in the Composer version is to allow a user to copy the current color to the Quick Palette, thus functioning like the "eyedropper" feature of a graphics program by letting the user get a color from the document.
  • We could also eliminate the "caption" in this simpler version, although it might be better to keep it for consistency with the Composer version, which requires the caption. It also adds clarity to what color is being set even when used in the browser.
  • This simpler widget should behave exactly as described for the Composer version, without the Last Picked Color, Quick Palette, and Help functionality.
  • The current version does not support using the Tab or Arrow keys to move from color to color or among the buttons. Full tab and arrow key navigation should be added for any new color picker widget (but maybe not until the next version after 5.0?)
  • It would be nice if we could use the accelerator keys Ctrl or Alt + <number> to set one of the 10 Quick Palette colors when the color picker is up. Current Communicator versions use Ctrl + a number to switch among different module windows. If those aren't used, I recommend using Ctrl. If we continue to use them in 5.0, we should use Alt + number.