Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#11034 closed defect (fixed)

TextBox widget subclass templates have too many nodes that can affect performance

Reported by: Douglas Hays Owned by: Douglas Hays
Priority: high Milestone: 1.5
Component: Dijit - Form Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description


Attachments (15)

11034_rough_draft.patch (4.4 KB) - added by Douglas Hays 9 years ago.
rough draft at possible a11y node reduction that hopefully passes TextBox_sizes.html?a11y=1 tests
11034_singleValidationNode_proof_of_concept.patch (4.8 KB) - added by Douglas Hays 9 years ago.
proof of concept: single INPUT used for both a11y/non-a11y validation
combobox_proto.patch (6.0 KB) - added by Jonathan Bond-Caron 9 years ago.
Keep support for .dijitInputField, .dijitSelectField, .dijitButtonField, .dijitTextArea
padding_full.patch (46.8 KB) - added by Jonathan Bond-Caron 9 years ago.
Padding support
11034.patch (32.5 KB) - added by Douglas Hays 9 years ago.
new textbox templates and css supporting custom padding
11034_2.patch (33.6 KB) - added by Douglas Hays 9 years ago.
update
11034_3.patch (45.3 KB) - added by Douglas Hays 9 years ago.
updated templates allowing claro border around combobox button
11034_4.patch (44.8 KB) - added by Douglas Hays 9 years ago.
updated spinner css
11034_5.patch (44.9 KB) - added by Douglas Hays 9 years ago.
refresh
11034_6.patch (46.2 KB) - added by Douglas Hays 9 years ago.
refresh
11034_7.patch (46.8 KB) - added by Douglas Hays 9 years ago.
refresh with bill's suggestions
themeTester.patch (4.5 KB) - added by bill 9 years ago.
themeTester.html enhancement to set custom padding, and also update to TextBox?.js so that custom padding effects label position
11034_8.patch (53.7 KB) - added by Douglas Hays 9 years ago.
bug fixes + IE6/a11y spinner working + spinner position:relative hack removed + bill patches + border rules refactored to remove !important
quirks.patch (9.1 KB) - added by Jonathan Bond-Caron 9 years ago.
Fix quirks mode margin bug
cosmetic.patch (11.4 KB) - added by Jonathan Bond-Caron 9 years ago.
Cosmetic improvements high constrast + quirks float bug

Download all attachments as: .zip

Change History (32)

Changed 9 years ago by Douglas Hays

Attachment: 11034_rough_draft.patch added

rough draft at possible a11y node reduction that hopefully passes TextBox_sizes.html?a11y=1 tests

Changed 9 years ago by Douglas Hays

proof of concept: single INPUT used for both a11y/non-a11y validation

Changed 9 years ago by Jonathan Bond-Caron

Attachment: combobox_proto.patch added

Keep support for .dijitInputField, .dijitSelectField, .dijitButtonField, .dijitTextArea

comment:1 Changed 9 years ago by bill

(In [21998]) Rolling back changes from #10974 and #11029. This amounts to rolling back to [21926] (for the files changed in [21926]) and then adding back [21981] and [21983].

Concerning the goal of #10974, to make it easy to set padding on form input widgets:

  • That will be implemented in the textbox widgets (*TextBox, ComboBox/FilteringSelect, Spinner) in a different way, see #11034.
  • I think likewise for the <table> based widgets, Select and ComboButton, since centering arrows in a <table> should be easy, regardless of padding.
  • As for DropDownButton, not sure, but rolling back that change for now.

!TextBox_sizes.html can be restored to [21938] once #11034 is fixed.

Note that many of the changes in [21926] (and reversions in this check in) were due to changing the clas name dijitArrowButtonInner to dijitArrowButtonImg. For back-compat reasons I'd rather not have a unnecessary CSS name change.

Refs #10974, #11029. Fixes #11047.

comment:2 Changed 9 years ago by Jonathan Bond-Caron

Completely confused by the rollback.

Doug's prototype involves an even greater BC break, yet the milestone is 1.5?

Shouldn't we be talking dojo 2.0 here?

I can fix #21926 so that it does not break any BC (both visually and test), let me know if you want my help at all.

Changed 9 years ago by Jonathan Bond-Caron

Attachment: padding_full.patch added

Padding support

comment:3 Changed 9 years ago by Jonathan Bond-Caron

This new patch (padding_full.patch) is very well tested visually.

It only changes CSS name: dijitArrowButtonFillHalfHeight --> dijitArrowButtonFillHeight

There should be no BC break with any other non-dijit themes. There are absolute/relative changes so a *really* hacky custom theme could break.

