mirrors/gecko-dev
1
0
Fork 1
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-11-02 01:09:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bug 1969471 - Remove fxview-search-textbox. r=fxview-reviewers,desktop-theme-reviewers,sidebar-reviewers,dao,nsharpley

Browse source 
Use <moz-input-search>.

Differential Revision: https://phabricator.services.mozilla.com/D251900
This commit is contained in:
Emilio Cobos Álvarez 2025-06-02 21:39:11 +00:00 committed by ealvarez@mozilla.com
parent d91e152535
commit b98b5ff3bd
24 changed files with 78 additions and 538 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

1
browser/components/firefoxview/firefoxview.css
View file

@ -16,7 +16,6 @@
--fxview-text-color-hover: var(--newtab-text-primary-color);
--fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
--fxview-border: var(--border-color-transparent);
--fxview-border-interactive: var(--border-color-interactive);
--fxview-indicator-stroke-color-hover: #deddde;
/* ensure utility button hover states match those of the rest of the page */

76
browser/components/firefoxview/fxview-search-textbox.css
View file

@ -1,76 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
.search-container {
color: var(--fxview-text-primary-color);
display: inline-flex;
overflow: hidden;
position: relative;
&:focus-within {
overflow: visible;
}
}
.search-icon {
background-image: url(chrome://global/skin/icons/search-textbox.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 16px;
fill: currentColor;
-moz-context-properties: fill;
height: 16px;
width: 16px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
padding: 2px;
pointer-events: none;
}
.search-icon:dir(ltr) {
left: 8px;
}
.search-icon:dir(rtl) {
right: 8px;
}
input {
border: 1px solid var(--fxview-border-interactive);
border-radius: var(--border-radius-small);
padding: 8px 32px;
width: 100%;
}
.clear-icon {
background-image: url(resource://content-accessible/close-12.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 16px;
fill: currentColor;
-moz-context-properties: fill;
cursor: pointer;
height: 16px;
width: 16px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
padding: 2px;
}
.clear-icon:hover {
background-color: var(--fxview-element-background-hover);
color: var(--fxview-text-color-hover);
}
.clear-icon:dir(ltr) {
right: 8px;
}
.clear-icon:dir(rtl) {
left: 8px;
}

134
browser/components/firefoxview/fxview-search-textbox.mjs
View file

@ -1,134 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
const SEARCH_DEBOUNCE_RATE_MS = 500;
/**
* A search box that displays a search icon and is clearable. Updates to the
* search query trigger a `fxview-search-textbox-query` event with the current
* query value.
*
* There is no actual searching done here. That needs to be implemented by the
* `fxview-search-textbox-query` event handler. `searchTabList()` from
* `search-helpers.mjs` can be used as a starting point.
*
* @property {string} placeholder
* The placeholder text for the search box.
* @property {number} size
* The width (number of characters) of the search box.
* @property {string} pageName
* The hash for the page name that the search input is located on.
*/
export default class FxviewSearchTextbox extends MozLitElement {
static properties = {
placeholder: { type: String },
size: { type: Number },
pageName: { type: String },
autofocus: { type: Boolean },
};
static queries = {
clearButton: ".clear-icon",
input: "input",
};
#query = "";
#searchTimer;
firstUpdated() {
if (this.autofocus) {
this.focus();
}
}
disconnectedCallback() {
super.disconnectedCallback();
clearTimeout(this.#searchTimer);
}
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
onInput(event) {
this.#query = event.target.value.trim();
event.preventDefault();
this.onSearch();
}
/**
* Handler for query updates from keyboard input, and textbox clears from 'X'
* button.
*/
onSearch() {
clearTimeout(this.#searchTimer);
this.#searchTimer = setTimeout(
() => this.#dispatchQueryEvent(),
SEARCH_DEBOUNCE_RATE_MS
);
this.requestUpdate();
}
clear(event) {
if (
event.type == "click" ||
(event.type == "keydown" && event.code == "Enter") ||
(event.type == "keydown" && event.code == "Space")
) {
this.#query = "";
event.preventDefault();
this.onSearch();
}
}
#dispatchQueryEvent() {
window.scrollTo(0, 0);
this.dispatchEvent(
new CustomEvent("fxview-search-textbox-query", {
bubbles: true,
composed: true,
detail: { query: this.#query },
})
);
if (!window.IS_STORYBOOK) {
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: this.pageName,
});
}
}
render() {
return html`
<link rel="stylesheet" href="chrome://browser/content/firefoxview/fxview-search-textbox.css" />
<div class="search-container" part="container">
<div class="search-icon"></div>
<input
part="input"
type="search"
.placeholder=${ifDefined(this.placeholder)}
.size=${ifDefined(this.size)}
.value=${this.#query}
@input=${this.onInput}
></input>
<div
class="clear-icon"
role="button"
tabindex="0"
?hidden=${!this.#query}
@click=${this.clear}
@keydown=${this.clear}
data-l10n-id="firefoxview-search-text-box-clear-button"
></div>
</div>`;
}
}
customElements.define("fxview-search-textbox", FxviewSearchTextbox);

15
browser/components/firefoxview/history.mjs
View file

@ -121,7 +121,7 @@ class HistoryInView extends ViewPage {
emptyState: "fxview-empty-state",
lists: { all: "fxview-tab-list" },
showAllHistoryBtn: ".show-all-history-button",
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
sortInputs: { all: "input[name=history-sort-option]" },
panelList: "panel-list",
};
@ -168,6 +168,11 @@ class HistoryInView extends ViewPage {
}
onSearchQuery(e) {
if (!this.recentBrowsing) {
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: "history",
});
}
this.controller.onSearchQuery(e);
this.cumulativeSearches = this.controller.searchQuery
? this.cumulativeSearches + 1
@ -414,13 +419,11 @@ class HistoryInView extends ViewPage {
<h2 class="page-header" data-l10n-id="firefoxview-history-header"></h2>
<div class="history-sort-options">
<div class="history-sort-option">
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-history"
data-l10n-attrs="placeholder"
.size=${this.searchTextboxSize}
pageName=${this.recentBrowsing ? "recentbrowsing" : "history"}
@fxview-search-textbox-query=${this.onSearchQuery}
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
</div>
<div class="history-sort-option">
<input

2
browser/components/firefoxview/jar.mn
View file

@ -19,8 +19,6 @@ browser.jar:
content/browser/firefoxview/fxview-empty-state.mjs
content/browser/firefoxview/helpers.mjs
content/browser/firefoxview/search-helpers.mjs
content/browser/firefoxview/fxview-search-textbox.css
content/browser/firefoxview/fxview-search-textbox.mjs
content/browser/firefoxview/fxview-tab-list.css
content/browser/firefoxview/fxview-tab-list.mjs
content/browser/firefoxview/fxview-tab-row.css

27
browser/components/firefoxview/opentabs.mjs
View file

@ -58,7 +58,7 @@ class OpenTabsInView extends ViewPage {
static queries = {
viewCards: { all: "view-opentabs-card" },
optionsContainer: ".open-tabs-options",
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
};
initialWindowsReady = false;
@ -106,7 +106,7 @@ class OpenTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.addEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this
);
}
@ -145,7 +145,7 @@ class OpenTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.removeEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this
);
}
@ -222,15 +222,11 @@ class OpenTabsInView extends ViewPage {
<div class="sticky-container bottom-fade">
<h2 class="page-header" data-l10n-id="firefoxview-opentabs-header"></h2>
<div class="open-tabs-options">
<div>
<fxview-search-textbox
data-l10n-id="firefoxview-search-text-box-opentabs"
data-l10n-attrs="placeholder"
@fxview-search-textbox-query=${this.onSearchQuery}
.size=${this.searchTextboxSize}
pageName=${this.recentBrowsing ? "recentbrowsing" : "opentabs"}
></fxview-search-textbox>
</div>
<moz-input-search
data-l10n-id="firefoxview-search-text-box-opentabs"
data-l10n-attrs="placeholder"
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
<div class="open-tabs-sort-wrapper">
<div class="open-tabs-sort-option">
<input
@ -305,6 +301,11 @@ class OpenTabsInView extends ViewPage {
}
onSearchQuery(e) {
if (!this.recentBrowsing) {
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: "opentabs",
});
}
this.searchQuery = e.detail.query;
}
@ -338,7 +339,7 @@ class OpenTabsInView extends ViewPage {
}
handleEvent({ detail, type }) {
if (this.recentBrowsing && type === "fxview-search-textbox-query") {
if (this.recentBrowsing && type === "MozInputSearch:search") {
this.onSearchQuery({ detail });
return;
}

17
browser/components/firefoxview/recentbrowsing.mjs
View file

@ -12,7 +12,7 @@ class RecentBrowsingInView extends ViewPage {
}
static queries = {
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
};
static properties = {
@ -35,6 +35,14 @@ class RecentBrowsingInView extends ViewPage {
}
}
onSearchQuery() {
// Individual components also listen to this event, so no need to do
// anything else.
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: "recentbrowsing",
});
}
render() {
return html`
<link
@ -44,12 +52,11 @@ class RecentBrowsingInView extends ViewPage {
<div class="sticky-container bottom-fade">
<h2 class="page-header" data-l10n-id="firefoxview-overview-header"></h2>
<div class="search-container">
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-recentbrowsing"
data-l10n-attrs="placeholder"
.size=${this.searchTextboxSize}
pageName="recentbrowsing"
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
</div>
</div>
<div class="cards-container">

23
browser/components/firefoxview/recentlyclosed.mjs
View file

@ -58,7 +58,7 @@ class RecentlyClosedTabsInView extends ViewPage {
static queries = {
cardEl: "card-container",
emptyState: "fxview-empty-state",
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
tabList: "fxview-tab-list",
};
@ -91,7 +91,7 @@ class RecentlyClosedTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.addEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this
);
}
@ -116,7 +116,7 @@ class RecentlyClosedTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.removeEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this
);
}
@ -130,7 +130,7 @@ class RecentlyClosedTabsInView extends ViewPage {
}
handleEvent(event) {
if (this.recentBrowsing && event.type === "fxview-search-textbox-query") {
if (this.recentBrowsing && event.type === "MozInputSearch:search") {
this.onSearchQuery(event);
}
}
@ -343,15 +343,11 @@ class RecentlyClosedTabsInView extends ViewPage {
data-l10n-id="firefoxview-recently-closed-header"
></h2>
<div>
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-recentlyclosed"
data-l10n-attrs="placeholder"
@fxview-search-textbox-query=${this.onSearchQuery}
.size=${this.searchTextboxSize}
pageName=${this.recentBrowsing
? "recentbrowsing"
: "recentlyclosed"}
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
</div>
</div>`
)}
@ -413,6 +409,11 @@ class RecentlyClosedTabsInView extends ViewPage {
}
onSearchQuery(e) {
if (!this.recentBrowsing) {
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: "recentlyclosed",
});
}
this.searchQuery = e.detail.query;
this.showAll = false;
this.cumulativeSearches = this.searchQuery

