From 84745515a481d66dd3ed5a7fe87cf14d03d46794 Mon Sep 17 00:00:00 2001 From: Mike Conley Date: Thu, 30 Jun 2022 17:38:17 +0000 Subject: [PATCH] Bug 1774262 - Make search-textbox component easier to theme. r=mstriemer,desktop-theme-reviewers,dao,freddyb This allows consumers of the component to override the clear search icon and change the width of the focus outline. Differential Revision: https://phabricator.services.mozilla.com/D149563 --- layout/style/moz.build | 1 + toolkit/content/widgets/search-textbox.js | 4 +-- .../themes/linux/global/search-textbox.css | 6 +++- toolkit/themes/osx/global/search-textbox.css | 5 ++-- .../shared/in-content/common-shared.css | 28 +++++++++++-------- .../themes/windows/global/search-textbox.css | 6 +++- 6 files changed, 32 insertions(+), 18 deletions(-) diff --git a/layout/style/moz.build b/layout/style/moz.build index 2595e8b9e60c..6803761a09ad 100644 --- a/layout/style/moz.build +++ b/layout/style/moz.build @@ -271,6 +271,7 @@ RESOURCE_FILES += [ CONTENT_ACCESSIBLE_FILES += [ "ImageDocument.css", "res/plaintext.css", + "res/searchfield-cancel.svg", "res/viewsource.css", "TopLevelImageDocument.css", "TopLevelVideoDocument.css", diff --git a/toolkit/content/widgets/search-textbox.js b/toolkit/content/widgets/search-textbox.js index 93079b3bc37b..e2be28c05f64 100644 --- a/toolkit/content/widgets/search-textbox.js +++ b/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.createElement("img"); + const clearBtn = document.createXULElement("image"); clearBtn.className = "textbox-search-clear"; - clearBtn.src = "resource://gre-resources/searchfield-cancel.svg"; + clearBtn.part = "clear-icon"; clearBtn.setAttribute("role", "button"); document.l10n.setAttributes( clearBtn, diff --git a/toolkit/themes/linux/global/search-textbox.css b/toolkit/themes/linux/global/search-textbox.css index 3753be3504ba..2a3f55d93bdc 100644 --- a/toolkit/themes/linux/global/search-textbox.css +++ b/toolkit/themes/linux/global/search-textbox.css @@ -57,8 +57,12 @@ 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]), -html|*.textbox-search-clear:not([disabled]) { +.textbox-search-clear:not([disabled]) { cursor: pointer; } diff --git a/toolkit/themes/osx/global/search-textbox.css b/toolkit/themes/osx/global/search-textbox.css index 8cbf8e266423..50c8e9464981 100644 --- a/toolkit/themes/osx/global/search-textbox.css +++ b/toolkit/themes/osx/global/search-textbox.css @@ -42,11 +42,12 @@ html|input { /* ::::: icons ::::: */ -html|*.textbox-search-clear { +.textbox-search-clear { + list-style-image: url(resource://content-accessible/searchfield-cancel.svg); margin-bottom: 1px; } -html|*.textbox-search-clear:not([disabled]) { +.textbox-search-clear:not([disabled]) { cursor: default; } diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css index 5b663bf911c5..8ac0d5914064 100644 --- a/toolkit/themes/shared/in-content/common-shared.css +++ b/toolkit/themes/shared/in-content/common-shared.css @@ -50,7 +50,11 @@ --in-content-danger-button-background: #e22850; --in-content-danger-button-background-hover: #c50042; --in-content-danger-button-background-active: #810220; - --in-content-focus-outline-color: var(--in-content-primary-button-background); + --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-table-background: #f8f8fa; --in-content-table-border-color: var(--in-content-box-border-color); @@ -391,8 +395,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: 2px solid var(--in-content-focus-outline-color); - outline-offset: 2px; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); } html|select:not([size], [multiple]) { @@ -492,7 +496,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); - --in-content-focus-outline-color: var(--in-content-danger-button-background); + --focus-outline-color: var(--in-content-danger-button-background); } html|button.ghost-button { @@ -625,7 +629,7 @@ xul|search-textbox[focused], xul|tree:focus-visible, xul|richlistbox:focus-visible { border-color: transparent; - outline: 2px solid var(--in-content-focus-outline-color); + outline: var(--focus-outline); outline-offset: -1px; /* Prevents antialising around the corners */ } @@ -670,7 +674,7 @@ button.text-link:is(:not([disabled="true"]), :enabled):hover:active { html|a:-moz-focusring, .text-link:-moz-focusring { - outline: 2px solid var(--in-content-focus-outline-color); + outline: var(--focus-outline); outline-offset: 1px; border-radius: 4px; } @@ -937,8 +941,8 @@ html|*#categories > html|*.category:dir(rtl) { #categories[keyboard-navigation="true"]:-moz-focusring > .category[current], #categories > .category:-moz-focusring { - outline: 2px solid var(--in-content-focus-outline-color); - outline-offset: -2px; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); } html|*#categories[last-input-type="mouse"] > html|button.category:-moz-focusring { @@ -1079,11 +1083,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); - --in-content-focus-outline-color: var(--in-content-item-selected-text); + --focus-outline-color: var(--in-content-item-selected-text); } xul|richlistitem[selected] xul|menulist:focus-visible { - outline-offset: -2px; + outline-offset: var(--focus-outline-inset); } /* Use a 2px border so that selected row highlight is still visible behind @@ -1310,8 +1314,8 @@ xul|*.sidebar-footer-link { } .sidebar-footer-link:-moz-focusring { - outline: 2px solid var(--in-content-focus-outline-color); - outline-offset: -2px; + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); } .sidebar-footer-icon { diff --git a/toolkit/themes/windows/global/search-textbox.css b/toolkit/themes/windows/global/search-textbox.css index df6181fb95a1..bd2f7146f3da 100644 --- a/toolkit/themes/windows/global/search-textbox.css +++ b/toolkit/themes/windows/global/search-textbox.css @@ -66,7 +66,11 @@ html|input { cursor: pointer; } -html|*.textbox-search-clear:not([disabled]) { +.textbox-search-clear { + list-style-image: url(resource://content-accessible/searchfield-cancel.svg); +} + +.textbox-search-clear:not([disabled]) { cursor: default; }