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

Menu Button Requirements

Written by Eric Vaughan
Last updated 3/12/99

Overview

This document covers two related UI elements: Image Buttons and Menu Buttons.

An Image Button is a button capable of displaying both an image (gif, jpeg, etc) and descriptive text within the boundary of the button. Clicking anywhere within the boundary of the object triggers an action (normally a JavaScript onClick handler). The button can be enabled or disabled, and have a different appearance when the mouse is inside its border.

A Menu Button extends an Image Button to allow for a menu or tree to popdown from the button when the mouse is down for a certain amount of time (referred to as "click and hold"). An example of a Menu Button in 4.X is the "Back" button which pops down a menu containing the window history on a click-and-hold. Mozilla extends this notion with the ability to pop down a live tree view.

Requirements

For Image Buttons:

  • Manipulation of images and properties through the DOM and CSS
  • Must support the following JavaScript event handlers
    • onClick
    • onMouseOver
    • onBlur
    • onChange
    • onFocus
  • Must support 4 images and states

    normal

    back-normal.gif (293 bytes)

    rollover

    back-over.gif (402 bytes)

    depressed

    back-pressed.gif (390 bytes)

    disabled

    stop-disabled.gif (315 bytes)
  • Must support multiple alignment

    home.gif (253 bytes)text right image left

    text left image righthome.gif (253 bytes)
    home.gif (253 bytes)
    Text bottom image top


    Text top image top
    home.gif (253 bytes)

  • If the button is compressed smaller than it can accommodate, it needs to be able to truncate its text.

    Right truncation

    home.gif (253 bytes)text right i...

    Left truncation

    ....t image righthome.gif (253 bytes)

    Center truncation

    home.gif (253 bytes)text ... left
  • A context menu should appear with a context click if the button doesn't have a menu attached to it already.
  • Should be able to gray out its image automatically in a disabled state (without forcing an additional image to be specified).

For Menu Buttons

Everything an Image Button could do, plus the following:

  • show a popdown menu, either on a click or a click-and-hold

    popdownmenu.gif (1614 bytes)

  • show a popdown tree, either on a click or a click-and-hold

    popdowntree.gif (1852 bytes)

  • For the tree, users need to be able to expand or collapse folders within the tree without it going away. The tree goes away only when the user clicks outside of the presented tree or on an element that has no children (a "leaf").
  • Children which populate the popdown menu or popdown tree are specified as children of the Menu Button in the DOM.
  • Child content can be generated from an RDF datasource. This implies that the creation of this child object (be it a tree, menu, etc) must be fully dynamic. The button should only attempt to construct the child object when it knows it needs to display it.