forked from mirrors/gecko-dev
Backed out changeset 56007d13fdf6 (bug 1859774) for causing mochitest failures @ browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html CLOSED TREE
This commit is contained in:
Sandor Molnar
parent
f71ec5a437
commit
e6dd3d2d53
4 changed files with 29 additions and 120 deletions
|
|
@ -5,7 +5,13 @@
|
|||
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
|
||||
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
||||
|
||||
const lazy = {};
|
||||
ChromeUtils.defineESModuleGetters(lazy, {
|
||||
DeferredTask: "resource://gre/modules/DeferredTask.sys.mjs",
|
||||
});
|
||||
|
||||
const SEARCH_DEBOUNCE_RATE_MS = 500;
|
||||
const SEARCH_DEBOUNCE_TIMEOUT_MS = 1000;
|
||||
|
||||
/**
|
||||
* A search box that displays a search icon and is clearable. Updates to the
|
||||
|
|
@ -36,11 +42,21 @@ export default class FxviewSearchTextbox extends MozLitElement {
|
|||
};
|
||||
|
||||
#query = "";
|
||||
#searchTimer;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.searchTask = new lazy.DeferredTask(
|
||||
() => this.#dispatchQueryEvent(),
|
||||
SEARCH_DEBOUNCE_RATE_MS,
|
||||
SEARCH_DEBOUNCE_TIMEOUT_MS
|
||||
);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
clearTimeout(this.#searchTimer);
|
||||
if (!this.searchTask?.isFinalized) {
|
||||
this.searchTask?.finalize();
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
|
|
@ -62,11 +78,7 @@ export default class FxviewSearchTextbox extends MozLitElement {
|
|||
* button.
|
||||
*/
|
||||
onSearch() {
|
||||
clearTimeout(this.#searchTimer);
|
||||
this.#searchTimer = setTimeout(
|
||||
() => this.#dispatchQueryEvent(),
|
||||
SEARCH_DEBOUNCE_RATE_MS
|
||||
);
|
||||
this.searchTask?.arm();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
|
|
@ -91,17 +103,16 @@ export default class FxviewSearchTextbox extends MozLitElement {
|
|||
detail: { query: this.#query },
|
||||
})
|
||||
);
|
||||
if (!window.IS_STORYBOOK) {
|
||||
Services.telemetry.recordEvent(
|
||||
"firefoxview_next",
|
||||
"search_initiated",
|
||||
"search",
|
||||
null,
|
||||
{
|
||||
page: this.pageName,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Services.telemetry.recordEvent(
|
||||
"firefoxview_next",
|
||||
"search_initiated",
|
||||
"search",
|
||||
null,
|
||||
{
|
||||
page: this.pageName,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,4 @@
|
|||
|
||||
["test_card_container.html"]
|
||||
|
||||
["test_fxview_search_textbox.html"]
|
||||
|
||||
["test_fxview_tab_list.html"]
|
||||
|
|
|
|||
|
|
@ -1,47 +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="content">
|
||||
<fxview-search-textbox></fxview-search-textbox>
|
||||
</div>
|
||||
<pre id="test"></pre>
|
||||
<script>
|
||||
const { BrowserTestUtils } = ChromeUtils.importESModule(
|
||||
"resource://testing-common/BrowserTestUtils.sys.mjs"
|
||||
);
|
||||
|
||||
add_task(async function test_search_and_clear() {
|
||||
const component = document.querySelector("fxview-search-textbox");
|
||||
|
||||
info("Enter a search query.");
|
||||
let promiseEvent = BrowserTestUtils.waitForEvent(
|
||||
component,
|
||||
"fxview-search-textbox-query"
|
||||
);
|
||||
synthesizeMouseAtCenter(component, {});
|
||||
sendChar("Q");
|
||||
let query = (await promiseEvent).detail.query;
|
||||
is(query, "Q", "Event was fired with the correct query.");
|
||||
|
||||
info("Clear the search query.");
|
||||
promiseEvent = BrowserTestUtils.waitForEvent(
|
||||
component,
|
||||
"fxview-search-textbox-query"
|
||||
);
|
||||
synthesizeMouseAtCenter(component.clearButton, {});
|
||||
query = (await promiseEvent).detail.query;
|
||||
is(query, "", "Event was fired with a blank query.");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,53 +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 = ({ 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)}
|
||||
@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,
|
||||
};
|
||||
Loading…
Reference in a new issue