New UI: Dialog panel within a menu
Jan Odvarko
new UI for displaying dialog-panel within a menu.
See the following screen-shot to understand what I mean:
http://www.softwareishard.com/attachments/popup-panel.png
Does anybody have any suggestion how to do this?
Are there any existing examples?
Just to notice that I have used the following XUL/XBL construction
(shortened), but I am facing a few weird problems (mainly the input
xul:textbox doesn't work properly and xul:label and xul:description
are not visible from some reason)
Do you think this is the right approach?
<toolbarbutton>
<menupopup>
<menuitem/>
<menuitem/>
<menuseparator/>
<menu>
<!-- This is the popup panel dialog -->
<menupopup id="fcCustomPathFilterPanel" ignorekeys="true"/
>
</menu>
</menupopup>
</toolbarbutton>
<!-- XBL implementation of the dialog -->
<binding id="popupFilterPanel" extends="chrome://global/content/
bindings/popup.xml#panel">
<content>
<xul:vbox align="center">
<xul:label>Some description of the panel:</xul:label>
<xul:hbox>
<xul:textbox anonid="filterValue" size="35" />
<xul:button label="Apply"
xbl:inherits="oncommand=onapply" />
</xul:hbox>
</xul:vbox>
</content>
</binding>
#fcCustomPathFilterPanel {
-moz-binding: url("chrome://firecookie/content/
popupFilterPanel.xml#popupFilterPanel");
}
I really appreciate any help/tips, thanks!
Honza
Neil Deakin
> One thing I would like to implement in my extension (for Firebug) is a
> new UI for displaying dialog-panel within a menu.
>
> See the following screen-shot to understand what I mean:
> http://www.softwareishard.com/attachments/popup-panel.png
>
> Does anybody have any suggestion how to do this?
> Are there any existing examples?
>
> Just to notice that I have used the following XUL/XBL construction
> (shortened), but I am facing a few weird problems (mainly the input
> xul:textbox doesn't work properly and xul:label and xul:description
> are not visible from some reason)
>
> Do you think this is the right approach?
>
The right approach is for us to fix the bug (which I can't find right
now) where panels aren't recognized inside buttons/menus.
Then, <panel> would be used instead of <menupopup>.
The visibility problems are probably some theme related issue.
Brian King
> One thing I would like to implement in my extension (for Firebug) is a
> new UI for displaying dialog-panel within a menu.
It looks from the screenshot that you are trying to change the value of
the cell. Why not just make the cell editable? Less is more.
- Brian
Jan Odvarko
I would actually like to have the dialog a bit more complicated. There
should be a short description and a link to a help page (I am also
thinking about a Cancel button).
Also, in case of positive user experience I would consider to use this
UI even in Firebug.
> Why not just make the cell editable? Less is more.
Sounds like a workaround I could use in the meanwhile. What do you
mean by cell here?
Honza
Gijs Kruitbosch
test that before doing it like this - I've never seen it before, and <panel> is
a massive PITA to make accessible anyway, so I would bet against it working out
of the box...
~ Gijs
Jan Odvarko
> Quick comment: accessibility may or may not be horrible here. Would be good to
> test that before doing it like this - I've never seen it before, and <panel> is
> a massive PITA to make accessible anyway, so I would bet against it working out
> of the box...
There are also other problems with the <panel> (see top of this
thread) so, I see any accessibility problems as another bugs that must
be fixed.
In general the accessibility problem in this case should be the same
as with any other dialog in the UI. This approach, I am thinking
about, just makes the path to reach the dialog easier.
The user doesn't have to make any decision (i.e. to execute a menu
item, and notice that it's always scary for the user to make any
decision, especially the first time) to see what would happen. The
dialog is just there, ready to be used and disappears like any other
sub-menu if it isn't what the user is looking for.
This solution wouldn't be obviously suitable for dialogs with a lot of
fields and controls that need some time to be initialized. But, the
user doesn't like such dialogs anyway.
Honza
Gijs Kruitbosch
> <snip>
> In general the accessibility problem in this case should be the same
> as with any other dialog in the UI.
Hmm, not necessarily. There is the difference between <panel> and a normal
dialog, and there's the fact that you're sticking it in a menu, where OS a11y
code may not expect such elements to be. It's not guaranteed screenreaders / OS
a11y APIs will pick the sane road here. You may also want to look at the bugs
that were originally filed about the accessibility (or rather, lack of) of the
bookmark edit panel. I'm not sure if they've been fixed in the general case, and
don't have the bug #s handy, but they should not be too hard to find...
~ Gijs
Peter Weilbacher
> One thing I would like to implement in my extension (for Firebug) is a
> new UI for displaying dialog-panel within a menu.
>
> See the following screen-shot to understand what I mean:
> http://www.softwareishard.com/attachments/popup-panel.png
If you are interested to run your app on Linux, you might want to use
another approach. If any of the users runs a window manager with sliding
focus on, this will fail miserably because it easily closes before you
can type anything in there. (I experience this daily with a similarly
"enhanced" menu in Sunbird.)
Peter.
Arivald
> One thing I would like to implement in my extension (for Firebug) is a
> new UI for displaying dialog-panel within a menu.
>
> See the following screen-shot to understand what I mean:
> http://www.softwareishard.com/attachments/popup-panel.png
>
> Does anybody have any suggestion how to do this?
> Are there any existing examples?
>
> Just to notice that I have used the following XUL/XBL construction
> (shortened), but I am facing a few weird problems (mainly the input
> xul:textbox doesn't work properly and xul:label and xul:description
> are not visible from some reason)
>
> Do you think this is the right approach?
>
>
> Honza
>
>
From https://developer.mozilla.org/en/XUL_Tutorial/Simple_Menu_Bars
> Normally only menuitems and menuseparator's would be placed on a
> menupopup. You can place any element on a menupopup, however they
> will be ignored on a Macintosh.
On Mac, menu depends on system.
So if you want your app to run on Mac, You must do it in other way.
--
Arivald
Robert Kaiser
> One thing I would like to implement in my extension (for Firebug) is a
> new UI for displaying dialog-panel within a menu.
>
> See the following screen-shot to understand what I mean:
> http://www.softwareishard.com/attachments/popup-panel.png
I'm not sure how well this works on Mac, but you might be lucky as this
is not the window's top menu.
Robert Kaiser
Neil Deakin
<panel> is a massive PITA to make accessible anyway
In what way? Are there ways we can fix this?