Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 01:35:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1597221 - Use Urlbar width instead of screen width for the 2-line layout. r=dao

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

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Harry Twyford 2019-11-28 19:52:20 +00:00
parent 3ea9c9f00c
commit 0574e3e5a1
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,9 @@ const SELECTABLE_ELEMENTS = [
"urlbarView-tip-help",
];
const getBoundsWithoutFlushing = element =>
element.ownerGlobal.windowUtils.getBoundsWithoutFlushing(element);
/**
* Receives and displays address bar autocomplete results.
*/
@ -553,8 +556,6 @@ class UrlbarView {
this.panel.removeAttribute("actionoverride");
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);
@ -623,6 +624,9 @@ class UrlbarView {
);
}
}
this._enableOrDisableRowWrap();
this.input.inputField.setAttribute("aria-expanded", "true");
this.input.dropmarker.setAttribute("open", "true");
@ -1322,6 +1326,14 @@ class UrlbarView {
}
}
_enableOrDisableRowWrap() {
if (getBoundsWithoutFlushing(this.input.textbox).width <= 425) {
this._rows.setAttribute("wrap", "true");
} else {
this._rows.removeAttribute("wrap");
}
}
_setElementOverflowing(element, overflowing) {
element.toggleAttribute("overflow", overflowing);
if (overflowing) {
@ -1439,6 +1451,7 @@ class UrlbarView {
_on_resize() {
if (this.input.megabar) {
this._enableOrDisableRowWrap();
return;
}

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

@ -181,23 +181,23 @@
}
/* Wrap the url to a second line when the window is small */
@media screen and (max-width: 800px) and (min-height: 600px) {
.urlbarView.megabar .urlbarView-row-inner {
@media screen and (min-height: 600px) {
.urlbarView.megabar .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner {
flex-wrap: wrap;
}
.urlbarView.megabar .urlbarView-no-wrap {
.urlbarView.megabar .urlbarView-results[wrap] > .urlbarView-row > .urlbarView-row-inner > .urlbarView-no-wrap {
max-width: 100% !important;
flex-basis: 100%;
}
.urlbarView.megabar .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
.urlbarView.megabar .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url {
margin-top: 2px;
padding-inline-start: calc(@urlbarViewItemInlinePadding@ + @identityBoxMarginInlineEnd@ + /* favicon */ 16px);
}
/* Note: switchtab entries show the url only in override mode,
remotetab only when selected or :hover */
.urlbarView.megabar[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView.megabar .urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView.megabar .urlbarView-row[type=remotetab]:not([selected]):not(:hover) {
.urlbarView.megabar[actionoverride] .urlbarView-results[wrap] > .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView.megabar .urlbarView-results[wrap] > .urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,
.urlbarView.megabar .urlbarView-results[wrap] > .urlbarView-row[type=remotetab]:not([selected]):not(:hover) {
display: none;
}
}