21
browser/components/firefoxview/syncedtabs.mjs
View file

@ -62,7 +62,7 @@ class SyncedTabsInView extends ViewPage {
static queries = {
cardEls: { all: "card-container" },
emptyState: "fxview-empty-state",
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
tabLists: { all: "syncedtabs-tab-list" },
};
@ -77,7 +77,7 @@ class SyncedTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.addEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this.onSearchQuery
);
}
@ -94,7 +94,7 @@ class SyncedTabsInView extends ViewPage {
if (this.recentBrowsing) {
this.recentBrowsingElement.removeEventListener(
"fxview-search-textbox-query",
"MozInputSearch:search",
this.onSearchQuery
);
}
@ -252,6 +252,11 @@ class SyncedTabsInView extends ViewPage {
}
onSearchQuery(e) {
if (!this.recentBrowsing) {
Glean.firefoxviewNext.searchInitiatedSearch.record({
page: "syncedtabs",
});
}
this.controller.searchQuery = e.detail.query;
this.cumulativeSearches = e.detail.query ? this.cumulativeSearches + 1 : 0;
this.showAll = false;
@ -390,15 +395,11 @@ class SyncedTabsInView extends ViewPage {
></h2>
<div class="syncedtabs-header">
<div>
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-tabs"
data-l10n-attrs="placeholder"
@fxview-search-textbox-query=${this.onSearchQuery}
.size=${this.searchTextboxSize}
pageName=${this.recentBrowsing
? "recentbrowsing"
: "syncedtabs"}
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
</div>
${when(
this.controller.currentSetupStateIndex === 4,

26
browser/components/firefoxview/tests/browser/browser_history_firefoxview.js
View file

@ -471,7 +471,8 @@ add_task(async function test_search_history() {
}, "There are no matching search results.");
info("Clear the search query.");
EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content);
searchTextbox.select();
EventUtils.synthesizeKey("VK_BACK_SPACE");
await BrowserTestUtils.waitForMutationCondition(
historyComponent.shadowRoot,
{ childList: true, subtree: true },
@ -488,26 +489,6 @@ add_task(async function test_search_history() {
const tabList = historyComponent.lists[0];
return tabList?.emptyState;
}, "There are no matching search results.");
info("Clear the search query with keyboard.");
is(
historyComponent.shadowRoot.activeElement,
searchTextbox,
"Search input is focused"
);
EventUtils.synthesizeKey("KEY_Tab", {}, content);
ok(
searchTextbox.clearButton.matches(":focus-visible"),
"Clear Search button is focused"
);
EventUtils.synthesizeKey("KEY_Enter", {}, content);
await BrowserTestUtils.waitForMutationCondition(
historyComponent.shadowRoot,
{ childList: true, subtree: true },
() =>
historyComponent.cards.length ===
historyComponent.controller.historyVisits.length
);
});
});
@ -550,7 +531,8 @@ add_task(async function test_search_ignores_stale_queries() {
await TestUtils.waitForCondition(() => bogusQueryInProgress);
info("Clear the bogus query.");
EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content);
searchTextbox.select();
EventUtils.synthesizeKey("VK_BACK_SPACE");
await searchTextbox.updateComplete;
info("Input a real search query.");

28
browser/components/firefoxview/tests/browser/browser_opentabs_search.js
View file

@ -54,11 +54,8 @@ add_task(async function search_open_tabs() {
);
info("Clear the search query.");
EventUtils.synthesizeMouseAtCenter(
openTabs.searchTextbox.clearButton,
{},
content
);
openTabs.searchTextbox.select();
EventUtils.synthesizeKey("VK_BACK_SPACE");
await TestUtils.waitForCondition(
() => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
"The original window's list is restored."
@ -80,27 +77,6 @@ add_task(async function search_open_tabs() {
() => openTabs.viewCards[1].tabList.rowEls.length === 1,
"There is one matching search result in the new window."
);
info("Clear the search query with keyboard.");
is(
openTabs.shadowRoot.activeElement,
openTabs.searchTextbox,
"Search input is focused"
);
EventUtils.synthesizeKey("KEY_Tab", {}, content);
ok(
openTabs.searchTextbox.clearButton.matches(":focus-visible"),
"Clear Search button is focused"
);
EventUtils.synthesizeKey("KEY_Enter", {}, content);
await TestUtils.waitForCondition(
() => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length,
"The original window's list is restored."
);
await TestUtils.waitForCondition(
() => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length,
"The new window's list is restored."
);
});
await SpecialPowers.popPrefEnv();

18
browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js
View file

@ -561,7 +561,8 @@ add_task(async function test_search() {
);
info("Clear the search query.");
EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content);
searchTextbox.select();
EventUtils.synthesizeKey("VK_BACK_SPACE");
await TestUtils.waitForCondition(
() => listElem.rowEls.length === expectedURLs.length,
"The original list is restored."
@ -575,21 +576,6 @@ add_task(async function test_search() {
() => tabList.shadowRoot.querySelector("fxview-empty-state"),
"There are no matching search results."
);
info("Clear the search query with keyboard.");
EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content);
is(
recentlyClosedComponent.shadowRoot.activeElement,
searchTextbox,
"Search input is focused"
);
EventUtils.synthesizeKey("KEY_Tab", {}, content);
EventUtils.synthesizeKey("KEY_Enter", {}, content);
await TestUtils.waitForCondition(
() => listElem.rowEls.length === expectedURLs.length,
"The original list is restored."
);
});
await cleanup();
});

