Bug 1424095: WIP patch to tweak frontend CSS to play nicely with XUL being emulated via modern flexbox.
MozReview-Commit-ID: 7LngFSijqep
--- a/browser/base/content/browser-tabsintitlebar.js
+++ b/browser/base/content/browser-tabsintitlebar.js
@@ -271,17 +271,17 @@ var TabsInTitlebar = {
if (document.documentElement.hasAttribute("customizing")) {
gCustomizeMode.updateLWTStyling();
}
},
_sizePlaceholder(type, width) {
Array.forEach(document.querySelectorAll(".titlebar-placeholder[type='" + type + "']"),
- function(node) { node.width = width; });
+ function(node) { node.style.width = width + "px"; });
},
uninit() {
this._initialized = false;
removeEventListener("resolutionchange", this);
Services.prefs.removeObserver(this._prefName, this);
this._menuObserver.disconnect();
CustomizableUI.removeListener(this);
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -89,16 +89,17 @@ panelview[mainview] > .panel-header {
display: none;
}
tabbrowser {
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
}
#tabbrowser-tabs {
+ width: 0;
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
}
#tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button,
#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button,
#tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#tabbrowser-tabs:not([hasadjacentnewtabbutton]) > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
@@ -112,17 +113,16 @@ tabbrowser {
.tabbrowser-tab {
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
}
.tabbrowser-tab:not([pinned]) {
-moz-box-flex: 100;
max-width: 225px;
min-width: var(--tab-min-width);
- width: 0;
transition: min-width 100ms ease-out,
max-width 100ms ease-out;
}
:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
/* Touch mode needs additional space for the close button. */
min-width: calc(var(--tab-min-width) + 10px);
}
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -292,17 +292,16 @@ description#identity-popup-content-verif
#tracking-protection-content:not([state]) > #tracking-actions {
display: none;
}
/* PERMISSIONS */
#identity-popup-permissions-content {
background-image: url(chrome://browser/skin/controlcenter/permissions.svg);
- padding-bottom: 1.5em;
}
#identity-popup-permissions-headline {
/* Make sure the label is as tall as the icon so that the permission list
which is aligned with the icon doesn't cover it up. */
min-height: 24px;
}
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -224,17 +224,17 @@ panel[photon] > .panel-arrowcontainer >
}
#wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
#wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
margin-inline-start: 0;
}
#BMB_bookmarksPopup {
- max-width: @standaloneSubviewWidth@;
+ width: @standaloneSubviewWidth@;
}
#pageActionFeedback > .panel-arrowcontainer > .panel-arrowbox {
/* Don't display the arrow but keep the popup at the same vertical
offset as other arrow panels. */
visibility: hidden;
}
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -38,16 +38,17 @@ tabbrowser {
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height);
}
.tab-stack {
min-height: inherit;
+ width: 0;
}
.tabbrowser-tab {
-moz-appearance: none;
background-color: transparent;
border-radius: 0;
border-width: 0;
margin: 0;
--- a/toolkit/content/textbox.css
+++ b/toolkit/content/textbox.css
@@ -6,23 +6,29 @@
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
html|*.textbox-input {
-moz-appearance: none !important;
text-align: inherit;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
+ /* Be block-level, so that -moz-box-flex can take effect, when we are an item
+ in a -moz-box being emulated by modified modern flex. */
+ display: block;
}
html|*.textbox-textarea {
-moz-appearance: none !important;
text-shadow: inherit;
box-sizing: border-box;
-moz-box-flex: 1;
+ /* Be block-level, so that -moz-box-flex can take effect, when we are an item
+ in a -moz-box being emulated by modified modern flex. */
+ display: block;
}
/*
html|*.textbox-input::placeholder,
html|*.textbox-textarea::placeholder {
text-align: left;
direction: ltr;
}
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -161,17 +161,19 @@ toolbar[mode="text"] .toolbarbutton-icon
-moz-binding: none;
}
/******** browser, editor, iframe ********/
browser,
editor,
iframe {
- display: inline;
+ /* Old and new flex are different in this case... emulation for webkit requires inline children to
+ **not** be converted to block. */
+ display: block;
}
browser {
-moz-binding: url("chrome://global/content/bindings/browser.xml#browser");
}
browser[remote=true]:not(.lightweight) {
-moz-binding: url("chrome://global/content/bindings/remote-browser.xml#remote-browser");
@@ -293,28 +295,30 @@ toolbar[customizing="true"][hidden="true
Override it while customizing. */
display: -moz-box;
}
%ifdef XP_MACOSX
toolbar[type="menubar"] {
min-height: 0 !important;
border: 0 !important;
+ padding: 0 !important;
}
%else
toolbar[type="menubar"][autohide="true"] {
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-menubar-autohide");
overflow: hidden;
}
toolbar[type="menubar"][autohide="true"][inactive="true"]:not([customizing="true"]) {
min-height: 0 !important;
height: 0 !important;
-moz-appearance: none !important;
border-style: none !important;
+ padding: 0 !important;
}
%endif
toolbarseparator {
-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbardecoration");
}
toolbarspacer {
@@ -1138,8 +1142,45 @@ tabmodalprompt {
.button-highlightable-text:not([highlightable="true"]),
.button-text[highlightable="true"],
.menulist-highlightable-label:not([highlightable="true"]),
.menulist-label[highlightable="true"],
.menu-iconic-highlightable-text:not([highlightable="true"]),
.menu-iconic-text[highlightable="true"] {
display: none;
}
+
+[flex="1"] { -moz-box-flex: 1; }
+[flex="2"] { -moz-box-flex: 2; }
+[flex="3"] { -moz-box-flex: 3; }
+[flex="4"] { -moz-box-flex: 4; }
+[flex="5"] { -moz-box-flex: 5; }
+[flex="6"] { -moz-box-flex: 6; }
+[flex="7"] { -moz-box-flex: 7; }
+[flex="8"] { -moz-box-flex: 8; }
+[flex="9"] { -moz-box-flex: 9; }
+[flex="400"] { -moz-box-flex: 400; }
+[flex="1000"] { -moz-box-flex: 1000; }
+
+[ordinal="1"] { -moz-box-ordinal-group: 1; }
+[ordinal="2"] { -moz-box-ordinal-group: 2; }
+[ordinal="3"] { -moz-box-ordinal-group: 3; }
+[ordinal="4"] { -moz-box-ordinal-group: 4; }
+[ordinal="5"] { -moz-box-ordinal-group: 5; }
+[ordinal="6"] { -moz-box-ordinal-group: 6; }
+[ordinal="7"] { -moz-box-ordinal-group: 7; }
+[ordinal="8"] { -moz-box-ordinal-group: 8; }
+[ordinal="9"] { -moz-box-ordinal-group: 9; }
+
+[orient="vertical"] { -moz-box-orient: vertical; }
+[orient="horizontal"] { -moz-box-orient: horizontal; }
+
+[dir="reverse"] { -moz-box-direction: reverse; }
+
+[align="start"] { -moz-box-align: start; }
+[align="center"] { -moz-box-align: center; }
+[align="end"] { -moz-box-align: end; }
+[align="baseline"] { -moz-box-align: baseline; }
+[align="stretch"] { -moz-box-align: stretch; }
+
+[pack="start"] { -moz-box-pack: start; }
+[pack="center"] { -moz-box-pack: center; }
+[pack="end"] { -moz-box-pack: end; }
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -79,17 +79,16 @@ window.dialog {
.authentication-icon {
list-style-image: url("chrome://global/skin/icons/Authentication.png");
}
/* ::::: iframe ::::: */
iframe {
border: none;
- width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
/* XXXBlake yeah, shoot me -- these don't belong here. I'll move them later. */
sidebarheader {
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -81,17 +81,16 @@ window.dialog {
.question-icon {
list-style-image: url("chrome://global/skin/icons/question-64.png");
}
/* ::::: iframe ::::: */
iframe {
border: none;
- width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
/* ::::: miscellaneous formatting ::::: */
sidebarheader {
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -84,17 +84,16 @@ window.dialog {
list-style-image: url("chrome://global/skin/icons/question-64.png");
}
}
/* ::::: iframe ::::: */
iframe {
border: none;
- width: 100px;
height: 100px;
min-width: 10px;
min-height: 10px;
}
/* XXXBlake yeah, shoot me -- these don't belong here. I'll move them later. */
sidebarheader {