mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1919193 - Simplify Persisted Search UI - r=adw,desktop-theme-reviewers,urlbar-reviewers,dao 

Differential Revision: https://phabricator.services.mozilla.com/D222489
This commit is contained in:
James Teow 2024-09-18 04:44:31 +00:00
Родитель d6946c7d87
Коммит b98fcb7751
9 изменённых файлов: 70 добавлений и 207 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

89
browser/base/content/navigator-toolbox.inc.xhtml
Просмотреть файл

@ -324,59 +324,52 @@
aria-labelledby="urlbar-search-mode-indicator-close urlbar-search-mode-indicator-title"
data-l10n-id="urlbar-search-mode-indicator-close"/>
</html:div>
<hbox class="urlbar-searchmode-and-input-box-container" flex="1">
<toolbarbutton id="urlbar-searchmode-switcher"
data-action="openpopup"
align="center"
role="button"
aria-haspopup="menu"
aria-expanded="false"
tooltip="dynamic-shortcut-tooltip"
class="chromeclass-toolbar-additional">
<image id="searchmode-switcher-icon" />
<image id="searchmode-switcher-dropmarker"
data-l10n-id="urlbar-searchmode-dropmarker"
class="toolbarbutton-icon toolbarbutton-combined-buttons-dropmarker" />
</toolbarbutton>
<box id="searchmode-switcher-chicklet">
<label id="searchmode-switcher-title" />
<toolbarbutton id="searchmode-switcher-close"
data-action="exitsearchmode"
role="button"
data-l10n-id="urlbar-searchmode-exit-button"
class="toolbarbutton-icon close-button" />
</box>
<moz-input-box tooltip="aHTMLTooltip"
class="urlbar-input-box"
flex="1"
role="combobox"
aria-owns="urlbar-results">
<html:input id="urlbar-scheme"
required="required"/>
<html:input id="urlbar-input"
class="urlbar-input"
anonid="input"
aria-controls="urlbar-results"
aria-autocomplete="both"
inputmode="mozAwesomebar"
data-l10n-id="urlbar-placeholder"
data-l10n-attrs="placeholder"/>
</moz-input-box>
<image class="urlbar-icon urlbar-revert-button"
role="button"
onclick="gURLBar.handleRevert({dontShowSearchTerms: true})"
data-l10n-id="urlbar-revert-button"/>
</hbox>
<toolbarbutton id="urlbar-searchmode-switcher"
data-action="openpopup"
align="center"
role="button"
aria-haspopup="menu"
aria-expanded="false"
tooltip="dynamic-shortcut-tooltip"
class="chromeclass-toolbar-additional">
<image id="searchmode-switcher-icon" />
<image id="searchmode-switcher-dropmarker"
data-l10n-id="urlbar-searchmode-dropmarker"
class="toolbarbutton-icon toolbarbutton-combined-buttons-dropmarker" />
</toolbarbutton>
<box id="searchmode-switcher-chicklet">
<label id="searchmode-switcher-title" />
<toolbarbutton id="searchmode-switcher-close"
data-action="exitsearchmode"
role="button"
data-l10n-id="urlbar-searchmode-exit-button"
class="toolbarbutton-icon close-button" />
</box>
<moz-input-box tooltip="aHTMLTooltip"
class="urlbar-input-box"
flex="1"
role="combobox"
aria-owns="urlbar-results">
<html:input id="urlbar-scheme"
required="required"/>
<html:input id="urlbar-input"
class="urlbar-input"
anonid="input"
aria-controls="urlbar-results"
aria-autocomplete="both"
inputmode="mozAwesomebar"
data-l10n-id="urlbar-placeholder"
data-l10n-attrs="placeholder"/>
</moz-input-box>
<image class="urlbar-icon urlbar-revert-button"
role="button"
onclick="gURLBar.handleRevert()"
data-l10n-id="urlbar-revert-button"/>
<image class="urlbar-icon urlbar-go-button"
role="button"
keyNav="false"
onclick="gURLBar.handleCommand(event);"
data-l10n-id="urlbar-go-button"/>
<image class="urlbar-icon urlbar-show-page-actions-button"
role="button"
onclick="gURLBar.handleRevert({dontShowSearchTerms: true})"
data-l10n-id="urlbar-show-page-actions-button"
align="center"/>
<hbox id="page-action-buttons" context="pageActionContextMenu" align="center">
<toolbartabstop/>
<hbox id="contextual-feature-recommendation" role="button" hidden="true">

1
browser/components/urlbar/UrlbarController.sys.mjs
Просмотреть файл

@ -323,7 +323,6 @@ export class UrlbarController {
this.view.close();
} else {
this.input.handleRevert({
dontShowSearchTerms: true,
escapeSearchMode: true,
});
}