52
browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js
View file

@ -561,11 +561,8 @@ add_task(async function search_synced_tabs() {
);
info("Clear the search query.");
EventUtils.synthesizeMouseAtCenter(
syncedTabsComponent.searchTextbox.clearButton,
{},
content
);
syncedTabsComponent.searchTextbox.select();
EventUtils.synthesizeKey("VK_BACK_SPACE");
await TestUtils.waitForCondition(
() => syncedTabsComponent.fullyUpdated,
"Synced Tabs component is done updating."
@ -625,51 +622,6 @@ add_task(async function search_synced_tabs() {
!syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list"),
"There are no matching search results for the second device."
);
info("Clear the search query with keyboard.");
is(
syncedTabsComponent.shadowRoot.activeElement,
syncedTabsComponent.searchTextbox,
"Search input is focused"
);
EventUtils.synthesizeKey("KEY_Tab", {}, content);
ok(
syncedTabsComponent.searchTextbox.clearButton.matches(":focus-visible"),
"Clear Search button is focused"
);
EventUtils.synthesizeKey("KEY_Enter", {}, content);
await TestUtils.waitForCondition(
() => syncedTabsComponent.fullyUpdated,
"Synced Tabs component is done updating."
);
await TestUtils.waitForCondition(
() =>
syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list") &&
syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list")
.rowEls.length &&
syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list") &&
syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list")
.rowEls.length,
"The tab list has loaded for the first two cards."
);
deviceOneTabs = syncedTabsComponent.cardEls[0].querySelector(
"syncedtabs-tab-list"
).rowEls;
deviceTwoTabs = syncedTabsComponent.cardEls[1].querySelector(
"syncedtabs-tab-list"
).rowEls;
await TestUtils.waitForCondition(
() =>
syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list")
.rowEls.length === deviceOneTabs.length,
"The original device's list is restored."
);
await TestUtils.waitForCondition(
() =>
syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list")
.rowEls.length === deviceTwoTabs.length,
"The new devices's list is restored."
);
});
await SpecialPowers.popPrefEnv();
await tearDown(sandbox);

2
browser/components/firefoxview/tests/chrome/chrome.toml
View file

@ -2,6 +2,4 @@
["test_card_container.html"]
["test_fxview_search_textbox.html"]
["test_fxview_tab_list.html"]

64
browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html
View file

@ -1,64 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>FxviewSearchTextbox Tests</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<link rel="localization" href="browser/firefoxView.ftl"/>
<script type="module" src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"></script>
</head>
<body>
<p id="display"></p>
<div id="search-test">
<fxview-search-textbox></fxview-search-textbox>
</div>
<div id="focus-test"></div>
<pre id="test"></pre>
<script>
add_task(async function test_search_and_clear() {
const component = document.querySelector("#search-test fxview-search-textbox");
info("Enter a search query.");
let eventDeferred = Promise.withResolvers();
component.addEventListener("fxview-search-textbox-query", e =>
eventDeferred.resolve(e)
);
synthesizeMouseAtCenter(component, {});
sendChar("Q");
let query = (await eventDeferred.promise).detail.query;
is(query, "Q", "Event was fired with the correct query.");
info("Clear the search query.");
eventDeferred = Promise.withResolvers();
synthesizeMouseAtCenter(component.clearButton, {});
query = (await eventDeferred.promise).detail.query;
is(query, "", "Event was fired with a blank query.");
});
add_task(async function test_search_autofocus() {
const container = document.querySelector('#focus-test');
const componentWithAutofocus = document.createElement('fxview-search-textbox');
componentWithAutofocus.toggleAttribute('autofocus', true);
container.appendChild(componentWithAutofocus);
await componentWithAutofocus.updateCompleted;
isnot(componentWithAutofocus.input, null, 'component input should not be null');
is(componentWithAutofocus.shadowRoot.activeElement, componentWithAutofocus.input, 'Search input has focus');
container.removeChild(componentWithAutofocus);
const component = document.createElement('fxview-search-textbox');
container.appendChild(component);
await component.updateCompleted;
isnot(component.input, null, 'component input should not be null');
isnot(component.shadowRoot.activeElement, component.input, 'Search input does not have focus');
container.removeChild(component);
});
</script>
</body>
</html>

2
browser/components/firefoxview/viewpage.mjs
View file

@ -9,8 +9,6 @@ import "chrome://browser/content/firefoxview/card-container.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/firefoxview/fxview-empty-state.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/firefoxview/fxview-search-textbox.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://browser/content/firefoxview/fxview-tab-list.mjs";
const lazy = {};

2
browser/components/sidebar/sidebar-history.css
View file

@ -8,7 +8,7 @@
align-items: center;
}
fxview-search-textbox {
moz-input-search {
flex: 1;
}

4
browser/components/sidebar/sidebar-history.html
View file

@ -21,10 +21,6 @@
rel="stylesheet"
href="chrome://browser/content/sidebar/sidebar.css"
/>
<script
type="module"
src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"
></script>
<script
type="module"
src="chrome://browser/content/firefoxview/fxview-tab-list.mjs"

9
browser/components/sidebar/sidebar-history.mjs
View file

@ -28,7 +28,7 @@ export class SidebarHistory extends SidebarPage {
emptyState: "fxview-empty-state",
lists: { all: "sidebar-tab-list" },
menuButton: ".menu-button",
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
};
constructor() {
@ -505,12 +505,11 @@ export class SidebarHistory extends SidebarPage {
>
</sidebar-panel-header>
<div class="options-container">
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-history"
data-l10n-attrs="placeholder"
@fxview-search-textbox-query=${this.onSearchQuery}
.size=${15}
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
<moz-button
class="menu-button"
@click=${this.openMenu}

4
browser/components/sidebar/sidebar-syncedtabs.html
View file

@ -30,10 +30,6 @@
type="module"
src="chrome://browser/content/firefoxview/fxview-empty-state.mjs"
></script>
<script
type="module"
src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"
></script>
<script
type="module"
src="chrome://browser/content/sidebar/sidebar-tab-list.mjs"

9
browser/components/sidebar/sidebar-syncedtabs.mjs
View file

@ -24,7 +24,7 @@ class SyncedTabsInSidebar extends SidebarPage {
static queries = {
cards: { all: "moz-card" },
searchTextbox: "fxview-search-textbox",
searchTextbox: "moz-input-search",
};
constructor() {
@ -298,12 +298,11 @@ class SyncedTabsInSidebar extends SidebarPage {
view="viewTabsSidebar"
>
</sidebar-panel-header>
<fxview-search-textbox
<moz-input-search
data-l10n-id="firefoxview-search-text-box-tabs"
data-l10n-attrs="placeholder"
@fxview-search-textbox-query=${this.onSearchQuery}
size="15"
></fxview-search-textbox>
@MozInputSearch:search=${this.onSearchQuery}
></moz-input-search>
${when(
messageCard,
() => this.messageCardTemplate(messageCard),

14
browser/components/sidebar/sidebar.css
View file

@ -65,20 +65,6 @@ moz-card {
width: 100%;
}
fxview-search-textbox {
&::part(input) {
background-color: var(--sidebar-box-background);
color: var(--sidebar-box-color);
border: var(--sidebar-box-border);
border-radius: var(--border-radius-medium);
}
&::part(container) {
width: 100%;
height: var(--size-item-large);
}
}
fxview-empty-state {
&::part(container) {
margin-block-start: var(--space-medium);

6
browser/components/sidebar/tests/browser/browser_history_sidebar.js
View file

@ -269,11 +269,7 @@ add_task(async function test_history_search() {
}, "There are no matching search results.");
info("Clear the search query.");
EventUtils.synthesizeMouseAtCenter(
searchTextbox.clearButton,
{},
contentWindow
);
searchTextbox.clear();
await TestUtils.waitForCondition(
() => !component.lists[0].emptyState,
"The original cards are restored."

60
browser/components/storybook/stories/fxview-search-textbox.stories.mjs
View file

@ -1,60 +0,0 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* 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/. */
import { action } from "@storybook/addon-actions";
import { html, ifDefined } from "lit.all.mjs";
import "browser/components/firefoxview/fxview-search-textbox.mjs";
export default {
title: "Domain-specific UI Widgets/Firefox View/Search Textbox",
component: "fxview-search-textbox",
argTypes: {
size: {
control: { type: "number", min: 1, step: 1 },
},
},
};
const Template = ({ autofocus, placeholder, size }) => html`
<style>
fxview-search-textbox {
--fxview-border: var(--in-content-border-color);
--fxview-text-primary-color: var(--in-content-page-color);
--fxview-element-background-hover: var(
--in-content-button-background-hover
);
--fxview-text-color-hover: var(--in-content-button-text-color-hover);
}
</style>
<fxview-search-textbox
placeholder=${ifDefined(placeholder)}
size=${ifDefined(size)}
autofocus=${ifDefined(autofocus)}
@fxview-search-textbox-query=${action("fxview-search-textbox-query")}
></fxview-search-textbox>
`;
export const Default = Template.bind({});
Default.args = {
placeholder: "",
};
export const SearchBoxWithPlaceholder = Template.bind({});
SearchBoxWithPlaceholder.args = {
...Default.args,
placeholder: "Search",
};
export const SearchBoxWithCustomSize = Template.bind({});
SearchBoxWithCustomSize.args = {
...Default.args,
size: 32,
};
export const SearchBoxWithAutoFocus = Template.bind({});
SearchBoxWithAutoFocus.args = {
...Default.args,
autofocus: true,
};