Improving menu loading/display, especially for Zotero 6

bootstrap.js

@@ -151,31 +151,21 @@ function registerchrome(rootURI){
 }
 
 function initPreferences(rootURI) {
-
- /* already done in chrome.manifest
- Keep for the day it becomes obsolete
- registerchrome(rootURI);
- */
-
- if(Zotero.platformMajorVersion < 102) {
- /*
- Try to implement native preference in Zotero 6
- */
- }
- else
- {
+ if(Zotero.platformMajorVersion >= 102) {
  registerchrome(rootURI);
  Zotero.PreferencePanes.register({
  pluginID: '[email protected]',
  id: '[email protected]',
  stylesheets: [
  rootURI + 'content/settings/preferences.css',
+ rootURI + 'content/settings/preferences7.css',
  rootURI + 'content/lib/fontawesome/6.1.1/css/all.min.css',
  ],
  src: rootURI + 'content/settings/preferences.xhtml',
  scripts: [
  rootURI + 'content/settings/zntable.js',
  rootURI + 'content/settings/preferences.js',
+ rootURI + 'content/settings/preferences7.js',
  ],
  image: rootURI+"/content/images/zenotes-settings.png"
  });
@@ -214,6 +204,7 @@ async function startup({ id, version, resourceURI, rootURI = resourceURI.spec })
  // setDefaultPrefs(rootURI);
  }
 
+ Services.scriptloader.loadSubScript(rootURI + 'core/settings.js');
  Services.scriptloader.loadSubScript(rootURI + 'core/zenotes.js');
  Services.scriptloader.loadSubScript(rootURI + 'core/prefs.js');
  Services.scriptloader.loadSubScript(rootURI + 'core/database.js');
@@ -252,10 +243,12 @@ async function startup({ id, version, resourceURI, rootURI = resourceURI.spec })
  ZeNotes.Languages = Languages;
 
  ZeNotes.Data = Data;
+ ZeNotes.Settings = Settings;
 
 
  ZeNotes.Format = Format;
  Annotations.initmenu();
+ Settings.inject();
  await ZeNotes.main();
 }
 

chrome.manifest

@@ -1,2 +1,2 @@
 locale Ze-Notes en-US chrome/locale/en-US/
-content Ze-Notes content/
+content Ze-Notes content/

content/settings/display.xhtml

@@ -1,10 +1,9 @@
 <div xmlns="http:https://www.w3.org/1999/xhtml">
  <table id="display">
- <!-- <tr><td><label for="zn-add-to-menu">Add ZeNotes to main menu</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'add-to-menu');" id="zn-add-to-menu"/></td><td></td></tr> -->
- <tr><td><label for="zn-vertical-table">Vertical table</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'vertical-table');" id="zn-vertical-table"/></td><td></td></tr>
- <tr><td>Highlight opacity</td><td><input type="range" min="0" max="255" value="255" id="zn-bg-slider" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'bg-opacity');" oninput="Zotero_Preferences.ZeNotes.updateopacity(event);"/></td><td class='highlight' style='background-color: #FFFF00; height: 1.1em;' id="zn-bg-sample">Lorem ipsum</td></tr>
- <tr><td>Header size</td><td><input id="zn-header-size" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'header-size');" oninput="Zotero_Preferences.ZeNotes.updatecolumnwidth(event);"/></td><td><input id="zn-header-size-val" /></td></tr>
- <tr><td>Column width (for vertical)</td><td><input id="zn-column-width" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'column-width');" oninput="Zotero_Preferences.ZeNotes.updatedisplay(event, 'zn-column-width-val');"/></td><td><input id="zn-column-width-val" /></td></tr>
+ <tr><td><label style="padding:0;margin:0;" for="zn-vertical-table">Vertical table</label></td><td colspan="2"><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'vertical-table');" id="zn-vertical-table"/></td></tr>
+ <tr><td>Highlight opacity</td><td><input type="range" min="0" max="255" value="255" id="zn-bg-opacity" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'bg-opacity');"/></td><td class='highlight' style='background-color: #FFFF00; height: 1.1em;' id="zn-bg-sample">Lorem ipsum</td></tr>
+ <tr><td>Header size</td><td><input id="zn-header-size" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'header-size');" oninput="document.getElementById('zn-header-size-val').value=this.value;"/></td><td><input id="zn-header-size-val" /></td></tr>
+ <tr><td>Column width (for vertical)</td><td><input id="zn-column-width" type="range" value="100" min="20" max="1500" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'column-width');" oninput="document.getElementById('zn-column-width-val').value=this.value;"/></td><td><input id="zn-column-width-val" /></td></tr>
  <tr><td>Filter html (replace)</td><td><textarea id="zn-html-filter" type="text" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'html-filter');" style="width:100%; height: 2em;" placeholder="Comma separeted CSS selectors. Also accepts JSON: {selectors: replacement, ...}"></textarea></td><td><input id="zn-html-filter-replacement" type="text" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'html-filter-replacement');" style="width:100%;" placeholder="Replace with"/></td></tr>
  </table>
 </div>