31
browser/components/urlbar/UrlbarInput.sys.mjs
Просмотреть файл

@ -376,7 +376,7 @@ export class UrlbarInput {
* @param {boolean} [dueToSessionRestore]
* True if this is being called due to session restore and false
* otherwise.
* @param {boolean} [dontShowSearchTerms]
* @param {boolean} [hideSearchTerms]
* True if userTypedValue should not be overidden by search terms
* and false otherwise.
* @param {boolean} [isSameDocument]
@ -388,7 +388,7 @@ export class UrlbarInput {
uri = null,
dueToTabSwitch = false,
dueToSessionRestore = false,
dontShowSearchTerms = false,
hideSearchTerms = false,
isSameDocument = false
) {
// We only need to update the searchModeUI on tab switch conditionally
@ -399,7 +399,7 @@ export class UrlbarInput {
if (!this.window.gBrowser.userTypedValue) {
this.window.gBrowser.selectedBrowser.searchTerms = "";
if (
!dontShowSearchTerms &&
!hideSearchTerms &&
lazy.UrlbarPrefs.isPersistedSearchTermsEnabled()
) {
this.window.gBrowser.selectedBrowser.searchTerms =
@ -412,6 +412,7 @@ export class UrlbarInput {
let value = this.window.gBrowser.userTypedValue;
let valid = false;
let shouldPersist = false;
// If `value` is null or if it's an empty string and we're switching tabs
// or the userTypedValue equals the search terms, set value to either
@ -429,7 +430,9 @@ export class UrlbarInput {
) {
if (this.window.gBrowser.selectedBrowser.searchTerms) {
value = this.window.gBrowser.selectedBrowser.searchTerms;
valid = !dueToSessionRestore && !this.window.gBrowser.userTypedValue;
if (!this.searchMode) {
shouldPersist = true;
}
if (!isSameDocument) {
Services.telemetry.scalarAdd(
"urlbar.persistedsearchterms.view_count",
@ -500,12 +503,7 @@ export class UrlbarInput {
this.value = value;
this.valueIsTyped = !valid;
this.toggleAttribute("usertyping", !valid && value);
this.toggleAttribute(
"persistsearchterms",
lazy.UrlbarPrefs.isPersistedSearchTermsEnabled() &&
!!this.window.gBrowser.selectedBrowser.searchTerms &&
valid
);
this.toggleAttribute("persistsearchterms", shouldPersist);
if (this.focused && value != previousUntrimmedValue) {
if (
@ -866,7 +864,7 @@ export class UrlbarInput {
// Don't add further handling here, the catch above is our last resort.
}
handleRevert({ dontShowSearchTerms = false, escapeSearchMode = false } = {}) {
handleRevert({ escapeSearchMode = false } = {}) {
this.window.gBrowser.userTypedValue = null;
// Nullify search mode before setURI so it won't try to restore it.
if (
@ -875,7 +873,7 @@ export class UrlbarInput {
) {
this.searchMode = null;
}
this.setURI(null, true, false, dontShowSearchTerms);
this.setURI(null, true, false, true);
if (this.value && this.focused) {
this.select();
}
@ -886,7 +884,7 @@ export class UrlbarInput {
anchorElement?.closest("#urlbar") &&
this.window.gBrowser.selectedBrowser.searchTerms
) {
this.handleRevert({ dontShowSearchTerms: true });
this.handleRevert();
Services.telemetry.scalarAdd(
"urlbar.persistedsearchterms.revert_by_popup_count",
1
@ -3726,15 +3724,14 @@ export class UrlbarInput {
this.view.close();
}
// If there were search terms shown in the URL bar and the user
// didn't end up modifying the userTypedValue while it was
// focused, change back to a valid pageproxystate.
// If there were search terms shown in the URL bar but the user
// didn't modify the userTypedValue, restore the persisted search terms
// state.
if (
this.window.gBrowser.selectedBrowser.searchTerms &&
this.window.gBrowser.userTypedValue == null
) {
this.toggleAttribute("persistsearchterms", true);
this.setPageProxyState("valid", true);
}
// We may have hidden popup notifications, show them again if necessary.

50
browser/components/urlbar/tests/browser/browser_UrlbarInput_searchTerms_searchModeSwitcher.js
Просмотреть файл

@ -40,14 +40,6 @@ add_task(async function visibility_of_elements() {
"Unified Search Button is visible."
);
Assert.equal(
BrowserTestUtils.isVisible(
urlbar.querySelector(".urlbar-show-page-actions-button")
),
true,
"Show all page actions button is visible."
);
Assert.equal(
BrowserTestUtils.isVisible(urlbar.querySelector(".urlbar-revert-button")),
true,
@ -300,45 +292,3 @@ add_task(async function revert_button() {
BrowserTestUtils.removeTab(tab);
});
// TODO: The expand page actions button just reverts the urlbar
// but UX has said it will show a popover containing a list of page actions.
add_task(async function expand_page_actions_button() {
let { tab } = await searchWithTab(SEARCH_STRING);
let urlbar = window.gURLBar;
let pageActionsContainer = urlbar.querySelector("#page-action-buttons");
info("Verify page actions are not visible.");
Assert.equal(
BrowserTestUtils.isVisible(pageActionsContainer),
false,
"Page actions are visible."
);
info("Click expand page actions button.");
let showPageActionsButton = urlbar.querySelector(
".urlbar-show-page-actions-button"
);
EventUtils.synthesizeMouseAtCenter(showPageActionsButton, {}, window);
info("Verify page actions are visible.");
Assert.equal(
BrowserTestUtils.isVisible(pageActionsContainer),
true,
"Page actions are visible."
);
Assert.ok(
!gURLBar.hasAttribute("persistsearchterms"),
"Urlbar does not have persistsearchterms attribute."
);
Assert.equal(
gURLBar.getAttribute("pageproxystate"),
"valid",
"Page proxy state."
);
BrowserTestUtils.removeTab(tab);
});

25
browser/components/urlbar/tests/browser/browser_urlbar_telemetry_persisted.js
Просмотреть файл

@ -165,31 +165,6 @@ add_task(async function switch_to_tab_and_search() {
BrowserTestUtils.removeTab(tab2);
});
// When a user reverts the Urlbar after the search terms persist,
// conducting another search should still be registered as a
// urlbar-persisted SAP.
add_task(async function handle_revert() {
let search_hist =
TelemetryTestUtils.getAndClearKeyedHistogram("SEARCH_COUNTS");
const tab = await BrowserTestUtils.openNewForegroundTab(gBrowser);
await searchForString(SEARCH_STRING, tab);
gURLBar.handleRevert();
await searchForString(SEARCH_STRING, tab);
assertScalarSearchEnter(1);
// Check search count.
TelemetryTestUtils.assertKeyedHistogramSum(
search_hist,
"Example.urlbar-persisted",
1
);
BrowserTestUtils.removeTab(tab);
});
// A user going back and forth in history should trigger
// urlbar-persisted telemetry when returning to a SERP
// and conducting a search.

2
browser/components/urlbar/tests/browser/head.js
Просмотреть файл

@ -311,7 +311,7 @@ function assertSearchStringIsInUrlbar(
searchString,
{
win = window,
pageProxyState = "valid",
pageProxyState = "invalid",
userTypedValue = null,
persistSearchTerms = true,
} = {}

2
browser/locales/en-US/browser/browser.ftl
Просмотреть файл

@ -582,8 +582,6 @@ urlbar-page-action-button =
.tooltiptext = Page actions
urlbar-revert-button =
.tooltiptext = Show the address in the Location Bar
urlbar-show-page-actions-button =
.tooltiptext = Show all page actions
## Action text shown in urlbar results, usually appended after the search
## string or the url, like "result value - action text".

5
browser/themes/shared/browser-shared.css
Просмотреть файл

@ -65,11 +65,6 @@ body {
/* This should be used for icons and chiclets inside the input field. It makes
the gap around them more uniform when they are close to the field edges */
--urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
--urlbar-searchmode-and-input-box-container-border-color: color-mix(in srgb, currentColor 30%, transparent);
--urlbar-searchmode-and-input-box-container-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
--urlbar-search-mode-picker-persisted-background-color: color-mix(in srgb, currentColor 14%, transparent);
--urlbar-search-mode-picker-persisted-background-color-hover: color-mix(in srgb, currentColor 28%, transparent);
--urlbar-search-mode-picker-persisted-background-color-active: color-mix(in srgb, currentColor 35%, transparent);
--urlbar-searchmodeswitcher-spacing: 6px;
--pocket-icon-fill: #ef4056;

72
browser/themes/shared/urlbar-searchbar.css
Просмотреть файл

@ -21,7 +21,6 @@
#urlbar[usertyping] > .urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
#urlbar:not([usertyping]) > .urlbar-input-container > .urlbar-go-button,
#urlbar:not([focused]) > .urlbar-input-container > .urlbar-go-button,
.urlbar-show-page-actions-button,
.urlbar-revert-button {
display: none;
}
@ -46,8 +45,7 @@
}
#urlbar,
#searchbar,
.urlbar-searchmode-and-input-box-container {
#searchbar {
/* Setting a min-width to let the location & search bars maintain a constant
* width in case they haven't been resized manually. (bug 965772) */
min-width: 1px;
@ -129,23 +127,23 @@
text-align: right !important;
}
#urlbar:not([focused])[domaindir="ltr"]> .urlbar-input-container > .urlbar-searchmode-and-input-box-container > .urlbar-input-box > & {
#urlbar:not([focused])[domaindir="ltr"]> .urlbar-input-container > .urlbar-input-box > & {
direction: ltr;
unicode-bidi: embed;
}
/* The following rules apply overflow masks to the unfocused urlbar
This mask may be overriden when a Contextual Feature Recommendation is shown. */
#urlbar:not([focused])[textoverflow="both"] > .urlbar-input-container > .urlbar-searchmode-and-input-box-container > .urlbar-input-box > & {
#urlbar:not([focused])[textoverflow="both"] > .urlbar-input-container > .urlbar-input-box > & {
mask-image: linear-gradient(to right, transparent, black 3ch, black calc(100% - 3ch), transparent);
}
#urlbar:not([focused])[textoverflow="right"] > .urlbar-input-container > .urlbar-searchmode-and-input-box-container > .urlbar-input-box > & {
#urlbar:not([focused])[textoverflow="right"] > .urlbar-input-container > .urlbar-input-box > & {
mask-image: linear-gradient(to left, transparent, black 3ch);
}
#urlbar:not([focused])[textoverflow="left"] > .urlbar-input-container > .urlbar-searchmode-and-input-box-container > .urlbar-input-box > & {
#urlbar:not([focused])[textoverflow="left"] > .urlbar-input-container > .urlbar-input-box > & {
mask-image: linear-gradient(to right, transparent, black 3ch);
}
#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > .urlbar-input-container > .urlbar-searchmode-and-input-box-container > .urlbar-input-box > & {
#urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > .urlbar-input-container > .urlbar-input-box > & {
mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
}
}
@ -562,7 +560,6 @@
.urlbar-page-action,
.urlbar-revert-button,
.urlbar-show-page-actions-button,
.urlbar-go-button,
.search-go-button {
width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
@ -807,41 +804,15 @@
/* Persisted Search Terms rules specific when the Unified Search Button is present */
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.searchModeSwitcher.featureGate") or (-moz-bool-pref: "browser.urlbar.scotchBonnet.enableOverride") {
#urlbar[persistsearchterms] {
.urlbar-revert-button {
list-style-image: url(chrome://global/skin/icons/close.svg);
fill: var(--toolbarbutton-icon-fill);
}
.urlbar-show-page-actions-button {
list-style-image: url(chrome://global/skin/icons/more.svg);
}
.urlbar-searchmode-and-input-box-container {
align-items: center;
background-color: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.4));
/* Use an outline to avoid shifting the input field contents */
outline: 1px solid var(--urlbar-searchmode-and-input-box-container-border-color);
outline-offset: -1px;
border-radius: calc(var(--toolbarbutton-border-radius) + 1px);
box-shadow: var(--urlbar-searchmode-and-input-box-container-shadow);
padding-inline-end: var(--space-small);
}
.urlbar-go-button {
display: none;
}
#page-action-buttons {
display: none;
}
.urlbar-show-page-actions-button {
height: auto;
}
.urlbar-show-page-actions-button,
.urlbar-revert-button {
display: inherit;
}
#urlbar[persistsearchterms] {
.urlbar-revert-button {
list-style-image: url(chrome://global/skin/icons/defaultFavicon.svg);
fill: var(--color-accent-primary);
display: inherit;
}
#urlbar[focused][persistedsearchterms] .urlbar-searchmode-and-input-box-container {
background-color: transparent;
#page-action-buttons,
.urlbar-go-button {
display: none;
}
}
@ -1143,17 +1114,6 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.searchModeSwitcher.featureGate") or (-moz-bool-pref: "browser.urlbar.scotchBonnet.enableOverride") {
display: flex;
#urlbar[persistsearchterms] & {
height: 100%;
margin-inline-start: 0;
background-color: var(--urlbar-search-mode-picker-persisted-background-color);
}
#urlbar[persistsearchterms] &:hover {
background-color: var(--urlbar-search-mode-picker-persisted-background-color-hover);
}
#urlbar[persistsearchterms] &[open] {
background-color: var(--urlbar-search-mode-picker-persisted-background-color-active);
}
}
}
@ -1184,10 +1144,6 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
#urlbar[focused] & {
background-color: var(--urlbar-box-focus-bgcolor);
}
#urlbar[persistsearchterms] & {
background-color: var(--urlbar-search-mode-picker-persisted-background-color);
}
}
#searchmode-switcher-title {