dojox/mobile gallery "Headings" demo does not display gray back button correctly on Firefox

[cjolif]

See attached image.

[cjolif]

screenshot of the problem

[Adrian Vasiliu]

The same trouble also holds for the button with "Back" label in the "Shape" tab of the "Buttons" demo of the gallery. And it hurts on both Firefox and IE (including IE9).

The good news is... that this does not reveal a defect in the library. It is a defect in the demo with "compat" desktop browsers. It has nothing to do with the behavior of the typical "Back" buttons as they can be seen in most mobile apps. Indeed, in the mobile gallery, these two occurrences of "Back" buttons are usages of dojox/mobile/Button with custom CSS provided in the demo.

Nowadays, users get the "Back" buttons in two very easy ways, without writing any custom CSS: either by setting the "arrow=left|right" property of a ToolBarButton (the property only exists since Dojo 1.8), or by setting the "back" property of a Heading (which internally creates a ToolBarButton). These work fine including in "compat" mode.

From this point of view, we could imagine to modify the gallery demo to use for the "back" buttons a ToolBarButton instead of a customized Button. However, the demo also shows buttons with a rounded shape (in the "Buttons" view) and with various custom colors and textures, so for consistency it might be better to just fix the CSS in the demo. On the other side, if we keep using in the gallery a Button with custom CSS for the "back" button, it might be misleading for users that would use the gallery for learning how to code, because they may miss the fact that there's a much easier solution to get back buttons... Maybe we should show both solutions in the gallery? or this would be overkill?...

[Adrian Vasiliu]

Okay, so my proposal would be:

a) In the "Headings" view, we replace the Button with custom CSS used for the "back" button by the use of a ToolBarButton with arrow=left. This is consistent with the recommended solution for back buttons inside Heading.

b) In the "Buttons" view, we replace the Button with custom CSS used for a button with "Back" label (in the "Shape" tab) by a Button with rectangular shape (labelled "Rectangle"), just to have another Button in this tab besides the "Round" one.

[Adrian Vasiliu]

Fix misbehavior of "back" buttons - Adrian Vasiliu, IBM, CCLA

[Adrian Vasiliu]

The attached patch15909.patch uses the solution mentioned in the previous comment to fix the trouble in the "Headings" view, while in the "Buttons" view we finally preferred to not mix Button and ToolBarButton. Instead, the "Shape" tab now shows only the round shape when running in FF and IE (that is, on these browsers, we hide the other button; this is a compromise, thinking that it is overkill to redo inside mobileGallery the work we do inside the lib for getting buttons with arrow shape on compat browsers).

[cjolif]

In [29856]:

fixes #15909. Thanks Adrian Vasiliu (IBM, CCLA). !strict.