Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Next revisionBoth sides next revision
dev:zotero_7_for_developers [2024/03/30 09:57] – [Dev Builds] dstillmandev:zotero_7_for_developers [2024/04/29 23:06] – [Zotero Platform] xiangyu
Line 30: Line 30:
 ===== Using the Firefox Developer Tools ===== ===== Using the Firefox Developer Tools =====
  
-Since Zotero 7 is based on Firefox 102, it's compatible with the [[https://ftp.mozilla.org/pub/firefox/releases/102.15.1esr/|Firefox 102 ESR]] Developer Tools (rather than the Firefox 60 DevTools as before).+Since Zotero 7 is based on Firefox 115, it's compatible with the [[https://ftp.mozilla.org/pub/firefox/releases/115.9.1esr/|Firefox 115 ESR]] Developer Tools (rather than the Firefox 60 DevTools as before).
  
 To start a Zotero dev build with the DevTools server, pass the ''-debugger'' flag on the command line: To start a Zotero dev build with the DevTools server, pass the ''-debugger'' flag on the command line:
Line 38: Line 38:
 </code> </code>
  
-In Firefox 102 ESR, you can then go to about:debugging, add ''localhost:6100'' as a network location, and connect to Zotero. (If you haven't yet, you'll first need to enable the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" options in the settings of Firefox's Web Developer Tools.)+In Firefox 115 ESR, you can then go to about:debugging, add ''localhost:6100'' as a network location, and connect to Zotero. (If you haven't yet, you'll first need to enable the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" options in the settings of Firefox's Web Developer Tools.)
  
-You should use a separate Firefox profile for 102 ESR and disable automatic updates to prevent Firefox from being automatically updated to an incompatible version.+You should use a separate Firefox profile for 115 ESR and disable automatic updates to prevent Firefox from being automatically updated to an incompatible version.
 ===== Plugin Changes ===== ===== Plugin Changes =====
  
Line 535: Line 535:
 A new API in Zotero 7 allows plugins to create custom sections. Plugins should use this official API rather than manually injecting content into the item pane. A new API in Zotero 7 allows plugins to create custom sections. Plugins should use this official API rather than manually injecting content into the item pane.
  
-The example below shows how to register a custom section with the item details (e.g., ''id'' and ''editable'') displayed. ''paneID'', ''pluginID'', ''head'', and ''sidenav'' are required.+The example below shows how to register a custom section with the item details (e.g., ''id'' and ''editable'') displayed. ''paneID'', ''pluginID'', ''header'', and ''sidenav'' are required.
  
 <code javascript> <code javascript>
 const registeredID = Zotero.ItemPaneManager.registerSection({ const registeredID = Zotero.ItemPaneManager.registerSection({
  paneID: "custom-section-example",  paneID: "custom-section-example",
- pluginID: "zotero@zotero.org", + pluginID: "example@example.com", 
- head: { + header: { 
- l10nID: "reader-use-dark-mode-for-content", + l10nID: "example-item-pane-header", 
- icon: "chrome://zotero/skin/16/universal/book.svg",+ icon: rootURI + "icons/16/universal/book.svg",
  },  },
  sidenav: {  sidenav: {
- l10nID: "zotero-toolbar-tabs-menu", + l10nID: "example-item-pane-header", 
- icon: "chrome://zotero/skin/20/universal/save.svg",+ icon: rootURI + "icons/20/universal/book.svg",
  },  },
  onRender: ({ body, item, editable, tabType }) => {  onRender: ({ body, item, editable, tabType }) => {
Line 560: Line 560:
 </code> </code>
  
-More advanced options are documented in the [[https://github.com/zotero/zotero/blob/fx115/chrome/content/zotero/xpcom/itemPaneManager.js|source code]].+More advanced options are documented in the [[https://github.com/zotero/zotero/blob/main/chrome/content/zotero/xpcom/itemPaneManager.js|source code]].
  
 When the plugin is disabled or uninstalled, custom sections with the corresponding ''pluginID'' will be automatically removed. If you want to unregister a custom column manually, you can use ''unregisterSection()'': When the plugin is disabled or uninstalled, custom sections with the corresponding ''pluginID'' will be automatically removed. If you want to unregister a custom column manually, you can use ''unregisterSection()'':
Line 678: Line 678:
 === Firefox 102 → Firefox 115 === === Firefox 102 → Firefox 115 ===
  
-  * ''OS.File'', ''OS.Path'', and ''OS.Constants.Path'' have been removed in favor of [[https://firefox-source-docs.mozilla.org/dom/ioutils_migration.html|IOUtils]] and [[https://searchfox.org/mozilla-esr115/source/dom/chrome-webidl/PathUtils.webidl|PathUtils]]. To help developers get their code running on 115 as quickly as possible, we've created [[https://github.com/zotero/zotero/blob/main/chrome/content/zotero/osfile.mjs|shims]] for most functions, which you can use by adding this line to your files:\\ ''%%var { OS } = ChromeUtils.importESModule("chrome://zotero/content/osfile.mjs");%%''\\ You should update your code to use ''IOUtils'' and ''PathUtils'' as soon as possible rather than relying on these shims long-term. ([[https://github.com/zotero/zotero/commit/920461cd9de098b230c9298015e6c9563123f558|examples]])+  * ''OS.File'', ''OS.Path'', and ''OS.Constants.Path'' have been removed in favor of [[https://firefox-source-docs.mozilla.org/dom/ioutils_migration.html|IOUtils]] and [[https://searchfox.org/mozilla-esr115/source/dom/chrome-webidl/PathUtils.webidl|PathUtils]] (which were already available in Firefox 102). To help developers get their code running on 115 as quickly as possible, we've created [[https://github.com/zotero/zotero/blob/main/chrome/content/zotero/osfile.mjs|shims]] for most functions, which you can use by adding this line to your files:\\ ''%%var { OS } = ChromeUtils.importESModule("chrome://zotero/content/osfile.mjs");%%''\\ You should update your code to use ''IOUtils'' and ''PathUtils'' as soon as possible rather than relying on these shims long-term. ([[https://github.com/zotero/zotero/commit/920461cd9de098b230c9298015e6c9563123f558|examples]])
   * UI now uses modern flexbox instead of XUL layout, so Mozilla CSS properties need to be replaced with standard properties (e.g., ''-moz-box-flex: 1'' → ''flex: 1'') and there are various layout differences ([[https://github.com/zotero/zotero/commit/de42dce16ed155b5d180587d965f4745093353ed|example]]; [[https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ|details]])   * UI now uses modern flexbox instead of XUL layout, so Mozilla CSS properties need to be replaced with standard properties (e.g., ''-moz-box-flex: 1'' → ''flex: 1'') and there are various layout differences ([[https://github.com/zotero/zotero/commit/de42dce16ed155b5d180587d965f4745093353ed|example]]; [[https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ|details]])
   * Most Mozilla JSM modules have been renamed to ''.sys.mjs'' and must be imported with ''ChromeUtils.importESModule()'' or ''ChromeUtils.defineESModuleGetters()''   * Most Mozilla JSM modules have been renamed to ''.sys.mjs'' and must be imported with ''ChromeUtils.importESModule()'' or ''ChromeUtils.defineESModuleGetters()''
   * ''nsIPromptService'' → ''Services.prompt'' ([[https://github.com/zotero/zotero/commit/b6a597a7f920e98b22ff369bcadea8d7dc1f09e6|example]])   * ''nsIPromptService'' → ''Services.prompt'' ([[https://github.com/zotero/zotero/commit/b6a597a7f920e98b22ff369bcadea8d7dc1f09e6|example]])
   * ''loadURI()'' signature change ([[https://github.com/zotero/zotero/commit/e76c6c6a1a83df3cc9e04129d1c785c28ab57ae4|example]])   * ''loadURI()'' signature change ([[https://github.com/zotero/zotero/commit/e76c6c6a1a83df3cc9e04129d1c785c28ab57ae4|example]])
 +  * ''width'' and ''height'' attributes are no longer recognized on XUL elements (''window'', ''wizard'', ''box'', etc.). Can be replaced with CSS rules (''min-width'', ''width'', ''max-width'', etc.). ([[https://github.com/zotero/zotero/commit/db499fdf2bd51489eaeea1f93f085816f65d5292|example]])
  
 Additionally, while a Zotero-specific change, the import line for ''FilePicker'' has changed for Firefox 115:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%'' Additionally, while a Zotero-specific change, the import line for ''FilePicker'' has changed for Firefox 115:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%''
Line 692: Line 693:
   * ''Zotero.Browser'' → ''HiddenBrowser.jsm'' — post on dev list for further discussion if you're currently relying on a hidden browser ([[https://github.com/zotero/zotero/commit/6a2949be8a87aebe5ddadd881e4ea22d8b5a8f60|details]])   * ''Zotero.Browser'' → ''HiddenBrowser.jsm'' — post on dev list for further discussion if you're currently relying on a hidden browser ([[https://github.com/zotero/zotero/commit/6a2949be8a87aebe5ddadd881e4ea22d8b5a8f60|details]])
   * The import line for ''FilePicker'' has changed:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%''   * The import line for ''FilePicker'' has changed:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%''
 +  * In an upcoming beta, most PNG icons will be removed or replaced by their SVG versions. You can search for the new icons in ''chrome/skin/default/zotero''.
dev/zotero_7_for_developers.txt · Last modified: 2024/05/23 08:37 by dstillman