[XUL Syntax] <wizard> element, for platform-savvy assistants/wizards

RESOLVED FIXED

Status

()

enhancement
RESOLVED FIXED
19 years ago
11 years ago

People

(Reporter: mpt, Assigned: hewitt)

Tracking

Trunk
Other
Other
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [XUL1.0])

Attachments

(10 attachments)

Reporter

Description

19 years ago
The basic problem: Mozilla's profile setup and account setup UIs don't look at 
all how assistants are supposed to look on Mac OS, or how wizards are supposed 
to look on Windows. Inconsistency with the rest of the platform slows the user 
down, not to mention looking unprofessional.

On #mozilla, Hyatt volunteered to write the XBL for a new root-level XUL 
element which will, as much as practical, look like the standard UI on each 
platform.

Typical syntax (though without the hard-coded attributes, of course):
<assistant
  title="Account Setup Assistant"
  icon="envelope.png"
>
  ...
</assistant>

And:
<page
  class="first|normal|last"
  title="E-mail address"
>
</page>

The Windows UI guidelines specify two different classes of wizard, the `simple 
wizard' and the `advanced wizard'. For the sake of simplicity and XP-ness, 
we'll assume that on Windows all assistants in XP Toolkit apps will look like 
advanced wizards.

Here's a starting point for what to define platform-wise. Some of the following 
details may be slightly incorrect, and some I just don't know because I'm not 
on Windows and they're not specified in enough detail in the Windows UI 
guidelines. I've also slightly broken the rules on both platforms, for the sake 
of write-once run-anywhere:
*   text refers to them as `assistants' throughout, whereas they're normally
    `wizards' on Windows;
*   the `{Do something}, then click the right arrow to continue' text for the
    Mac OS version won't be context-sensitive, whereas it normally is;
*   the redundant caption from the header area, normally present on Windows, is
    not included (IMO it detracts from usability anyway).

                     Mac OS                           Windows
----------------------------------------------------------------------------
width (excluding     400 pixels                       331 DLUs
window chrome)

height (excluding    316 pixels                       ~217 DLUs
window chrome)

window chrome        close box, minimize box          none (according to the
widgets                                               UI guidelines, and I
                                                      agree with them)

icon position on     at the top right corner, half    in two places:
the first page       in the header area and half in   * at the top right corner
                     the body area                      of the blue pane
                                                      * greatly enlarged in
                                                        background of blue
                                                        pane, offset so only
                                                        right half is visible,
                                                        and with
                                                        -moz-opacity: 0.25 or
                                                        thereabouts

icon position on     same as for first page           at right end of header
pages other than                                      area, inside blue box
the first page

header area style    {                                {
(in Windows, there   background:                      background:
isn't a header area    url(pastel-variation.png);       white;
on the first page)   border:                          border-bottom:
                       1px outset -moz-variation;     2px solid groove;
                     }                                }

page title style on  {                                {
pages other than     font:                            font:
the first page         small-caption;                   caption;
                     font-weight:                     font-weight:
                       bold;                            bold;
                     padding-left:                    padding-left:
                       24px;                            14DLUs;
                     }                                }

page title style on  {ditto}                          {
the first page                                        font:
                                                        caption;
                                                      text-size:
                                                        2em;
                                                      }

title automatically  Introduction                     Welcome to the {Title of
used for the first                                    Assistant}
page

title automatically  Conclusion                       Completing the {Title of
used for the last                                     Assistant}
page

text automatically   Click the right arrow to         To continue, click Next.
inserted at the      continue.
bottom of the body
area on the first
page

text automatically   Enter these details, then        To continue, click Next.
inserted at the      click the right arrow to
bottom of the body   continue.
area on pages other
than the first one

body area style      {                                {normal GUI style}
                       background: white;
                       font: small-caption:
                     }

footer area style    {                                {
                     padding-left:  6px;              padding: 7DLUs;
                     padding-right: 6px;              }
                     padding-top: 3px;
                     padding-bottom: 3px;
                     }

buttons on all       * left triangle (Previous)       * < Back
pages except the     * box showing the page number    * Next >
last page            * right triangle (Next)          * Cancel

buttons on the       in the footer area:              in the footer area:
last page            * left triangle (Previous)       * Back
                     * box showing the page number    * Finish
                     * right triangle (disabled)      * Cancel

                     at the bottom of the body        at the bottom of the body
                     area:                            area:
                     * Show Details (left end)        * Show Details (left end)
                     * Cancel (second from right)
                     * Go Ahead (right end)
                     {font: caption !important;}

Mac OS references:
*   <http://developer.apple.com/dev/techsupport/develop/issue27/arcellana.html>
    (old, but still mostly relevant)
*   screenshots attached to this bug.

Windows references:
*   <http://msdn.microsoft.com/library/books/winguide/ch13h.htm>
*   <http://msdn.microsoft.com/library/books/winguide/ch14e.htm>.

CCing Ben who wrote the old wizard code, lordpixel for Mac UI checking, and 
Timeless for Windows UI checking and to tell us how many pixels a `DLU' is.
Reporter

Comment 1

19 years ago
Ben said this was his bug, unfortunately.
Assignee: hyatt → ben
Severity: normal → enhancement

Comment 7

19 years ago
Well, as you can see, things have changed. I feel we should be doing the Mac OS X 
look and feel, after all, even Apple's new applications that run on 9.X use it.
Reporter

Comment 8

19 years ago
Which new applications that run on 9.x are you referring to? AppleWorks 6 
doesn't use OS-X-style assistants. Neither does iMovie. Nor iTunes.

Mac OS X is another country, as far as chrome is concerned -- it will need its 
own assistant XBL distinct from Mac OS Classic, just as it will need its own 
Classic skin distinct from Mac OS Classic. I don't think the Windows look 
should be imposed on Mac OS (hence this bug), but nor do I think the Mac OS X 
look should be imposed on Mac OS Classic or vice versa.

Everything shown in the screenshots you've attached can be done via XBL using 
the XUL syntax I described. The exception is the table of contents down the 
left, which is impossible in (for example) the Account Setup Assistant where 
you don't know in advance how many pages there are going to be (it depends on 
the kind of account you set up).

Reassigning back to Hyatt, who said he'd get this barely working. :-)
Assignee: ben → hyatt

Comment 9

19 years ago
Oh, sorry. I just meant that things like iTunes, iMovie etc use Aqua scrollbars 
and other controls in some places. A throw away comment, nothing important. 
iTunes etc don't use wizards at all (that I've seen) so its a moot point.

The table down the left in the assisstants on Mac OS X always shows all the 
possible steps it seems, even though some may be skipped (the Coloursync 
assistant skips 2 of these steps for me). Good or bad, that's what it does, so 
that at least isn't really an issue.

Yes, the XUL will handle both, but I think you're going beyond that into 
specifying how things should look in this bug, no? After all this bug also has 
CSS in it. 

If we have the resources to do both, great. If not, I propose we do the Mac OS X 
one first. It'll serve on Mac OS 9. I know you're probably going to object to 
that comment but we're resource constrained, and I'd rather look forward not 
back. Mac OS 9 has more users, but its a dead end at this point. That situation 
will change or there won't be a platform to discuss at all.

Comment 10

19 years ago
This is awesome, mpt!  Thanks for doing all this work!

I have the wizard behavior matching Windows pretty well.  I'll be working on
skinning it next, and then refining the behavior for the other OSes.


Status: NEW → ASSIGNED
Summary: <assistant> element, for platform-savvy assistants/wizards → [XUL Syntax] <wizard> element, for platform-savvy assistants/wizards
Whiteboard: [XUL1.0]

Updated

19 years ago
Blocks: 70753
Target Milestone: --- → mozilla0.9

Comment 11

19 years ago
http://www.codeproject.com/miscctrl/usingctrlsindialogs.asp

Dialog unit (DLU) 

A unit of horizontal or vertical distance within a dialog box. A horizontal DLU 
is the average width of the current dialog box font divided by 4. A vertical 
DLU is the average height of the current dialog-box font divided by 8. 

As can be seen from the above definition, DLUs depend on the font and assume 
that font's aspect ratio is 2:1 (height:width). This is why some dialogs will 
look good on the system on which they were designed but not so good on others. 
It is extremely important with multilingual application, because not only can 
the length of the text vary in another language but also the style of the font.
Reporter

Comment 12

19 years ago
lordpixel: Mac OS Classic is currently a first-tier platform for Mozilla, while 
Mac OS X is a second-tier platform. If you want that situation to change, you 
should file it as a separate bug.

Hyatt: I think the alert shown if the user clicks the close button on Mac OS, 
or the `Cancel' button on Windows, can probably be done automatically too -- 
without the app author having to do anything extra. This is how it looks on Mac 
OS:
+------------------------------------------------------+
|::::::::::::::::::::::::::::::::::::::::::::::::::::::|
+------------------------------------------------------+
|  .   Are you sure you want to quit the {assistant    |
| /!\  title}?                                         |
| """                                                  |
|      Your answers will not be saved and no settings  |
|      will be changed for you.                        |
|                                                      |
|                                ( Cancel ) (( Quit )) |
+------------------------------------------------------+

Stephen: CSS doesn't have DLUs as a unit of measurement. Could there be a 
reasonable approximation in ems or exs?

Comment 13

19 years ago
mpt: i'm not sure what a dlu would equal in ems or exs. sorry.

Comment 14

19 years ago
Posted patch Wizard codeSplinter Review

Comment 16

19 years ago
hewitt is taking this over.
Assignee: hyatt → hewitt
Status: ASSIGNED → NEW
Assignee

Comment 17

18 years ago
An update for where I'm at: I've just finished making the wizard adapt the UI to
the various mac/windows subleties.  I'm now working on integrating the
functionality of the wizardManager into the widget.  
Status: NEW → ASSIGNED
Target Milestone: mozilla0.9 → mozilla0.9.1

Comment 18

18 years ago
removing milestone
Target Milestone: mozilla0.9.1 → ---
Assignee

Comment 19

18 years ago
The following patch includes some enhancements to hyatt's original patch:

1. Ability to step through wizard sequentially or randomly - each page has a
pageid, and you can step randomly by setting the next attribute on a page to
indicate which pages comes after it.  If no next attributes are set, the wizard
steps sequentially.

2. The current page number can be displayed in content

3. The mac classic version of the wizard looks and behaves exactly like native
mac assistants - e.g. blue arrow back/next buttons, finish and cancel only on
last page, current page number displayed, wizard icon can overlap half of the
header and half the page background

4. finish/next version are stacked, so no jiggling when you get to the last page

5. each page can have it's own events for hiding/showing the page, and can
prevent being shown/hidden by returning false

6. the wizard has events for changing the page, finishing, and canceling the
wizard. All can be overriden by returning false.


Assignee

Comment 20

18 years ago
Posted patch latest patchSplinter Review
Assignee

Comment 23

18 years ago
new bindings are in
Status: ASSIGNED → RESOLVED
Closed: 18 years ago
Resolution: --- → FIXED
Assignee

Comment 24

18 years ago
*** Bug 43795 has been marked as a duplicate of this bug. ***

Updated

11 years ago
Component: XP Toolkit/Widgets: XUL → XUL
QA Contact: jrgmorrison → xptoolkit.widgets
You need to log in before you can comment on or make changes to this bug.