Bug 1424095: WIP patch to tweak frontend CSS to play nicely with XUL being emulated via modern flexbox. draft
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 14 Dec 2017 11:11:32 -0600
changeset 711791 1aa71b26f12af6761acbcc6b61438f3a66359a6e
parent 711789 05eca432d92b91a58e691364eb1477aaf67c7316
child 743872 f8d8a29007413e4ce94261154c9e11c5e7199d90
push id93142
push userdholbert@mozilla.com
push dateThu, 14 Dec 2017 17:11:47 +0000
bugs1424095
milestone59.0a1
Bug 1424095: WIP patch to tweak frontend CSS to play nicely with XUL being emulated via modern flexbox. MozReview-Commit-ID: 7LngFSijqep
browser/base/content/browser-tabsintitlebar.js
browser/base/content/browser.css
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/tabs.inc.css
toolkit/content/textbox.css
toolkit/content/xul.css
toolkit/themes/linux/global/global.css
toolkit/themes/osx/global/global.css
toolkit/themes/windows/global/global.css
--- 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 {