fx115 fixes

A number of style changes to fix layout for fx115.

- Make panes occupy all width/height based on layout.
- Display the tag splitter on windows and mac.
- Fix to odd fx115 behavior that gives an un-collapsed pane the
initial width of min-width * 2.
- Ensure that whenever there is a width attribute on contextPane, it will
be present in the style as well.
- Set width = 0 on zotero pane when it is not selected because it kept
preventing the contextPane from properly expanding.
- Context pane has its height changed on splitter drag.
- Set height of the context pane in stacked mode to 0 to avoid
having a blank gap after collapse.
- Remove negative margin before the toolbar if the collection tree
is collapsed on mac.
- Tweaks splitter styles to have mouse target of more than 1px.
Added positive z-index to make sure splitters are not covered by panes.
Splitter styles are somewhat unified for all platforms.
- Fix lookup panel sizing
- Quicksearch margin edits to not squize the input field.
- Collection and quick search fields layout fixed
- Use flex properties to fix layout
- fix outline display for editable-text
- fix the contextpane width going out of bounds
- stacked itemPane is visible after layout change
- In stacked view, prevent itemPane from being dragged so high that
it covers itemTree and overlaps with toolbar

chrome/content/zotero-platform/mac/overlay.css

@@ -1,8 +1,3 @@
-#zotero-items-toolbar[state=collapsed]
-{
-	margin-inline-start: -8px !important;
-}
-
 #zotero-pane toolbarseparator {
 	margin-inline-start: 7px;
 }

chrome/content/zotero-platform/unix/overlay.css

@@ -17,3 +17,13 @@ tab {
 #zotero-prefs .numberbox-input-box{
 	-moz-appearance: textfield;
 }
+
+#zotero-tags-splitter:not([state=collapsed]) {
+	min-height: 5px;
+}
+
+#zotero-context-splitter-stacked {
+	-moz-appearance: none;
+	background-color: #ececec;
+	border-top: 1px solid hsla(0, 0%, 0%, 0.2);
+}

chrome/content/zotero/contextPane.js

@@ -63,6 +63,7 @@ var ZoteroContextPane = new function () {
 		_panesDeck = document.createXULElement('deck');
 		_panesDeck.setAttribute('flex', 1);
 		_panesDeck.setAttribute('selectedIndex', 0);
+		_panesDeck.classList = "zotero-context-panes-deck";
 
 		_contextPaneInner.append(_panesDeck);
 
@@ -314,6 +315,10 @@ var ZoteroContextPane = new function () {
 		if (!Zotero.Reader.getSidebarOpen()) {
 			width = 0;
 		}
+		let contextPaneWidth = _contextPane.getAttribute("width");
+		if (contextPaneWidth && !_contextPane.style.width) {
+			_contextPane.style.width = `${contextPaneWidth}px`;
+		}
 		if (Zotero.rtl) {
 			_contextPane.style.left = 0;
 			_contextPane.style.right = stacked ? width : 'unset';
@@ -338,6 +343,10 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.remove('standard');
 			_sidenav.classList.add('stacked');
 			_contextPaneInner.append(_sidenav);
+			// Fx115: in stacked layout, make contextPane occupy all width and remove min-height
+			// needed for standard layout
+			_contextPane.style.width = 'auto';
+			_contextPaneInner.style.removeProperty("min-height");
 		}
 		else {
 			_contextPaneSplitter.setAttribute('hidden', false);
@@ -347,6 +356,10 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.remove('stacked');
 			_sidenav.classList.remove('stacked');
 			_contextPane.append(_sidenav);
+			// FX115: in standard layout, make contextPane have the width it's supposed to and
+			// force it to occupy all height available
+			_contextPaneInner.style.minHeight = `100%`;
+			_contextPane.style.width = `${_contextPane.getAttribute("width")}px`;
 		}
 		
 		if (Zotero_Tabs.selectedIndex > 0) {

chrome/content/zotero/elements/quickSearchTextbox.js

@@ -32,7 +32,7 @@
 
 			this.searchTextbox = null;
 			this.content = MozXULElement.parseXULToFragment(`
-				<hbox id="search-wrapper" flex="1" style="display: flex" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+				<hbox id="search-wrapper" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 				</hbox>
 			`, ['chrome://zotero/locale/zotero.dtd']);
 		}

chrome/content/zotero/zoteroPane.xhtml

@@ -1318,7 +1318,7 @@
 							>
 								<grippy/>
 							</splitter>
-							<vbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
+							<vbox id="zotero-context-pane-inner" zotero-persist="height"/>
 						</vbox>
 						<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 					</box>

chrome/skin/default/zotero/itemPane.css

@@ -10,12 +10,13 @@
 
 .zotero-item-pane-content {
 	min-height: 0;
+	flex: 1;
 }
 
 .zotero-view-item-container {
 	display: flex;
 	flex-direction: row;
-	height: 0; /* Prevent overflow, somehow */
+	height: 0;
 }
 
 .zotero-view-item-main {

chrome/skin/default/zotero/overlay.css

@@ -1,7 +1,6 @@
 #zotero-pane
 {
 	min-height: 32px; /* must match value in ZoteroPane.updateTagSelectorSize() */
-	overflow: hidden;
 }
 
 /*
@@ -182,7 +181,44 @@ TODO: Replace with SVG
 
 #zotero-layout-switcher
 {
-	height: 0;
+	min-width: 560px;
+}
+
+/*
+	Fx115: make panes occupy all availabel width/height after layout switch
+*/
+#zotero-layout-switcher[orient="horizontal"] :is(#zotero-items-pane-container, #zotero-item-pane) {
+	height: auto !important;
+}
+
+#zotero-layout-switcher[orient="vertical"],
+#zotero-layout-switcher[orient="vertical"] :is(#zotero-items-pane-container, #zotero-item-pane) {
+	width: auto !important;
+}
+
+/* 
+	Fix to odd fx115 behavior that gives an un-collapsed pane the initial width of min-width + last width
+*/
+#zotero-collections-pane[collapsed=true] {
+	min-width: 0px !important;
+	width: 0px !important;
+}
+
+#zotero-item-pane[collapsed=true] {
+	min-width: 0px !important;
+	width: 0px !important;
+}
+
+#zotero-context-pane[collapsed=true] {
+	min-width: 0px !important;
+	width: 0px !important;
+}
+
+/* 
+	Fx115: this helps to avoid having a blank gap where the panel was before collapse
+*/
+#zotero-context-pane-inner[collapsed=true] {
+	height: 0 !important;
 }
 
 #zotero-pane toolbarseparator {
@@ -199,12 +235,56 @@ TODO: Replace with SVG
 	padding: 0;
 }
 
+/*
+	Somewhat unified splitter styles
+*/
+#zotero-collections-splitter:not([state=collapsed]),
+#zotero-items-splitter:not([state=collapsed]),
+#zotero-context-splitter:not([state=collapsed]),
+#zotero-context-splitter-stacked:not([state=collapsed])
+{
+	border:none;
+	background-color: transparent;
+}
+
+#zotero-collections-splitter:not([state=collapsed]),
+#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
+#zotero-context-splitter:not([state=collapsed])[orient=horizontal]
+{
+	-moz-appearance: none;
+	width: 5px !important;
+	min-width: 5px;
+	/* Ensures all of the splitter serves as a mouse target */
+	z-index: 1;
+}
+
+#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
+#zotero-context-splitter:not([state=collapsed])[orient=horizontal],
+#zotero-collections-splitter:not([state=collapsed]) {
+	border-inline-start: 1px solid #bdbdbd;
+	margin-inline-end: -4px;
+}
+
+#zotero-items-splitter[orient=vertical]:not([state=collapsed]),
+#zotero-context-splitter-stacked
+{
+	z-index: 1;
+	border-top: 1px solid #bdbdbd !important;
+	min-height: 5px;
+	margin-bottom: -4px;
+}
+
 #zotero-lookup-textbox {
 	margin: 4px;
 	padding: 2px;
 	-moz-box-flex: 1;
 }
 