dijit/tests/form/visual.html?theme=tundra dijit/tests/form/visual.html?theme=soria dijit/tests/form/visual.html?theme=nihilo dijit/tests/form/visual.html?theme=claro

dijit/tests/form/visual.html?a11y=true dijit/tests/form/visual.html?a11y=true&theme=claro

FF 3, IE7, IE6

I added dijit/tests/form/visual.html to make it easier to see all styled widgets at once.

Anyways, my last shot at this for 1.5 :)

The patch was added here for reference, at the very least dijit/tests/form/visual.html could be committed.

Enjoy

Changed 9 years ago by Douglas Hays

Attachment: 11034.patch added

new textbox templates and css supporting custom padding

Changed 9 years ago by Douglas Hays

Attachment: 11034_2.patch added

update

Changed 9 years ago by Douglas Hays

Attachment: 11034_3.patch added

updated templates allowing claro border around combobox button

Changed 9 years ago by Douglas Hays

Attachment: 11034_4.patch added

updated spinner css

Changed 9 years ago by Douglas Hays

Attachment: 11034_5.patch added

refresh

Changed 9 years ago by Douglas Hays

Attachment: 11034_6.patch added

refresh

comment:4 Changed 9 years ago by bill

(In [22043]) Changes for easier testing of themes:

  • change ComboBox? --> FilteringSelect, to be able to test display of validation icon
  • added a few placeHolders (hint strings), specifically to DateTextBox and FilteringSelect
  • add dialog with action bar (only currently working for Claro)
  • add dialog with loading animation (that happens every time the dialog is opened)
  • added "Dialogs" MenuBar item to make it easier to display Dialogs

Refs #10527, #3286, #11034.

comment:5 Changed 9 years ago by Douglas Hays

Owner: changed from Jonathan Bond-Caron to Douglas Hays
Status: newassigned

Changed 9 years ago by Douglas Hays

Attachment: 11034_7.patch added

refresh with bill's suggestions

Changed 9 years ago by bill

Attachment: themeTester.patch added

themeTester.html enhancement to set custom padding, and also update to TextBox?.js so that custom padding effects label position

Changed 9 years ago by Douglas Hays

Attachment: 11034_8.patch added

bug fixes + IE6/a11y spinner working + spinner position:relative hack removed + bill patches + border rules refactored to remove !important

comment:6 Changed 9 years ago by Douglas Hays

(In [22060]) References #11034. Commit new form templates using INPUT nodes as sizing elements to reduce node counts. Adjusted CSS as needed.

comment:7 Changed 9 years ago by bill

(In [22062]) fix display of claro NumberSpinner on FF and webkit in quirks mode (it was much too tall, 100% of the containing ComboBox), refs #11034

comment:8 Changed 9 years ago by bill

(In [22063]) Fix display glitches in quirks mode on all browsers (not just IE), for validation icon and ComboBox arrow icon. Basically, setting width and border/padding on an <input> node causes problems in quirks mode and should be avoided. Refs #11034

comment:9 Changed 9 years ago by bill

(In [22064]) just adding a few comments, refs #11034

comment:10 Changed 9 years ago by Douglas Hays

(In [22075]) References #11034. CSS changes to pass all the TextBox_sizes.html tests.

comment:11 Changed 9 years ago by Douglas Hays

(In [22081]) References #11034. Add IE/quirks rule to prevent real browsers from generating tall textboxes.

comment:12 Changed 9 years ago by bill

(In [22083]) Removing the overflow:visible on the INPUT node (of TextBox based widgets) as it breaks horizontal scrollin,g when the user types lots of text into the INPUT. Problem occured on IE8 quirks mode and IE6, probably maybe IE7 too.

The overflow:visible was added in [22060] (in a .dj_ie selector) but I'm unclear why; things seem to work without it.

Refs #11034.

comment:13 Changed 9 years ago by Douglas Hays

Resolution: fixed
Status: assignedclosed

(In [22085]) Fixes #11034. Add rule to fix Spinner in IE quirks mode.

Changed 9 years ago by Jonathan Bond-Caron

Attachment: quirks.patch added

Fix quirks mode margin bug

comment:14 Changed 9 years ago by Douglas Hays

(In [22097]) References #11034. Tweak quirks rendering so that the textbox buttons extend to the bottom.

comment:15 Changed 9 years ago by Douglas Hays

(In [22098]) References #11034. Sizes Spinner arrows to match their container so they show up in IE quirks + a11y.

Changed 9 years ago by Jonathan Bond-Caron

Attachment: cosmetic.patch added

Cosmetic improvements high constrast + quirks float bug

comment:16 Changed 9 years ago by bill

(In [22136]) Settings for custom TextBox padding from 0px to 5px, refs #11034.

comment:17 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.