Commit dea26080 authored by Marco Bonardo's avatar Marco Bonardo
Browse files

Bug 1586284 - Modify the flex layout to give urls more space on small screens. r=dao 

Let the url wrap, when the screen size is smaller than a threshold.
Along with a new proposal by Verdi for the toolbar overflow behavior, this
allows the urlbar to stay usable in small windows.

Because the title in Quantum Bar should never be empty, a few rules can be
simplified, so they also apply to the url when it's not a sibling of the other
result parts.

Differential Revision: https://phabricator.services.mozilla.com/D53178

--HG--
extra : moz-landing-system : lando
parent f2aa28e1

browser/components/urlbar/UrlbarView.jsm

+17 −9
Original line number Diff line number Diff line
@@ -759,44 +759,50 @@ class UrlbarView { 
  }



  _createRowContent(item) {

    // The url is the only element that can wrap, thus all the other elements

    // are child of noWrap.

    let noWrap = this._createElement("span");

    noWrap.className = "urlbarView-no-wrap";

    item._content.appendChild(noWrap);



    let typeIcon = this._createElement("span");

    typeIcon.className = "urlbarView-type-icon";



    if (!this.input.megabar) {

      item._content.appendChild(typeIcon);

      noWrap.appendChild(typeIcon);

    }



    let favicon = this._createElement("img");

    favicon.className = "urlbarView-favicon";

    item._content.appendChild(favicon);

    noWrap.appendChild(favicon);

    item._elements.set("favicon", favicon);



    if (this.input.megabar) {

      item._content.appendChild(typeIcon);

      noWrap.appendChild(typeIcon);

    }



    let title = this._createElement("span");

    title.className = "urlbarView-title";

    item._content.appendChild(title);

    noWrap.appendChild(title);

    item._elements.set("title", title);



    let tagsContainer = this._createElement("span");

    tagsContainer.className = "urlbarView-tags";

    item._content.appendChild(tagsContainer);

    noWrap.appendChild(tagsContainer);

    item._elements.set("tagsContainer", tagsContainer);



    let titleSeparator = this._createElement("span");

    titleSeparator.className = "urlbarView-title-separator";

    item._content.appendChild(titleSeparator);

    noWrap.appendChild(titleSeparator);

    item._elements.set("titleSeparator", titleSeparator);



    let action = this._createElement("span");

    action.className = "urlbarView-secondary urlbarView-action";

    item._content.appendChild(action);

    action.className = "urlbarView-action";

    noWrap.appendChild(action);

    item._elements.set("action", action);



    let url = this._createElement("span");

    url.className = "urlbarView-secondary urlbarView-url";

    url.className = "urlbarView-url";

    item._content.appendChild(url);

    item._elements.set("url", url);

  }