content/settings/generative-ai.xhtml

@@ -0,0 +1,27 @@
+<div xmlns="http:https://www.w3.org/1999/xhtml" id="group-generative-ai-api">
+ <table width="100%">
+ <tr>
+ <td>Bard API key</td><td><input id="zn-bard-api-key" type="password" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'bard-api-key', 'encrypt');" style="width:100%;" placeholder="Enter your Bard API key"/></td><td style="width:1.1em;"> </td>
+ <td>Model</td><td> <select id="zn-bard-model" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'bard-model');" style="width:100%;" placeholder="Model">
+ <option value="">Choose model</option>
+ <option value="gemini-pro">Gemini Pro</option>
+ <option value="text-bison-001">Bison 1</option>
+ </select></td>
+ </tr>
+ <tr>
+ <td>OpenAi API key</td>
+ <td><input id="zn-openai-api-key" type="password" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'openai-api-key', 'encrypt');" style="width:100%;" placeholder="Enter your OpenAi API key"/></td>
+ <td style="width:1.1em;"> </td>
+ <td>Model</td>
+ <td> <select id="zn-openai-model" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'openai-model');" oncommand="Zotero_Preferences.ZeNotes.setpreference(event, 'openai-model');" style="width:100%;" placeholder="Model">
+ <option value="">Choose model</option>
+ <option value="gpt-3.5-turbo">GPT 3.5 Turbo</option>
+ <option value="gpt-4">GPT 4</option>
+ </select></td>
+ </tr>
+ <tr>
+ <td>OpenAi max token</td>
+ <td colspan="4"><input style="width:100%;" id="zn-openai-max-token" type="text" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'openai-max-token');" placeholder="Enter max number of token used"/></td>
+ </tr>
+ </table>
+</div>

content/settings/load-save-tags.xhtml

@@ -1,4 +1,5 @@
-<menupopup>
-<xul:menuitem>A</xul:menuitem>
-<menuitem>B</menuitem>
-</menupopup>
+<div xmlns="http:https://www.w3.org/1999/xhtml">
+<select id="zn-load-settings" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'load-settings');">
+</select>
+<button onclick="Zotero_Preferences.ZeNotes.importpref(event);">Import preferences</button>
+</div>

content/settings/manage-tags.xhtml

@@ -1,4 +1,4 @@
-<div id="zn-pref-tag" class="zn-table-holder" xmlns="http:https://www.w3.org/1999/xhtml">
+<div id="zn-pref-tag-manage" class="zn-table-holder" xmlns="http:https://www.w3.org/1999/xhtml">
  <table id="table-manage-tags" class="zn-type-table">
  <thead>
  <tr>

content/settings/performance.xhtml

@@ -1,5 +1,6 @@
 <div xmlns="http:https://www.w3.org/1999/xhtml">
  <table id="peformance">
- <tr><td><label for="zn-reload-on-change">Reload on change</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'load-on-change');" id="zn-reload-on-change"/></td><td></td></tr>
+ <tr><td><label style="padding:0;margin:0;" for="zn-reload-on-change">Reload on change</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'load-on-change');" id="zn-reload-on-change"/></td></tr>
+ <tr><td><label style="padding:0;margin:0;" for="zn-remove-menu">Move menu to Tools &gt; ZeNotes</label></td><td><input type="checkbox" onchange="Zotero_Preferences.ZeNotes.setpreference(event, 'remove-menu');" id="zn-remove-menu"/></td></tr>
  </table>
 </div>

content/settings/preferences.css

@@ -1,4 +1,4 @@
-* {
+#zotero-prefpane-zenotes-overlay > * {
  font-size: 1.01em;
  box-sizing: border-box;
 }
@@ -43,9 +43,8 @@
 }
 
 .zn-legend {
- font-size: 1.3em;
- color: red;
-
+ font-size: 1.3em!important;
+ color: red!important;
 }
 
 .zn-include {
@@ -77,4 +76,39 @@ fieldset {
 #table-manage-tags td, 
 #table-manage-tags tr {
  max-width: 15em;
+}
+
+menulist {
+ background-color: white;
+}
+
+.zn-buttons-holder button{
+ color: red;
+}
+
+#group-ai-api input, #group-ai-api select, #group-ai-api menulist {
+ width: 90%;
+}
+
+#group-ai-api p{
+ margin-bottom: 0.5em;
+}
+
+#ai-prompts tr td:nth-child(1){
+ white-space: nowrap;
+ width: 1%;
+}
+
+#ai-prompts tr td:nth-child(2) {
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+}
+
+#ai-prompts textarea {
+ padding-left: 0.3em;
+ padding-right: 0.3em;
+}
+
+#ai-prompts tr td{
+ border-bottom: solid 1px;
 }