Prevent itemlist in classic cit and edit bibl dialogs from expanding

Also
- Cleanup the XUL of said dialogs
- Refactor, spearate and clarify custom CSS injection into FX XUL
  elements
This commit is contained in:
Adomas Venčkauskas 2024-04-16 11:44:58 +03:00
parent 76b7f4be4f
commit c9561f1041
12 changed files with 170 additions and 146 deletions

View file

@ -167,13 +167,20 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
// inject custom CSS into FF built-in custom elements (currently only <wizard>)
const InjectCSSConfig = {
global: ["wizard"],
global: [
"wizard",
{
element: "dialog",
patchedFunction: "connectedCallback"
}
],
win: [
"wizard",
{
element: "dialog",
// The `attachShadow` are cleared in <dialog>, we need to monkey-patch after `connectedCallback`.
patchee: "connectedCallback"
patchedFunction: "connectedCallback",
filename: "wizard-dialog"
}
],
mac: [],
@ -185,24 +192,24 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
if (key == "linux" && !Zotero.isLinux) continue;
let prefix = "";
if (key == "global") {
prefix = "zotero/skin/";
prefix = "zotero/skin/xulElementPatches/";
}
else {
prefix = "zotero-platform/content/";
prefix = "zotero-platform/content/xulElementPatches/";
}
for (let config of configs) {
let element, patchee;
let element, patchedFunction;
// By default, monkey-patch `attachShadow`
if (typeof config === "string") {
element = config;
patchee = "attachShadow";
patchedFunction = "attachShadow";
}
else {
element = config.element;
patchee = config.patchee;
patchedFunction = config.patchedFunction;
}
let oldFunc = customElements.get(element).prototype[patchee];
customElements.get(element).prototype[patchee] = function () {
let oldFunc = customElements.get(element).prototype[patchedFunction];
customElements.get(element).prototype[patchedFunction] = function () {
let ret = oldFunc.apply(this, arguments);
this.shadowRoot.append(MozXULElement.parseXULToFragment(
`<html:link rel="stylesheet" href="chrome://${prefix}${element}.css"/>`

View file

@ -34,6 +34,7 @@
<window
id="add-citation-dialog"
class="contain-richlistbox"
windowtype="zotero:item-selector"
orient="vertical"
title="&zotero.integration.addEditCitation.title;"
@ -61,67 +62,65 @@
<vbox id="zotero-select-items-container" flex="1">
<vbox flex="1">
<hbox flex="1">
<vbox align="stretch" flex="1" style="min-width: 500px">
<hbox align="center" pack="end">
<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
</hbox>
<hbox flex="1" style="margin-top: 5px">
<vbox id="zotero-collections-tree-container" class="virtualized-table-container" style="min-width: 200px; min-height: 100%;">
<html:div id="zotero-collections-tree"></html:div>
</vbox>
<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1" style="width: 100%; min-height: 100%;">
<html:div id="zotero-items-tree"></html:div>
</hbox>
</hbox>
</vbox>
<hbox hidden="true" id="multiple-sources" align="stretch">
<vbox align="center" pack="center" id="citation-buttons">
<toolbarbutton id="up" oncommand="Zotero_Citation_Dialog.up()" disabled="true"/>
<toolbarbutton id="add" oncommand="Zotero_Citation_Dialog.add()" disabled="true"/>
<toolbarbutton id="remove" oncommand="Zotero_Citation_Dialog.remove()" disabled="true"/>
<toolbarbutton id="down" oncommand="Zotero_Citation_Dialog.down()" disabled="true"/>
</vbox>
<vbox align="left">
<checkbox id="keepSorted" hidden="true" checked="false" oncommand="Zotero_Citation_Dialog.citationSortUnsort()" label="&zotero.citation.keepSorted.label;" native="true"/>
<richlistbox id="item-list" flex="1" align="stretch" seltype="single" style="width: 250px;"
onselect="Zotero_Citation_Dialog.listItemSelected();"/>
</vbox>
<hbox flex="1">
<vbox align="stretch" flex="1" style="min-width: 500px">
<hbox align="center" pack="end">
<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
</hbox>
</hbox>
<hbox align="stretch" style="margin-top: 8px">
<vbox flex="1">
<hbox align="center">
<label value="&zotero.citation.prefix.label;"/>
<html:input type="text" class="fix" id="prefix" tabindex="3"
oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
<hbox flex="1" style="margin-top: 5px">
<vbox id="zotero-collections-tree-container" class="virtualized-table-container" style="min-width: 200px; min-height: 100%;">
<html:div id="zotero-collections-tree"></html:div>
</vbox>
<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1" style="width: 100%; min-height: 100%;">
<html:div id="zotero-items-tree"></html:div>
</hbox>
<hbox align="center">
<label value="&zotero.citation.suffix.label;"/>
<html:input type="text" class="fix" id="suffix" tabindex="4"
oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
</hbox>
<spacer flex="1"/>
</hbox>
</vbox>
<hbox hidden="true" id="multiple-sources" align="stretch">
<vbox align="center" pack="center" id="citation-buttons">
<toolbarbutton id="up" oncommand="Zotero_Citation_Dialog.up()" disabled="true"/>
<toolbarbutton id="add" oncommand="Zotero_Citation_Dialog.add()" disabled="true"/>
<toolbarbutton id="remove" oncommand="Zotero_Citation_Dialog.remove()" disabled="true"/>
<toolbarbutton id="down" oncommand="Zotero_Citation_Dialog.down()" disabled="true"/>
</vbox>
<separator flex="4"/>
<vbox flex="1">
<hbox align="stretch">
<menulist onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="label" tabindex="5" native="true">
<menupopup id="locator-type-popup"/>
</menulist>
<html:input oninput="Zotero_Citation_Dialog.confirmRegenerate(false)" onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="locator" tabindex="2"/>
</hbox>
<separator style="height: 2px" flex="1"/>
<checkbox oncommand="Zotero_Citation_Dialog.confirmRegenerate(true)" id="suppress-author" label="&zotero.citation.suppressAuthor.label;" tabindex="6" native="true"/>
<vbox align="left">
<checkbox id="keepSorted" hidden="true" checked="false" oncommand="Zotero_Citation_Dialog.citationSortUnsort()" label="&zotero.citation.keepSorted.label;" native="true"/>
<richlistbox id="item-list" flex="1" align="stretch" seltype="single" style="width: 250px;"
onselect="Zotero_Citation_Dialog.listItemSelected();"/>
</vbox>
</hbox>
</vbox>
</hbox>
<hbox align="stretch" style="margin-top: 8px">
<vbox flex="1">
<hbox align="center">
<label value="&zotero.citation.prefix.label;"/>
<html:input type="text" class="fix" id="prefix" tabindex="3"
oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
</hbox>
<hbox align="center">
<label value="&zotero.citation.suffix.label;"/>
<html:input type="text" class="fix" id="suffix" tabindex="4"
oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
</hbox>
<spacer flex="1"/>
</vbox>
<separator flex="4"/>
<vbox flex="1">
<hbox align="stretch">
<menulist onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="label" tabindex="5" native="true">
<menupopup id="locator-type-popup"/>
</menulist>
<html:input oninput="Zotero_Citation_Dialog.confirmRegenerate(false)" onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="locator" tabindex="2"/>
</hbox>
<separator style="height: 2px" flex="1"/>
<checkbox oncommand="Zotero_Citation_Dialog.confirmRegenerate(true)" id="suppress-author" label="&zotero.citation.suppressAuthor.label;" tabindex="6" native="true"/>
</vbox>
</hbox>
<iframe id="editor" src="simpleEditor.html" hidden="true" flex="1" type="content" remote="false" maychangeremoteness="false"/>
<description id="zotero-editor-warning" style="margin: 9px 1px 0" hidden="true">&zotero.citation.editorWarning.label;</description>

View file

@ -33,6 +33,7 @@
<window
id="edit-bibliography-dialog"
class="contain-richlistbox"
orient="vertical"
title="&zotero.integration.editBibliography.title;"
onload="Zotero_Bibliography_Dialog.load();"
@ -58,37 +59,32 @@
</script>
<vbox id="zotero-select-items-container" flex="1">
<vbox flex="1">
<hbox flex="1">
<vbox align="stretch" flex="1">
<hbox align="center" pack="end">
<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
</hbox>
<hbox flex="1" style="margin-top: 5px">
<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
<html:div id="zotero-collections-tree" class="edit-bibl"></html:div>
</vbox>
<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1">
<html:div id="zotero-items-tree"></html:div>
</hbox>
</hbox>
</vbox>
<hbox id="source-list">
<vbox align="center" pack="center" id="citation-buttons">
<toolbarbutton id="add" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true"/>
<toolbarbutton id="remove" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true"/>
</vbox>
<vbox>
<label value="&zotero.integration.references.label;"/>
<richlistbox id="item-list" flex="1" align="stretch" seltype="multiple"
style="width: 250px;" onselect="Zotero_Bibliography_Dialog.listItemSelected();"
onchanged="Zotero_Bibliography_Dialog.textChanged()"/>
</vbox>
<hbox flex="1">
<vbox align="stretch" flex="1">
<hbox align="center" pack="end">
<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
</hbox>
</hbox>
</vbox>
<hbox flex="1" style="margin-top: 5px">
<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
<html:div id="zotero-collections-tree" class="edit-bibl"></html:div>
</vbox>
<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1">
<html:div id="zotero-items-tree"></html:div>
</hbox>
</hbox>
</vbox>
<vbox align="center" pack="center" id="citation-buttons">
<toolbarbutton id="add" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true"/>
<toolbarbutton id="remove" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true"/>
</vbox>
<vbox>
<label value="&zotero.integration.references.label;"/>
<richlistbox id="item-list" flex="1" align="stretch" seltype="multiple"
style="width: 250px;" onselect="Zotero_Bibliography_Dialog.listItemSelected();"
onchanged="Zotero_Bibliography_Dialog.textChanged()"/>
</vbox>
</hbox>
<iframe id="editor" src="simpleEditor.html" flex="1" type="content" remote="false" maychangeremoteness="false"/>
<description id="zotero-editor-warning" style="margin: 9px 1px 0">&zotero.citation.editorWarning.label;</description>

View file

@ -384,3 +384,7 @@ window.citation-dialog {
window#add-citation-dialog, window#edit-bibliography-dialog {
min-height: 600px;
}
window#add-citation-dialog dialog, window#edit-bibliography-dialog dialog {
max-height: 100vh;
}

View file

@ -36,4 +36,13 @@
flex: 1 1 auto;
margin-bottom: 8px;
}
}
// richlistbox elements are crazy and will expand beyond the window size
// unless all/most elements in the hierarchy that contain that
// richlistbox have a min-height: 0 set
.contain-richlistbox {
vbox, hbox {
min-height: 0;
}
}

View file

@ -1,28 +0,0 @@
// Override/enhance mozilla <dialog> styles on Windows. See customElements.js
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
@import "themes/light";
@import "themes/dark";
// Base
// --------------------------------------------------
@import "base/base";
@import "win/abstracts/mixins";
@import "win/components/button";
.dialog-button-box {
margin-top: 8px;
}

View file

@ -1,23 +0,0 @@
// Override/enhance mozilla <wizard> styles on windows. See customElements.js
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
@import "themes/light";
@import "themes/dark";
// Base
// --------------------------------------------------
@import "base/base";
@import "win/abstracts/mixins";
@import "win/components/button";

View file

@ -0,0 +1,4 @@
The scss files in this directory are monkey-patch injected into firefox XUL elements with
shadow-doms that cannot be styled directly.
See chrome/content/zotero/customElements.js for how this is implemented and configured

View file

@ -0,0 +1,28 @@
// Override/enhance mozilla <dialog> styles on Windows. See customElements.js
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "../abstracts/variables";
@import "../abstracts/functions";
@import "../abstracts/mixins";
@import "../abstracts/placeholders";
@import "../abstracts/utilities";
@import "../abstracts/split-button";
@import "../abstracts/svgicon";
@import "../themes/light";
@import "../themes/dark";
// Base
// --------------------------------------------------
@import "../base/base";
@import "../win/abstracts/mixins";
@import "../win/components/button";
.dialog-button-box {
margin-top: 8px;
}

View file

@ -0,0 +1,5 @@
// Without this any richlistboxes within the dialog element will expand vertically
// beyond the limits of the dialog
vbox {
min-height: 0;
}

View file

@ -0,0 +1,23 @@
// Override/enhance mozilla <wizard> styles on windows. See customElements.js
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@import "../abstracts/variables";
@import "../abstracts/functions";
@import "../abstracts/mixins";
@import "../abstracts/placeholders";
@import "../abstracts/utilities";
@import "../abstracts/split-button";
@import "../abstracts/svgicon";
@import "../themes/light";
@import "../themes/dark";
// Base
// --------------------------------------------------
@import "../base/base";
@import "../win/abstracts/mixins";
@import "../win/components/button";