Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 06:11:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1561533 - Increase quantumbar input size on focus and visually integrate the view. r=harry

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D42149

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Dão Gottwald 2019-08-20 15:14:25 +00:00
parent 4d1b5b9a5c
commit 26f3378b01
9 changed files with 154 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
accessible/tests/browser/general/browser_test_urlbar.js
View File

@ -23,7 +23,7 @@ add_task(async function testAutocompleteRichResult() {
info("Waiting for accessibility to be created for the results list");
let resultsView;
resultsView = gURLBar.view.panel.querySelector("#urlbarView-results");
resultsView = gURLBar.view.panel.querySelector(".urlbarView-results");
await BrowserTestUtils.waitForCondition(() =>
accService.getAccessibleFor(resultsView)
);

20
browser/base/content/browser.xhtml
View File

@ -981,12 +981,12 @@
class="urlbar-input-box"
flex="1"
role="combobox"
aria-owns="urlbarView-results">
aria-owns="urlbar-results">
<html:input id="urlbar-scheme"
required="required"/>
<html:input id="urlbar-input"
anonid="input"
aria-controls="urlbarView-results"
aria-controls="urlbar-results"
aria-autocomplete="both"
inputmode="mozAwesomebar"
placeholder="&urlbar.placeholder2;"/>
@ -1055,6 +1055,22 @@
</hbox>
</hbox>
</hbox>
<vbox class="urlbarView"
role="group"
tooltip="aHTMLTooltip"
hidden="true">
<html:div class="urlbarView-body-outer">
<html:div class="urlbarView-body-inner">
<html:div id="urlbar-results"
class="urlbarView-results"
role="listbox"/>
</html:div>
</html:div>
<hbox class="search-one-offs"
compact="true"
includecurrentengine="true"
disabletab="true"/>
</vbox>
</hbox>
<toolbartabstop/>
</toolbaritem>

94
browser/components/urlbar/UrlbarInput.jsm
View File

@ -54,33 +54,12 @@ class UrlbarInput {
this.window = this.textbox.ownerGlobal;
this.document = this.window.document;
this.window.addEventListener("unload", this);
// Create the panel to contain results.
// In the future this may be moved to the view, so it can customize
// the container element.
let MozXULElement = this.window.MozXULElement;
this.textbox.after(
MozXULElement.parseXULToFragment(`
<vbox id="urlbar-results"
role="group"
tooltip="aHTMLTooltip"
hidden="true">
<html:div class="urlbarView-body-outer">
<html:div class="urlbarView-body-inner">
<html:div id="urlbarView-results"
role="listbox"/>
</html:div>
</html:div>
<hbox class="search-one-offs"
compact="true"
includecurrentengine="true"
disabletab="true"/>
</vbox>
`)
);
this.panel = this.document.getElementById("urlbar-results");
this.panel = this.textbox.querySelector(".urlbarView");
this.megabar = UrlbarPrefs.get("megabar");
if (this.megabar) {
this.textbox.classList.add("megabar");
}
this.controller =
options.controller ||
@ -228,7 +207,7 @@ class UrlbarInput {
}
this.dropmarker.removeEventListener("mousedown", this);
this.view.panel.remove();
this.endLayoutBreakout(true);
// When uninit is called due to exiting the browser's customize mode,
// this.inputField.controllers is not the original list of controllers, and
@ -852,6 +831,65 @@ class UrlbarInput {
);
}
startLayoutBreakout() {
if (
this._layoutBreakoutPlaceholder ||
!this.megabar ||
!(
(this.focused && !this.textbox.classList.contains("hidden-focus")) ||
this.view.isOpen
)
) {
return;
}
let getBoundsWithoutFlushing = element =>
this.window.windowUtils.getBoundsWithoutFlushing(element);
let px = number => number.toFixed(2) + "px";
let inputRect = getBoundsWithoutFlushing(this.textbox);
if (inputRect.width == 0) {
this.window.requestAnimationFrame(() => {
this.startLayoutBreakout();
});
return;
}
this.textbox.style.setProperty("--urlbar-width", px(inputRect.width));
let toolbarHeight = getBoundsWithoutFlushing(
this.textbox.closest("toolbar")
).height;
this.textbox.style.setProperty(
"--urlbar-toolbar-height",
px(toolbarHeight)
);
this._layoutBreakoutPlaceholder = this.document.createXULElement(
this.textbox.nodeName
);
this._layoutBreakoutPlaceholder.setAttribute(
"flex",
this.textbox.getAttribute("flex")
);
this._layoutBreakoutPlaceholder.style.height = px(inputRect.height);
this.textbox.before(this._layoutBreakoutPlaceholder);
}
endLayoutBreakout(force) {
if (
!force &&
(this.isOpen ||
(this.focused && !this.textbox.classList.contains("hidden-focus")))
) {
return;
}
if (this._layoutBreakoutPlaceholder) {
this._layoutBreakoutPlaceholder.remove();
this._layoutBreakoutPlaceholder = null;
}
}
// Private methods below.
_setOpenViewOnFocus() {
@ -1461,6 +1499,8 @@ class UrlbarInput {
});
this.removeAttribute("focused");
this.endLayoutBreakout();
this.formatValue();
this._resetSearchState();
@ -1509,6 +1549,8 @@ class UrlbarInput {
_on_focus(event) {
this.setAttribute("focused", "true");
this.startLayoutBreakout();
this._updateUrlTooltip();
this.formatValue();

47
browser/components/urlbar/UrlbarView.jsm
View File

@ -40,7 +40,7 @@ class UrlbarView {
}
this._mainContainer = this.panel.querySelector(".urlbarView-body-inner");
this._rows = this.panel.querySelector("#urlbarView-results");
this._rows = this.panel.querySelector(".urlbarView-results");
this._rows.addEventListener("mousedown", this);
this._rows.addEventListener("mouseup", this);
@ -281,6 +281,9 @@ class UrlbarView {
this.input.inputField.setAttribute("aria-expanded", "false");
this.input.dropmarker.removeAttribute("open");
this.input.removeAttribute("open");
this.input.endLayoutBreakout();
this._rows.textContent = "";
this.window.removeEventListener("resize", this);
@ -411,10 +414,6 @@ class UrlbarView {
// Private methods below.
_getBoundsWithoutFlushing(element) {
return this.window.windowUtils.getBoundsWithoutFlushing(element);
}
_createElement(name) {
return this.document.createElementNS("http://www.w3.org/1999/xhtml", name);
}
@ -427,19 +426,17 @@ class UrlbarView {
this.panel.removeAttribute("actionoverride");
let inputRect = this._getBoundsWithoutFlushing(this.input.textbox);
if (!this.input.megabar) {
let getBoundsWithoutFlushing = element =>
this.window.windowUtils.getBoundsWithoutFlushing(element);
let px = number => number.toFixed(2) + "px";
let inputRect = getBoundsWithoutFlushing(this.input.textbox);
let px = number => number.toFixed(2) + "px";
let width;
if (this.input.megabar) {
// Make the panel span the width of the textbox.
width = inputRect.width;
} else {
// Make the panel span the width of the window.
let documentRect = this._getBoundsWithoutFlushing(
let documentRect = getBoundsWithoutFlushing(
this.document.documentElement
);
width = documentRect.right - documentRect.left;
let width = documentRect.right - documentRect.left;
// Keep the popup items' site icons aligned with the input's identity
// icon if it's not too far from the edge of the window. We define
@ -475,7 +472,7 @@ class UrlbarView {
} else {
alignIcon = this.document.getElementById("identity-icon");
}
let alignRect = this._getBoundsWithoutFlushing(alignIcon);
let alignRect = getBoundsWithoutFlushing(alignIcon);
let start = this.window.RTL_UI
? documentRect.right - alignRect.right
: alignRect.left;
@ -486,22 +483,22 @@ class UrlbarView {
this.panel.style.removeProperty("--item-padding-start");
this.panel.style.removeProperty("--item-padding-end");
}
// Align the panel with the parent toolbar.
this.panel.style.top = px(
getBoundsWithoutFlushing(this.input.textbox.closest("toolbar")).bottom
);
this._mainContainer.style.maxWidth = px(width);
}
this.panel.style.width = px(width);
this._mainContainer.style.maxWidth = px(width);
// Align the panel with the input or the input's parent toolbar, depending
// on megabar status.
let alignmentRect = this.input.megabar
? this._getBoundsWithoutFlushing(this.input.textbox)
: this._getBoundsWithoutFlushing(this.input.textbox.closest("toolbar"));
this.panel.style.top = px(alignmentRect.bottom);
this.panel.removeAttribute("hidden");
this.input.inputField.setAttribute("aria-expanded", "true");
this.input.dropmarker.setAttribute("open", "true");
this.input.setAttribute("open", "true");
this.input.startLayoutBreakout();
this.window.addEventListener("mousedown", this);
this.panel.addEventListener("mousedown", this);
this.input.textbox.addEventListener("mousedown", this);

2
browser/themes/linux/browser.css
View File

@ -315,7 +315,7 @@ notification[value="translation"] menulist > .menulist-dropmarker {
border-top: 1px solid ThreeDShadow;
}
#urlbar-results {
.urlbarView {
font-size: 1.05em;
}

2
browser/themes/osx/browser.css
View File

@ -318,7 +318,7 @@
border-top: 1px solid #C7C7C7;
}
#urlbar-results {
.urlbarView {
font-size: 14px;
}

39
browser/themes/shared/urlbar-autocomplete.inc.css
View File

@ -26,21 +26,17 @@
--urlbar-popup-action-color: #30e60b;
}
#urlbar-results {
position: fixed;
z-index: 1;
background: var(--autocomplete-popup-background);
color: var(--autocomplete-popup-color);
.urlbarView {
text-shadow: none;
}
#urlbar-results.megabar {
margin-inline-start: 5px;
}
#urlbar-results:not(.megabar) {
.urlbarView:not(.megabar) {
position: fixed;
z-index: 1;
left: 0;
right: 0;
background: var(--autocomplete-popup-background);
color: var(--autocomplete-popup-color);
border-block: 1px solid var(--chrome-content-separator-color);
}
@ -86,12 +82,11 @@
text-align: end;
}
.urlbarView-body-inner {
box-sizing: border-box;
.urlbarView.megabar .urlbarView-body-inner {
width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutExtend@ - 2px /* urlbar border */);
}
#urlbarView-results {
box-sizing: border-box;
.urlbarView-results {
padding: @urlbarViewPadding@;
white-space: nowrap;
}
@ -174,7 +169,7 @@
}
.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
background-image: url(chrome://browser/skin/tab.svg);
}
@ -230,8 +225,8 @@
.urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-action,
.urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-title-separator,
#urlbar-results[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
/* Use visibility:collapse instead of display:none since the latter can
confuse the overflow state of title and url elements when their content
changes while they're hidden. */
@ -256,30 +251,30 @@
}
/* Search one-offs. */
#urlbar-results > .search-one-offs {
#urlbar .search-one-offs {
-moz-box-orient: horizontal;
padding-top: 16px;
padding-bottom: 16px;
}
#urlbar-results:not(.megabar) > .search-one-offs {
#urlbar:not(.megabar) .search-one-offs {
padding-inline-start: var(--item-padding-start, 5px);
padding-inline-end: var(--item-padding-end, 5px);
}
#urlbar-results .search-panel-one-offs {
#urlbar .search-panel-one-offs {
padding-left: 12px;
padding-right: 12px;
}
#urlbar-results .search-panel-header {
#urlbar .search-panel-header {
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
#urlbar-results .searchbar-engine-one-off-item {
#urlbar .searchbar-engine-one-off-item {
min-width: 32px;
height: 32px;
margin: 0 4px;

