{
- setPin();
- });
+ const pin = addon.data.imageViewer.window.document.querySelector(
+ "#pin",
+ ) as HTMLButtonElement;
+ pin.innerHTML = addon.data.imageViewer.pined
+ ? ICONS.imageViewerPined
+ : ICONS.imageViewerPin;
+ pin.title = addon.data.imageViewer.pined ? "Unpin" : "Pin";
+ pin?.addEventListener("click", (e) => {
+ setPin();
+ });
addon.data.imageViewer.window.addEventListener("keydown", (e) => {
// ctrl+w or esc
if ((e.key === "w" && e.ctrlKey) || e.keyCode === 27) {
diff --git a/src/modules/workspace/content.ts b/src/modules/workspace/content.ts
index 4bb57aa..9ca1ec9 100644
--- a/src/modules/workspace/content.ts
+++ b/src/modules/workspace/content.ts
@@ -23,30 +23,18 @@ export function initWorkspace(container: XUL.Box | undefined) {
callback: (ev: Event) => void,
) {
return {
- tag: "div",
id,
- classList: ["tooltip"],
- children: [
+ tag: "button",
+ namespace: "html",
+ classList: ["tool-button"],
+ properties: {
+ innerHTML: content,
+ title,
+ },
+ listeners: [
{
- tag: "button",
- namespace: "html",
- classList: ["tool-button"],
- properties: {
- innerHTML: content,
- },
- listeners: [
- {
- type: "click",
- listener: callback,
- },
- ],
- },
- {
- tag: "span",
- classList: ["tooltiptext"],
- properties: {
- innerHTML: title,
- },
+ type: "click",
+ listener: callback,
},
],
};
@@ -79,7 +67,7 @@ export function initWorkspace(container: XUL.Box | undefined) {
tag: "link",
properties: {
rel: "stylesheet",
- href: `chrome://${config.addonRef}/content/tooltip.css`,
+ href: `chrome://${config.addonRef}/content/toolbutton.css`,
},
},
{
@@ -158,6 +146,9 @@ export function initWorkspace(container: XUL.Box | undefined) {
flex: "1",
width: "700",
},
+ styles: {
+ background: "var(--material-background50)",
+ },
},
{
tag: "splitter",
@@ -203,6 +194,7 @@ export function initWorkspace(container: XUL.Box | undefined) {
const outlineContainer = container.querySelector(
`#${makeId("outline-container")}`,
) as XUL.Box;
+ outlineContainer.style.background = "var(--material-sidepane)";
const outlineMut = new (ztoolkit.getGlobal("MutationObserver"))(
(mutations) => {
if (outlineContainer.getAttribute("collapsed") === "true") {
diff --git a/src/modules/workspace/tab.ts b/src/modules/workspace/tab.ts
index 80ad465..cf33231 100644
--- a/src/modules/workspace/tab.ts
+++ b/src/modules/workspace/tab.ts
@@ -60,24 +60,11 @@ async function addWorkspaceTab() {
tabElem.style.width = "30px";
tabElem.style.minWidth = "30px";
tabElem.style.maxWidth = "30px";
- tabElem.style.padding = "0px";
const content = tabElem.querySelector(".tab-name") as HTMLDivElement;
const close = tabElem.querySelector(".tab-close") as HTMLDivElement;
- content.style.verticalAlign = "middle";
content.style.width = "20px";
content.style.height = "20px";
- content.style.display = "inline";
content.innerHTML = "";
- ztoolkit.UI.appendElement(
- {
- tag: "span",
- classList: ["icon-bg"],
- styles: {
- backgroundImage: `url("chrome://${config.addonRef}/content/icons/favicon.png")`,
- },
- },
- content,
- );
close.style.visibility = "hidden";
addon.data.workspace.tab.id = id;
container.setAttribute("workspace-type", "tab");
@@ -162,14 +149,15 @@ function isContextPaneInitialized() {
export async function activateWorkspaceTab() {
if (Zotero_Tabs.selectedType === TAB_TYPE && isContextPaneInitialized()) {
- (
- document.querySelector("#zotero-tab-toolbar") as XUL.Box
- ).style.visibility = "collapse";
+ const tabToolbar = document.querySelector("#zotero-tab-toolbar") as XUL.Box;
+ tabToolbar && (tabToolbar.style.visibility = "collapse");
const toolbar = document.querySelector(
"#zotero-context-toolbar-extension",
) as XUL.Box;
- toolbar.style.visibility = "collapse";
- toolbar.nextElementSibling?.setAttribute("selectedIndex", "1");
+ if (toolbar) {
+ toolbar.style.visibility = "collapse";
+ toolbar.nextElementSibling?.setAttribute("selectedIndex", "1");
+ }
}
if (addon.data.workspace.tab.active) {
@@ -309,13 +297,12 @@ export function deActivateWorkspaceTab() {
if (!isContextPaneInitialized()) {
return;
}
- (
- document.querySelector("#zotero-tab-toolbar") as XUL.Box
- ).style.removeProperty("visibility");
+ const tabToolbar = document.querySelector("#zotero-tab-toolbar") as XUL.Box;
+ tabToolbar && tabToolbar.style.removeProperty("visibility");
const toolbar = document.querySelector(
"#zotero-context-toolbar-extension",
) as XUL.Box;
- toolbar.style.removeProperty("visibility");
+ toolbar?.style.removeProperty("visibility");
}
function setWorkspaceTabStatus(status: boolean) {
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 08f80bc..dd2942d 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -148,7 +148,7 @@ export const ICONS = {
workspace_outline_open: `
`,
workspace_preview_collapsed: `
`,
workspace_preview_open: `
`,
- workspace_notes_collapsed: `
w`,
+ workspace_notes_collapsed: `
`,
workspace_notes_open: `
`,
readerQuickNote: `
`,
embedLinkContent: `
`,
diff --git a/src/utils/ztoolkit.ts b/src/utils/ztoolkit.ts
index 1587323..04ed9cc 100644
--- a/src/utils/ztoolkit.ts
+++ b/src/utils/ztoolkit.ts
@@ -17,10 +17,10 @@ function initZToolkit(_ztoolkit: ReturnType
) {
const env = __env__;
_ztoolkit.basicOptions.log.prefix = `[${config.addonName}]`;
_ztoolkit.basicOptions.log.disableConsole = env === "production";
- _ztoolkit.UI.basicOptions.ui.enableElementJSONLog = __env__ === "development";
- _ztoolkit.UI.basicOptions.ui.enableElementDOMLog = __env__ === "development";
+ _ztoolkit.UI.basicOptions.ui.enableElementJSONLog = env === "development";
+ _ztoolkit.UI.basicOptions.ui.enableElementDOMLog = env === "development";
_ztoolkit.basicOptions.debug.disableDebugBridgePassword =
- __env__ === "development";
+ env === "development";
_ztoolkit.ProgressWindow.setIconURI(
"default",
`chrome://${config.addonRef}/content/icons/favicon.png`,