+#zotero-lookup-panel {
+	min-height: 100px;
+	min-width: 500px;
+}
+
 #zotero-lookup-multiline-progress
 {
 	height: 2em;

scss/abstracts/_mixins.scss

@@ -245,7 +245,6 @@
 		}
 
 		@media not (-moz-platform: windows) {
-			outline: none;
 			box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
 
 			@if $thin {

scss/components/_contextPane.scss

@@ -2,6 +2,10 @@
 	min-width: $min-width-collections-pane + $min-width-items-pane;
 }
 
+#tabs-deck:not([selectedIndex="0"]) #zotero-pane {
+	width: 0; /* Prevent the main pane from stretching the deck of the reader */
+}
+
 #zotero-context-pane {
 	display: flex;
 	min-width: $min-width-context-pane;
@@ -33,13 +37,30 @@
 }
 
 #zotero-context-pane-inner {
-	width: 0;
 	background: var(--material-background);
 	font: message-box;
 	font-size: inherit;
 	min-height: 100px;
 	height: 0;
 	pointer-events: auto;
+	background: var(--material-sidepane)
+}
+
+.zotero-context-panes-deck {
+	width: 100%;
+	display: block;
+}
+
+.zotero-context-panes-deck > deck {
+	height: 100%;
+}
+
+.zotero-view-item-container {
+	height: 100%;
+}
+
+#zotero-context-pane-inner  {
+	height: 0;
 }
 
 #zotero-item-toolbar {
@@ -92,3 +113,9 @@
 #zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
 	overflow: unset !important;
 }
+
+// fx115 - stop width or height from being set by dragging the splitter
+.zotero-view-item-sidenav {
+	width: auto !important;
+	height: auto !important;
+}

scss/components/_item-tree.scss

@@ -2,13 +2,12 @@
 
 #zotero-items-pane-container {
 	min-width: $min-width-items-pane;
+	height: 150px;
+	min-height: 200px;
 }
 
 #zotero-items-pane {
 	min-width: $min-width-items-pane;
-	min-height: 150px;
-	height: 150px;
-	width: 290px;
 }
 
 #zotero-items-tree {

scss/components/_mainWindow.scss

@@ -11,3 +11,6 @@
 	// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
 	min-width: 0;
 }
+#browser, #zotero-pane-stack, #zotero-trees {
+	min-height: 0;
+}

scss/components/_search.scss

@@ -65,7 +65,9 @@ search-textbox {
 	// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding
 	// Use explicit left/right padding here because this element is flipped in RTL (see below)
 	padding: 6px 4px 6px 6px;
-	margin: 0;
+	margin: 0px;
+	width: auto; // override fx115 default width
+	display: block; // override fx115 display:none on macOS
 }
 
 :is(search-textbox):-moz-locale-dir(rtl)::part(search-sign),

scss/components/_tabBar.scss

@@ -7,6 +7,7 @@
 	background: var(--material-tabbar);
 	-moz-window-dragging: drag;
 	min-height: var(--tab-min-height);
+	flex: 1;
 
 	@include macOS-inactive-opacity;
 	

scss/components/_tagSelector.scss

@@ -13,6 +13,7 @@
 	min-height: 100px;
 	width: 100%;
 	display: flex;
+	height: 100%;
 }
 
 .tag-selector {

scss/components/_toolbar.scss

@@ -67,6 +67,7 @@
 	padding-inline-end: 6px;
 	margin: 0;
 	appearance: none;
+	height: 28px;
 }
 
 #zotero-collections-search.visible {