From a8c30362a10e2e5a4757035be2015d9c695a0af4 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Wed, 26 Apr 2023 15:15:49 +0200
Subject: [PATCH]  Remove shadow root from PublicationsLicenseInfo #3082

 * Fix legacy css path
 * Rename license-info.scss -> publicationsLicenseInfo.scss to match element name
---
 .../elements/publicationsLicenseInfo.js       | 12 ++---
 .../content/zotero/publicationsDialog.xhtml   |  2 +-
 scss/_zotero.scss                             |  1 +
 scss/elements/_publicationsLicenseInfo.scss   | 43 ++++++++++++++++
 scss/elements/license-info.scss               | 50 -------------------
 5 files changed, 51 insertions(+), 57 deletions(-)
 create mode 100644 scss/elements/_publicationsLicenseInfo.scss
 delete mode 100644 scss/elements/license-info.scss

diff --git a/chrome/content/zotero/elements/publicationsLicenseInfo.js b/chrome/content/zotero/elements/publicationsLicenseInfo.js
index 2a325ab871..1dd2d3908f 100644
--- a/chrome/content/zotero/elements/publicationsLicenseInfo.js
+++ b/chrome/content/zotero/elements/publicationsLicenseInfo.js
@@ -123,22 +123,22 @@
 		}
 
 		get licenseName() {
-			return this.shadowRoot.querySelector('.license-name').getAttribute('label')
-				? this.shadowRoot.querySelector('.license-name').getAttribute('label')
-				: this.shadowRoot.querySelector('.license-name').textContent;
+			return this.querySelector('.license-name').getAttribute('label')
+				? this.querySelector('.license-name').getAttribute('label')
+				: this.querySelector('.license-name').textContent;
 		}
 
 		async init() {
 			this.license = this.getAttribute('license');
-			this.shadowRoot.getElementById('license-info').addEventListener('click', this.onURLInteract.bind(this));
-			this.shadowRoot.getElementById('license-info').addEventListener('keydown', this.onURLInteract.bind(this));
+			this.querySelector('#license-info').addEventListener('click', this.onURLInteract.bind(this));
+			this.querySelector('#license-info').addEventListener('keydown', this.onURLInteract.bind(this));
 		}
 
 		update() {
 			const { url, name, img, id } = getLicenseData(this.license);
 			const licenseInfoEl = makeLicenseInfo(url, name, img, id);
 			const licenseMoreEl = makeLicenseMoreInfo(this.license);
-			this.shadowRoot.getElementById('license-info').replaceChildren(licenseInfoEl, licenseMoreEl);
+			this.querySelector('#license-info').replaceChildren(licenseInfoEl, licenseMoreEl);
 		}
 
 		onURLInteract(ev) {
diff --git a/chrome/content/zotero/publicationsDialog.xhtml b/chrome/content/zotero/publicationsDialog.xhtml
index 23e383efd3..eb7110cdd6 100644
--- a/chrome/content/zotero/publicationsDialog.xhtml
+++ b/chrome/content/zotero/publicationsDialog.xhtml
@@ -26,7 +26,7 @@
 <!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
+<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 		xmlns:html="http://www.w3.org/1999/xhtml"
diff --git a/scss/_zotero.scss b/scss/_zotero.scss
index edf45dcc81..c41156dbf4 100644
--- a/scss/_zotero.scss
+++ b/scss/_zotero.scss
@@ -55,6 +55,7 @@
 @import "elements/itemBox";
 @import "elements/noteEditor";
 @import "elements/notesBox";
+@import "elements/publicationsLicenseInfo";
 @import "elements/quickSearchTextbox";
 @import "elements/richlistCheckbox";
 @import "elements/styleConfigurator";
diff --git a/scss/elements/_publicationsLicenseInfo.scss b/scss/elements/_publicationsLicenseInfo.scss
new file mode 100644
index 0000000000..9d868eb7c5
--- /dev/null
+++ b/scss/elements/_publicationsLicenseInfo.scss
@@ -0,0 +1,43 @@
+publications-license-info {
+    display: block;
+    width: 100%;
+
+    .license-info {
+        display: flex;
+        padding: var(--license-info-padding, 0 20px);
+        margin: var(--license-info-margin, 1em 0 0 0);
+
+        .license-icon {
+            flex: 0 1 auto;
+
+            >img {
+                max-width: var(--license-icon-max-width, 88px);
+            }
+        }
+
+        .license-name {
+            margin-left: var(--license-info-name-margin-left, 12px);
+            flex: 1 1 auto;
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .license-more-info {
+        margin: var(--license-more-info-margin, 1.5em 0 0 0);
+        font-size: var(--license-more-info-font-size, 11px);
+    }
+
+    a {
+        display: inline;
+        color: var(--license-info-link-color, -moz-nativehyperlinktext);
+        text-decoration: var(--license-info-link-decoration, none);
+
+        &:hover,
+        &:active,
+        &:focus {
+            outline: none;
+            text-decoration: var(--license-info-link-decoration-hover, $link-hover-decoration);
+        }
+    }
+}
\ No newline at end of file
diff --git a/scss/elements/license-info.scss b/scss/elements/license-info.scss
deleted file mode 100644
index 6ec74e099a..0000000000
--- a/scss/elements/license-info.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../abstracts/variables";
-@import "../abstracts/functions";
-@import "../abstracts/mixins";
-@import "../abstracts/placeholders";
-@import "../abstracts/utilities";
-@import "../themes/light";
-
-:host {
-    display: block;
-    width: 100%;
-}
-
-.license-info {
-    display: flex;
-    padding: var(--license-info-padding, 0 20px);
-    margin: var(--license-info-margin, 1em 0 0 0);
-
-    .license-icon {
-        flex: 0 1 auto;
-
-        > img {
-            max-width: var(--license-icon-max-width, 88px);
-        }
-    }
-
-    .license-name {
-        margin-left: var(--license-info-name-margin-left, 12px);
-        flex: 1 1 auto;
-        display: flex;
-        align-items: center;
-    }
-}
-
-.license-more-info {
-    margin: var(--license-more-info-margin, 1.5em 0 0 0);
-    font-size: var(--license-more-info-font-size, 11px);
-}
-
-a {
-    display: inline;
-    color: var(--license-info-link-color, -moz-nativehyperlinktext);
-    text-decoration: var(--license-info-link-decoration, none);
-
-    &:hover,
-    &:active,
-    &:focus {
-        outline: none;
-        text-decoration: var(--license-info-link-decoration-hover, $link-hover-decoration);
-    }
-}
\ No newline at end of file