31
browser/themes/shared/urlbar-searchbar.inc.css
View File

@ -6,6 +6,7 @@
%define fieldBorderColor hsla(240,5%,5%,.25)
%define fieldHoverBorderColor hsla(240,5%,5%,.35)
%define urlbarBreakoutExtend 4px
:root {
--toolbar-field-focus-border-color: Highlight;
@ -24,15 +25,19 @@
--urlbar-icon-padding: 7px;
}
#urlbar-container,
#search-container {
padding: 3px 5px;
}
#urlbar,
#searchbar {
background-color: -moz-Field;
color: -moz-FieldText;
background-clip: content-box;
background-clip: padding-box;
border: 1px solid @fieldBorderColor@;
border-radius: var(--toolbarbutton-border-radius);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
margin: 3px 5px;
min-height: 30px;
overflow: -moz-hidden-unscrollable;
text-shadow: none;
@ -79,6 +84,22 @@
border-color: var(--toolbar-field-focus-border-color);
}
#urlbar.megabar:not(.hidden-focus)[focused="true"],
#urlbar.megabar[open="true"] {
position: absolute;
z-index: 2;
top: 0;
margin-top: -@urlbarBreakoutExtend@;
margin-inline-start: -@urlbarBreakoutExtend@;
width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutExtend@);
min-height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutExtend@);
padding: calc(3px + @urlbarBreakoutExtend@) 0;
}
#urlbar.megabar[open="true"] {
padding-bottom: 0 !important;
}
#urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
#navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
@ -94,8 +115,6 @@
:root[uidensity=compact] #urlbar,
:root[uidensity=compact] #searchbar {
min-height: 26px;
margin-top: 3px;
margin-bottom: 3px;
}
:root[uidensity=touch] #urlbar,
@ -103,9 +122,9 @@
min-height: 32px;
}
:root[chromehidden~="toolbar"] #urlbar {
:root[chromehidden~="toolbar"] #urlbar-container {
/* Remove excess space between the address bar and the menu button in popups. */
margin-inline-end: 0;
padding-inline-end: 0;
}
:root[customizing] .urlbar-input-box {

2
browser/themes/windows/browser.css
View File

@ -609,7 +609,7 @@ menuitem.bookmark-item {
%include ../shared/autocomplete.inc.css
%include ../shared/urlbar-autocomplete.inc.css
#urlbar-results {
.urlbarView {
font-size: 1.15em;
}