@@ -966,6 +972,7 @@ class UrlbarView { 


    let url = item._elements.get("url");

    if (setURL) {

      item.setAttribute("has-url", "true");

      this._addTextContentWithHighlights(

        url,

        result.payload.displayUrl,
@@ -973,6 +980,7 @@ class UrlbarView { 
      );

      url._tooltip = result.payload.displayUrl;

    } else {

      item.removeAttribute("has-url");

      url.textContent = "";

      url._tooltip = "";

    }

browser/themes/shared/urlbar-autocomplete.inc.css

+57 −26
Original line number Diff line number Diff line
@@ -162,13 +162,46 @@ 
  padding-inline-end: calc(@urlbarViewItemInlinePadding@ + 4px);

}



.urlbarView-row-inner {

.urlbarView-row-inner,

.urlbarView-no-wrap {

  display: flex;

  flex-wrap: nowrap;

  align-items: end;

  justify-content: start;

}



.urlbarView[actionoverride] .urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-no-wrap,

.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > .urlbarView-no-wrap,

.urlbarView-row[has-url][type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-no-wrap,

.urlbarView-row[has-url][type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-no-wrap {

  /* We prioritize icons + title + action over the url, so they can grow freely,

     but the url should never disappear when it's visible */

  flex-shrink: 0;

  max-width: calc(70% - 2 * (16px + (6px + 2px)));

}



/* 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 {

    flex-wrap: wrap;

  }

  .urlbarView.megabar .urlbarView-no-wrap {

    max-width: 100% !important;

    flex-basis: 100%;

  }

  .urlbarView.megabar .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) {

    display: none;

  }

}



.urlbarView-title[overflow],

.urlbarView-url[overflow] {

  mask-image: linear-gradient(to left, transparent, black 2em);
@@ -270,36 +303,36 @@ 
  }

}



.urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {

.urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {

  background-image: url(chrome://browser/skin/bookmark-12.svg);

  color: #0060df; /* Blue-60 */

  stroke: #fff;

}



.urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,

.urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,

.urlbarView.megabar:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {

  background-image: url(chrome://browser/skin/tab-12.svg);

  color: #008eaf; /* Teal-70 */

  stroke: #fff;

}



:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {

:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {

  color: #0a84ff; /* Blue-50 */

  stroke: #38383d; /* Grey-70 */

}



:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,

:root[lwt-toolbar-field-brighttext] .urlbarView.megabar:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {

:root[lwt-toolbar-field-brighttext] .urlbarView.megabar .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,

:root[lwt-toolbar-field-brighttext] .urlbarView.megabar:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {

  color: #00c8d7; /* Teal-60 */

  stroke: #38383d; /* Grey-70 */

}



.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {

.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {

  background-image: url(chrome://browser/skin/bookmark.svg);

}



.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,

.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {

.urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon,

.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-type-icon {

  background-image: url(chrome://browser/skin/tab.svg);

}
@@ -358,10 +391,6 @@ 
.urlbarView-title {

  overflow: hidden;

  white-space: nowrap;

  /* We prioritize the title over the url, so it can grow freely, but it should

     never crop the url completely */

  flex-shrink: 0;

  max-width: calc(70% - 2 * (16px + @urlbarViewIconMarginEnd@));

}



.urlbarView-row[type=tip] > .urlbarView-row-inner > .urlbarView-title {
@@ -380,7 +409,8 @@ 
}



.urlbarView-tags,

.urlbarView-title:not(:empty) ~ .urlbarView-secondary {

.urlbarView-url,

.urlbarView-title:not(:empty) ~ .urlbarView-action {

  font-size: .85em;

}
@@ -391,29 +421,23 @@ 
  font-weight: 600;

}



.urlbarView-title:not(:empty) ~ .urlbarView-secondary {

.urlbarView-title:not(:empty) ~ .urlbarView-action {

  color: var(--urlbar-popup-action-color);

}



.urlbarView-url {

  overflow: hidden;

}



.urlbarView-title:not(:empty) ~ .urlbarView-url {

  color: var(--urlbar-popup-url-color);

}



.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-title-separator::before,

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-secondary {

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before,

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap >.urlbarView-action,

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-url {

  color: inherit;

}



.urlbarView-row[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-action,

.urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-action,

.urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,

.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .urlbarView-row-inner > .urlbarView-title:not(:empty) ~ .urlbarView-action,

.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .urlbarView-row-inner > .urlbarView-title-separator,

.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,

.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator,

.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
@@ -421,6 +445,13 @@ 
  visibility: collapse;

}



.urlbarView-row[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,

.urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,

.urlbarView-row[type=search]:not([selected]):not(:hover):not([show-action-text]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,

.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {

  display: none;

}



.urlbarView-tags {

  overflow: hidden;

}
@@ -433,7 +464,7 @@ 
  margin-inline-start: .4em;

}



.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-tags > .urlbarView-tag {

.urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-tags > .urlbarView-tag {

  background-color: var(--autocomplete-popup-highlight-color);

  color: var(--autocomplete-popup-highlight-background);

}