Interface Design – Week 10

Topics: Designing Firefox Widgets & Various Accessories
Lab / Activity: Firefox Lab
Homework due this week: Firefox Phase 3: Tabs and Throbber
Homework due next week: Firefox Phase 4: Choice Elements

Interface Design – Firefox Phase 4: Due week 11
Choose a combination of the following parts that add up to 20 points.
Any points beyond that will count as extra credit!
(parentheses refer to the example theme “LaurasThemeWeek8.jar”)

CHOICE ELEMENTS:
Choose a combination of the following elements that add up to 20 points.
When you turn in your work, turn in a list of which elements you modified.

TOOLBAR BACKGROUNDS: (4pts)
(in “browser” folder)

status bar = the bar across the bottom of the browser.
(example: statusbar-hg.png)

toolbar = main icons (back, forward)
(example: toolbar-hg.png)

menu bar = the top bar, above main icons.
On a PC it holds the menu options “file, edit, view,” etc.
(example: menubar-hg.png)

personalized toolbar = the “bookmarks” toolbar below the standard toolbar,
Contains rss, getting started, “digg” or “del.icio.us” buttons, any links you add, etc.
(example: perstoolbar-hg.png)

VARIOUS UTILITY WINDOW BORDERS: (2pts)
(global/backgrounds)

Background for utility windows and loading page:
(window_bg.png)

Utility window headers:
(header36.png, header57.png)

Splitters for separated windows:
(splitter_hori.png, splitter-verti.png)

ADDRESS BAR: (2pts)
(in “browser/icons” folder)

The address bar has 3 sections, right, left, and middle.
This is so the address bar can stretch to fit any size.
Make sure the edges of the graphics match.

(example: URLbar-right.png, URLbar-left.png, URLbar-hg.png)

BUTTONS: (4pts)
(in “global/button” folder)

Notice that there are 2 parts to the buttons: start and end (left and right).
This is so the buttons can be rendered at any length.
Make sure the edges of the sections match!

4 Button states: Regular, Hover, Active (onClick), Disabled (inactive)
(example: buttonend.png, buttonend_hov.png, buttonend_act.png, buttonend_dis.png)

TEXT BOXES and FILE FIELDS: (3pts)
(in “global/textbox”)

2 sections: right and left
2 States: regular and disabled.
(example: filefield_left.png, filefield_left_dis.png)

TEXT BOX DROP-DOWN: (1pt)
(global/menulist)
These need to match regular text box graphics. (global/textbox)
Drop-marker States: Regular, Active, Disabled, Hover

DROP-DOWN MENUS: (1pt)
(in “global/menu” and “global/menulist”)

backgrounds and hover states for drop-down menu items.
(example: menuitem_bg.png, menuitem_bg_hov.png)

CHECK BOXES: (3pts)
(global/checkbox)
States: Active, Active-hovered, Off, Off-hovered, Disabled

RADIO BUTTONS: (3pts)
(global/radio)
States: Active, Disabled, Off, Off-hovered

POPUP WINDOW: (2pts)
(global/popup)
popup_bg.png = the top and side bar
submenu_bg.png = the bottom bar

ADD-ONS WINDOW: (2pts each icon)
(mozapps/extensions)
Icons for themes and plug-ins.
(viewButtons.png)

SCROLLBARS: (3pts)
(global/scrollbar)
Backgrounds, arrow buttons, and grippers.

BOOKMARKS TOOLBAR: (2pts each icon)
(browser/bookmarks)
Bookmarks-toolbar.png

HELP TOOLBAR: (2pts each icon)
(in “help” folder)

TREE MENU: (2pts)
(global/tree)
Backgrounds and icons

VARIOUS BROWSER ICONS: (2pts each icon)
Safe Browsing: (browser/safebrowsing)
Feed icons: (some are in “browser/feeds”, some just in “browser”)
Report site (browser/reporterMenuButton.png)
Security (browser/Secure.png, security-broken.png)

VARIOUS GLOBAL ICONS: (2pts each icon)
Error, warning, question, finder icons.
(global/icons)
Off states and bullet icons for Error, warning, question, messages.
(global/console)

VARIOUS MOZAPPS ICONS: (2pts each icon)
Downloading window: (mozapps/download)
Generic Profile Icons: (mozapps/profile)
Updates Window Icons: (mozapps/update)
Installer Icon: (mozapps/xpinstall)

OPTIONS WINDOW: (2pts each icon)
(to see this, select Tools > Options)
Icons: (browser/preferences/options.png)
Main, Tabs, Content, Feeds, Privacy, Security, Advanced
States: Regular, Hover

Headers of options window:
(browser/preferences/groupbox_caption.png, groupbox_caption.png)

Tabs in options window:
(global/tabbox)