Bug 1698606 - Prevent datetime reset button from growing the wrapper (and thus moving the editor). r=jwatt

Mostly a cosmetic change but this makes the layout more consistent with
other form controls.

This is the only thing that I think could cause something like comment 0
is describing, though I couldn't reproduce. But I think it's an
improvement regardless.

Differential Revision: https://phabricator.services.mozilla.com/D110062

toolkit/content/widgets/datetimebox.css

@@ -2,9 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@namespace url("http://www.w3.org/1999/xhtml");
-@namespace svg url("http://www.w3.org/2000/svg");
-
 .datetimebox {
   display: flex;
   /* TODO: Enable selection once bug 1455893 is fixed */
@@ -49,14 +46,21 @@
 
 .datetime-reset-button {
   color: inherit;
+  font-size: inherit;
   fill: currentColor;
   opacity: .5;
   background-color: transparent;
   border: none;
   flex: none;
   padding-inline: 2px;
+  padding-block: 0;
+  line-height: 1;
 }
 
-svg|svg.datetime-reset-button-svg {
+.datetime-reset-button-svg {
   pointer-events: none;
+  /* When using a very small font-size, we don't want the button to take extra
+   * space (which will affect the baseline of the form control) */
+  max-width: 1em;
+  max-height: 1em;
 }

toolkit/content/widgets/datetimebox.js

@@ -159,7 +159,7 @@ this.DateTimeInputBaseImplWidget = class {
           </span>
 
           <button class="datetime-reset-button" id="reset-button" tabindex="-1" aria-label="&datetime.reset.label;">
-            <svg xmlns="http://www.w3.org/2000/svg" class="datetime-reset-button-svg" width="12" height="12">
+            <svg xmlns="http://www.w3.org/2000/svg" class="datetime-reset-button-svg" width="12" height="12" viewBox="0 0 12 12">
               <path d="M 3.9,3 3,3.9 5.1,6 3,8.1 3.9,9 6,6.9 8.1,9 9,8.1 6.9,6 9,3.9 8.1,3 6,5.1 Z M 12,6 A 6,6 0 0 1 6,12 6,6 0 0 1 0,6 6,6 0 0 1 6,0 6,6 0 0 1 12,6 Z"/>
             </svg>
           </button>