Add margin to separate radio buttons and checkboxes from their labels

[gpanakkal]

This PR addresses bug 1716806 by adding a 4px margin to the right of checkboxes and radio buttons for .xfaRight elements, or to the left for .xfaLeft elements.

[Snuffleupagus]

Have you actually run npx gulp xfatest successfully with this patch?

Note that this looks effectively like a duplicate of PR #17948, which caused lots of regressions and thus couldn't be merged.

[gpanakkal]

When I ran npx gulp xfatest, 228 of the ref test failures were pixel differences, all on Chrome, and all also occurring without the patch (I later saw in #16934 that the bot doesn't run Chrome tests anymore for this reason).

When I ran botxfatest:

• A couple of integration tests failed on Windows 10. The failing cases were not the same each time, and some fails happened without the patch. No integration failures on Linux, though.
• 130 ref tests failed. 123 of these fails were solely because the reference image also exhibited this bug. The other 7 involved text getting cut off. I'm working on another approach to fixing this bug in JS instead of touching CSS files, which should hopefully resolve the latter problem. How should I handle the remaining 123 fails?

[calixteman]

/botio xfatest

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_xfatest from @calixteman received. Current queue size: 0

Live output at: http://54.241.84.105:8877/7361414c81b3c63/output.txt

[moz-tools-bot]

From: Bot.io (Windows)

---

Received

Command cmd_xfatest from @calixteman received. Current queue size: 0

Live output at: http://54.193.163.58:8877/e828d74d270b821/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Failed

Full output at http://54.241.84.105:8877/7361414c81b3c63/output.txt

Total script time: 17.97 mins

• Unit tests: Passed
• Integration Tests: FAILED
• Regression tests: FAILED

  different ref/snapshot: 107

Image differences available at: http://54.241.84.105:8877/7361414c81b3c63/reftest-analyzer.html#web=eq.log

[moz-tools-bot]

From: Bot.io (Windows)

---

Failed

Full output at http://54.193.163.58:8877/e828d74d270b821/output.txt

Total script time: 39.38 mins

• Unit tests: Passed
• Integration Tests: FAILED
• Regression tests: FAILED

  different ref/snapshot: 107

Image differences available at: http://54.193.163.58:8877/e828d74d270b821/reftest-analyzer.html#web=eq.log

[gpanakkal]

@Snuffleupagus I've been poking around in src/core/xfa/, especially in template.js and layout.js. What's the proper way to modify a component's margin/padding? I've tried several approaches, but none of them worked as expected. For example, initializing a new Margin in the CheckButton constructor always resulted in a margin of 0 regardless of what I set the insets to.

[gpanakkal]

@Snuffleupagus I've been poking around in src/core/xfa/, especially in template.js and layout.js. What's the proper way to modify a component's margin/padding? I've tried several approaches, but none of them worked as expected. For example, initializing a new Margin in the CheckButton constructor always resulted in a margin of 0 regardless of what I set the insets to.

@calixteman bumping this - would appreciate some guidance here!