Backed out changeset 7451166dbe99 (bug 1774262) for causing a11y failures on test_txtctrl.xhtml. CLOSED TREE

layout/style/jar.mn

@@ -23,6 +23,7 @@ toolkit.jar:
    res/accessiblecaret-tilt-right@1.5x.png   (res/accessiblecaret-tilt-right@1.5x.png)
    res/accessiblecaret-tilt-right@2x.png     (res/accessiblecaret-tilt-right@2x.png)
    res/accessiblecaret-tilt-right@2.25x.png  (res/accessiblecaret-tilt-right@2.25x.png)
+   res/searchfield-cancel.svg                (res/searchfield-cancel.svg)
    res/password.svg                          (res/password.svg)
    res/password-hide.svg                     (res/password-hide.svg)
 

layout/style/moz.build

@@ -271,7 +271,6 @@ RESOURCE_FILES += [
 CONTENT_ACCESSIBLE_FILES += [
     "ImageDocument.css",
     "res/plaintext.css",
-    "res/searchfield-cancel.svg",
     "res/viewsource.css",
     "TopLevelImageDocument.css",
     "TopLevelVideoDocument.css",

layout/style/res/forms.css

@@ -919,7 +919,7 @@ input::-moz-reveal {
   max-height: 100%;
   max-width: 100%;
   margin-inline-start: 1px;
-  background-image: url("resource://content-accessible/searchfield-cancel.svg");
+  background-image: url("resource://gre-resources/searchfield-cancel.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;

toolkit/content/widgets/search-textbox.js

@@ -91,9 +91,9 @@
       searchBtn.className = "textbox-search-icon";
       searchBtn.addEventListener("click", e => this._iconClick(e));
 
-      const clearBtn = document.createXULElement("image");
+      const clearBtn = document.createElement("img");
       clearBtn.className = "textbox-search-clear";
-      clearBtn.part = "clear-icon";
+      clearBtn.src = "resource://gre-resources/searchfield-cancel.svg";
       clearBtn.setAttribute("role", "button");
       document.l10n.setAttributes(
         clearBtn,

toolkit/themes/linux/global/search-textbox.css

@@ -57,12 +57,8 @@ html|input {
   list-style-image: url(chrome://global/skin/icons/search-textbox.svg);
 }
 
-.textbox-search-clear {
-  list-style-image: url(resource://content-accessible/searchfield-cancel.svg);
-}
-
 :host([searchbutton]) .textbox-search-icon:not([disabled]),
-.textbox-search-clear:not([disabled]) {
+html|*.textbox-search-clear:not([disabled]) {
   cursor: pointer;
 }
 

toolkit/themes/osx/global/search-textbox.css

@@ -42,12 +42,11 @@ html|input {
 
 /* ::::: icons ::::: */
 
-.textbox-search-clear {
-  list-style-image: url(resource://content-accessible/searchfield-cancel.svg);
+html|*.textbox-search-clear {
   margin-bottom: 1px;
 }
 
-.textbox-search-clear:not([disabled]) {
+html|*.textbox-search-clear:not([disabled]) {
   cursor: default;
 }
 

toolkit/themes/shared/in-content/common-shared.css

@@ -50,11 +50,7 @@
   --in-content-danger-button-background: #e22850;
   --in-content-danger-button-background-hover: #c50042;
   --in-content-danger-button-background-active: #810220;
-  --focus-outline-color: var(--in-content-primary-button-background);
-  --focus-outline-width: 2px;
-  --focus-outline-offset: 2px;
-  --focus-outline-inset: calc(-1 * var(--focus-outline-width));
-  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
+  --in-content-focus-outline-color: var(--in-content-primary-button-background);
 
   --in-content-table-background: #f8f8fa;
   --in-content-table-border-color: var(--in-content-box-border-color);
@@ -395,8 +391,8 @@ xul|checkbox:not([native]):-moz-focusring > .checkbox-check, /* :not([native]) t
 xul|radio[focused="true"] > .radio-check,
 xul|tab:-moz-focusring > .tab-middle > .tab-text {
   box-shadow: none;
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 2px;
 }
 
 html|select:not([size], [multiple]) {
@@ -496,7 +492,7 @@ xul|button.primary:not([disabled="true"]):hover:active {
   --in-content-primary-button-background: var(--in-content-danger-button-background);
   --in-content-primary-button-background-hover: var(--in-content-danger-button-background-hover);
   --in-content-primary-button-background-active: var(--in-content-danger-button-background-active);
-  --focus-outline-color: var(--in-content-danger-button-background);
+  --in-content-focus-outline-color: var(--in-content-danger-button-background);
 }
 
 html|button.ghost-button {
@@ -629,7 +625,7 @@ xul|search-textbox[focused],
 xul|tree:focus-visible,
 xul|richlistbox:focus-visible {
   border-color: transparent;
-  outline: var(--focus-outline);
+  outline: 2px solid var(--in-content-focus-outline-color);
   outline-offset: -1px; /* Prevents antialising around the corners */
 }
 
@@ -674,7 +670,7 @@ button.text-link:is(:not([disabled="true"]), :enabled):hover:active {
 
 html|a:-moz-focusring,
 .text-link:-moz-focusring {
-  outline: var(--focus-outline);
+  outline: 2px solid var(--in-content-focus-outline-color);
   outline-offset: 1px;
   border-radius: 4px;
 }
@@ -941,8 +937,8 @@ html|*#categories > html|*.category:dir(rtl) {
 
 #categories[keyboard-navigation="true"]:-moz-focusring > .category[current],
 #categories > .category:-moz-focusring {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-inset);
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: -2px;
 }
 
 html|*#categories[last-input-type="mouse"] > html|button.category:-moz-focusring {
@@ -1083,11 +1079,11 @@ xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
   --in-content-button-text-color: var(--in-content-item-selected-text);
   --in-content-button-text-color-hover: var(--in-content-item-selected-text);
   --in-content-button-text-color-active: var(--in-content-button-text-color-hover);
-  --focus-outline-color: var(--in-content-item-selected-text);
+  --in-content-focus-outline-color: var(--in-content-item-selected-text);
 }
 
 xul|richlistitem[selected] xul|menulist:focus-visible {
-  outline-offset: var(--focus-outline-inset);
+  outline-offset: -2px;
 }
 
 /* Use a 2px border so that selected row highlight is still visible behind
@@ -1314,8 +1310,8 @@ xul|*.sidebar-footer-link {
 }
 
 .sidebar-footer-link:-moz-focusring {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-inset);
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: -2px;
 }
 
 .sidebar-footer-icon {

toolkit/themes/windows/global/search-textbox.css

@@ -66,11 +66,7 @@ html|input {
   cursor: pointer;
 }
 
-.textbox-search-clear {
-  list-style-image: url(resource://content-accessible/searchfield-cancel.svg);
-}
-
-.textbox-search-clear:not([disabled]) {
+html|*.textbox-search-clear:not([disabled]) {
   cursor: default;
 }