parent
f79a59f56a
commit
e4f75c36e1
7 changed files with 205 additions and 133 deletions
|
@ -24,7 +24,6 @@
|
|||
***** END LICENSE BLOCK *****
|
||||
-->
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/scaffold.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
|
||||
|
||||
|
@ -40,6 +39,6 @@
|
|||
id="scaffold-load">
|
||||
<script src="load.js"/>
|
||||
<script src="chrome://zotero/content/titlebar.js"/>
|
||||
<richlistbox id="listbox" class="theme-listbox"/>
|
||||
<richlistbox id="listbox" class="theme-listbox" style="height: 300px;"/>
|
||||
</dialog>
|
||||
</window>
|
||||
|
|
|
@ -467,7 +467,7 @@
|
|||
</vbox>
|
||||
</tabpanel>
|
||||
<tabpanel flex="1" id="tabpanel-tests">
|
||||
<vbox flex="1" style="max-width: 100%;">
|
||||
<vbox id="testing-container">
|
||||
<vbox id="testing-listbox-container">
|
||||
<keyset>
|
||||
<key id="key-delete-tests" observes="validate-tests" keycode="VK_BACK" oncommand="Scaffold.deleteSelectedTests()"/>
|
||||
|
@ -487,27 +487,27 @@
|
|||
onselect="Scaffold.handleTestSelect(event)"
|
||||
context="testing-context-menu"
|
||||
/>
|
||||
<hbox>
|
||||
<button observes="validate-tests" label="&scaffold.testing.delete;" tooltiptext="Delete the selected tests" oncommand="Scaffold.deleteSelectedTests()"/>
|
||||
<button observes="validate-tests" label="&scaffold.testing.run;" tooltiptext="Run the selected tests" oncommand="Scaffold.runSelectedTests()"/>
|
||||
<button observes="validate-tests" label="&scaffold.testing.update;" tooltiptext="Run the selected tests and update the test definitions with the latest data" oncommand="Scaffold.updateSelectedTests()"/>
|
||||
|
||||
<hbox flex="1" pack="end">
|
||||
<checkbox
|
||||
id="checkbox-remember-cookies"
|
||||
label="&scaffold.testing.rememberCookies;"
|
||||
native="true"
|
||||
checked="true"
|
||||
/>
|
||||
</hbox>
|
||||
</hbox>
|
||||
</vbox>
|
||||
<hbox id="testing-buttons">
|
||||
<button observes="validate-tests" label="&scaffold.testing.delete;" tooltiptext="Delete the selected tests" oncommand="Scaffold.deleteSelectedTests()"/>
|
||||
<button observes="validate-tests" label="&scaffold.testing.run;" tooltiptext="Run the selected tests" oncommand="Scaffold.runSelectedTests()"/>
|
||||
<button observes="validate-tests" label="&scaffold.testing.update;" tooltiptext="Run the selected tests and update the test definitions with the latest data" oncommand="Scaffold.updateSelectedTests()"/>
|
||||
|
||||
<hbox flex="1" pack="end">
|
||||
<checkbox
|
||||
id="checkbox-remember-cookies"
|
||||
label="&scaffold.testing.rememberCookies;"
|
||||
native="true"
|
||||
checked="true"
|
||||
/>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<iframe src="monaco/monaco.html" id="editor-tests" onmousedown="this.focus()"/>
|
||||
</vbox>
|
||||
</tabpanel>
|
||||
<tabpanel>
|
||||
<vbox flex="1">
|
||||
<hbox align="center">
|
||||
<vbox id="browser-container">
|
||||
<hbox id="browser-url-container" align="center">
|
||||
<label control="browser-url" value="&scaffold.tabUrl.label;"/>
|
||||
<html:input id="browser-url" style="flex: 1;"/>
|
||||
<button observes="validate-tests" label="&scaffold.testing.create.web;" tooltiptext="Create a new test from the current page" oncommand="Scaffold.saveTestFromCurrent('web')"/>
|
||||
|
@ -524,8 +524,8 @@
|
|||
</vbox>
|
||||
</tabpanel>
|
||||
<tabpanel flex="1" id="tabpanel-import">
|
||||
<vbox flex="1">
|
||||
<hbox align="right">
|
||||
<vbox id="import-container">
|
||||
<hbox id="import-buttons" align="right">
|
||||
<button observes="validate-tests" label="&scaffold.testing.create.import;" tooltiptext="Create a new test from the current import data" oncommand="Scaffold.saveTestFromCurrent('import')" />
|
||||
<button observes="validate-tests" label="&scaffold.testing.create.search;" tooltiptext="Create a new test from the current search data" oncommand="Scaffold.saveTestFromCurrent('search')" />
|
||||
</hbox>
|
||||
|
|
|
@ -10,24 +10,43 @@ richlistbox {
|
|||
border: var(--material-panedivider);
|
||||
}
|
||||
|
||||
treecol {
|
||||
appearance: none;
|
||||
border: none;
|
||||
listheader {
|
||||
treecol {
|
||||
appearance: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
||||
.treecol-text {
|
||||
padding: 0 4px;
|
||||
margin: 1px 6px 2px 5px !important;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--material-mix-quinary);
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background: var(--material-mix-quarternary);
|
||||
}
|
||||
&:last-of-type::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--material-mix-quinary);
|
||||
}
|
||||
|
||||
&:hover:active {
|
||||
background: var(--material-mix-quarternary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
listheader + richlistbox {
|
||||
margin-top: 0;
|
||||
border-top: none;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
select[size][multiple] > option,
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
richlistbox.theme-listbox {
|
||||
background: var(--material-background);
|
||||
border: var(--material-panedivider);
|
||||
// Prevent horizontal scrollbar on Windows
|
||||
overflow-x: hidden;
|
||||
|
||||
richlistitem {
|
||||
--listitem-selectedBackground: var(--tag-gray);
|
||||
|
@ -23,11 +25,12 @@ richlistitem {
|
|||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
richlistitem, richlistitem > * {
|
||||
richlistitem, richlistitem * {
|
||||
// Prevent word cut-off with double-byte characters
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
richlistcheckbox[selected=true] {
|
||||
|
|
|
@ -4,45 +4,60 @@ tabbox {
|
|||
appearance: none;
|
||||
// Since the tab with opacity is weird, we just use hard-coded colors
|
||||
@include light-dark(background, #ededed, #343434);
|
||||
box-shadow:
|
||||
--tabbox-tab-shadow:
|
||||
0px 2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px -2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px 4px 4px -4px var(--fill-quinary) inset,
|
||||
0px -4px 4px -4px var(--fill-quinary) inset;
|
||||
--tabbox-tab-shadow-left:
|
||||
2px 0px 2px -2px var(--fill-quarternary) inset,
|
||||
4px 0px 4px -4px var(--fill-quinary) inset;
|
||||
--tabbox-tab-shadow-right:
|
||||
-2px 0px 2px -2px var(--fill-quarternary) inset,
|
||||
-4px 0px 4px -4px var(--fill-quinary) inset;
|
||||
|
||||
box-shadow: var(--tabbox-tab-shadow);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 14px;
|
||||
top: 5px;
|
||||
border-left: 1px solid var(--fill-quarternary);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
box-shadow:
|
||||
0px 2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px -2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px 4px 4px -4px var(--fill-quinary) inset,
|
||||
0px -4px 4px -4px var(--fill-quinary) inset,
|
||||
2px 0px 2px -2px var(--fill-quarternary) inset,
|
||||
4px 0px 4px -4px var(--fill-quinary) inset;
|
||||
border-start-start-radius: 6px;
|
||||
border-end-start-radius: 6px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:-moz-locale-dir(ltr) {
|
||||
box-shadow:
|
||||
var(--tabbox-tab-shadow),
|
||||
var(--tabbox-tab-shadow-left);
|
||||
}
|
||||
&:-moz-locale-dir(rtl) {
|
||||
box-shadow:
|
||||
var(--tabbox-tab-shadow),
|
||||
var(--tabbox-tab-shadow-right);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
box-shadow:
|
||||
0px 2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px -2px 2px -2px var(--fill-quarternary) inset,
|
||||
0px 4px 4px -4px var(--fill-quinary) inset,
|
||||
0px -4px 4px -4px var(--fill-quinary) inset,
|
||||
-2px 0px 2px -2px var(--fill-quarternary) inset,
|
||||
-4px 0px 4px -4px var(--fill-quinary) inset;
|
||||
border-start-end-radius: 6px;
|
||||
border-end-end-radius: 6px;
|
||||
&:-moz-locale-dir(ltr) {
|
||||
box-shadow:
|
||||
var(--tabbox-tab-shadow),
|
||||
var(--tabbox-tab-shadow-right);
|
||||
}
|
||||
&:-moz-locale-dir(rtl) {
|
||||
box-shadow:
|
||||
var(--tabbox-tab-shadow),
|
||||
var(--tabbox-tab-shadow-left);
|
||||
}
|
||||
}
|
||||
|
||||
&[visuallyselected=true] {
|
||||
|
@ -53,12 +68,12 @@ tabbox {
|
|||
|
||||
& + tab {
|
||||
&::before {
|
||||
display: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tab-middle {
|
||||
|
@ -68,6 +83,8 @@ tabbox {
|
|||
0px 1px 0.75px 0px var(--fill-quinary),
|
||||
0px 0.25px 0.25px 0px var(--color-border);;
|
||||
border: 0.5px solid var(--fill-senary);
|
||||
padding: 0.5px 6px 0.5px;
|
||||
margin: 0px -0.5px 1px -0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -52,7 +52,6 @@ $scaffold-toolbarbutton-icons: (
|
|||
border-bottom: var(--material-panedivider);
|
||||
|
||||
toolbarbutton {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 4px;
|
||||
margin: 0 4px;
|
||||
|
@ -65,57 +64,11 @@ $scaffold-toolbarbutton-icons: (
|
|||
toolbarseparator {
|
||||
appearance: none;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
background-color: var(--fill-quinary);
|
||||
}
|
||||
}
|
||||
|
||||
#metadata-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
align-items: center;
|
||||
grid-template-columns: max-content 1fr;
|
||||
}
|
||||
|
||||
#metadata-grid > label:nth-child(2n + 1) {
|
||||
justify-self: right;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
}
|
||||
|
||||
#metadata-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#metadata-bottom-row #textbox-minVersion {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#hbox-testFrame {
|
||||
-moz-box-align: center;
|
||||
}
|
||||
|
||||
richlistbox {
|
||||
min-width: 200px;
|
||||
|
||||
richlistitem {
|
||||
align-items: center;
|
||||
|
||||
> hbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#zotero-toolbar toolbarseparator {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
browser,
|
||||
#appcontent
|
||||
{
|
||||
|
@ -126,10 +79,6 @@ browser,
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
vbox > splitter {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
#left-tabbox {
|
||||
flex: 1;
|
||||
min-width: 500px;
|
||||
|
@ -143,20 +92,11 @@ vbox > splitter {
|
|||
}
|
||||
}
|
||||
|
||||
#checkboxes-translatorType {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#tabpanel-metadata label:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#right-pane {
|
||||
min-width: 350px;
|
||||
margin: -16px -16px -16px 0px;
|
||||
border-left: var(--material-panedivider);
|
||||
margin: -16px;
|
||||
margin-inline-start: 0;
|
||||
border-inline-start: var(--material-panedivider);
|
||||
|
||||
#output {
|
||||
width: 100%;
|
||||
|
@ -167,17 +107,111 @@ vbox > splitter {
|
|||
}
|
||||
}
|
||||
|
||||
#scaffold-load {
|
||||
#listbox {
|
||||
height: 300px;
|
||||
#metadata-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
align-items: center;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 8px;
|
||||
|
||||
label,
|
||||
button,
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& > label:nth-child(2n + 1) {
|
||||
justify-self: inline-end;
|
||||
}
|
||||
|
||||
label:first-child {
|
||||
text-align: inline-end;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr max-content;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#metadata-bottom-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
#textbox-minVersion {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#checkboxes-translatorType {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#testing-listbox-container {
|
||||
#testing-container {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
gap: 8px;
|
||||
|
||||
richlistbox {
|
||||
min-width: 200px;
|
||||
margin-block: 0;
|
||||
|
||||
richlistitem {
|
||||
align-items: center;
|
||||
|
||||
> hbox {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#testing-buttons {
|
||||
gap: 8px;
|
||||
|
||||
button,
|
||||
checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#testing-listbox-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#editor-tests {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
|
||||
#editor-tests {
|
||||
flex: 2;
|
||||
margin-top: 3px;
|
||||
#browser-container {
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
|
||||
#browser-url-container {
|
||||
gap: 8px;
|
||||
|
||||
button,
|
||||
label,
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#import-container {
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
|
||||
#import-buttons {
|
||||
gap: 8px;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,15 +24,15 @@ tabbox {
|
|||
color-scheme: light dark;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-left: 1px solid var(--fill-quinary);
|
||||
border-start-start-radius: 4px;
|
||||
border-end-start-radius: 4px;
|
||||
border-inline-start: 1px solid var(--fill-quinary);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-right: 1px solid var(--fill-quinary);
|
||||
border-start-end-radius: 4px;
|
||||
border-end-end-radius: 4px;
|
||||
border-inline-end: 1px solid var(--fill-quinary);
|
||||
}
|
||||
|
||||
@include focus-ring;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue