[main][582724](UserStory) Remove the version up button in the Panel Browser plugin example

README.md

@@ -11,3 +11,4 @@ provides a useful resource from which you can build your own customizations.
  - [License](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/license_management) management - Retrieve information on seat availability and usage
  - [Move](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/move_shows) shows - Move a sequence from one show to another
  - [Panels](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/panels_media_object) media object - Fetch panels with media objects
+ - [Flix Client Plugins](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/blender) - Example plugins to modify the behaviour of the Flix Client

client_plugins/README.md

@@ -0,0 +1,33 @@
+# Flix Plugin Examples
+
+The following folders contain examples of plugins that modify the behaviour of the Flix Client (version 8.0.0 and above).
+These plugins leverage the [Chrome Extension Support](https://www.electronjs.org/docs/latest/api/extensions) built into Electron.
+The examples here can be taken and added into Flix, either directly or with some modifications.
+
+## Installation
+
+To install these plugins, simply add the plugin files to a new folder in the Flix Client Plugins folder, located at:
+
+- Windows: `%APPDATA%/Flix/plugins`
+- MacOS: `~/Library/Application Support/Flix/plugins`
+
+The Flix Client will automatically load plugins from this folder on start, and will monitor for new plugins being added at run time.
+Loaded plugins can be managed via the Plugins & Extensions management window.
+
+Note: Each extension must be unpacked into its own folder. Flix does not support packaged `.crx` extensions.
+
+## Plugin Development
+
+To build your own plugin, start by defining an [extension manifest file](https://developer.chrome.com/docs/extensions/reference/manifest) in `manifest.json`.
+(Note: Electron only supports a [subset of the manifest file properties](https://www.electronjs.org/docs/latest/api/extensions#supported-manifest-keys).)
+
+To modify the Flix Client DOM, you will need to register a content script that runs on paths matching `file://*`,  due to the way pages are loaded in Electron.
+Since Flix uses the Angular framework, navigation is done via the URL hash.
+When determining which page is active, this should be used instead of the URL path name which will not change.
+
+For more details see the [Chrome Extensions development documentation](https://developer.chrome.com/docs/extensions/get-started).
+However, only a [subset of the extension APIs](https://www.electronjs.org/docs/latest/api/extensions#supported-extensions-apis) are available for use within Flix Plugins.
+
+## Examples
+
+- [Version Up Away](https://github.com/TheFoundryVisionmongers/flix-scripts/tree/main/client_plugins/version_up_away) - Removes the version up button from the panel browser

client_plugins/version_up_away/main.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 The Foundry Visionmongers Ltd.  All Rights Reserved.
+ */
+
+/**
+ * Handles mutation observer events. Filters events down to DOM modification that impact the version up button, and hides it if it is visible.
+ */
+const onDomChange = (mutations) => {
+    for (const mutation of mutations) {
+        //  If not an element added/remove, skip this event.
+        if (mutation.type !== 'childList') {
+            continue;
+        }
+
+        const targetElement = mutation.target;
+        //  If not the version up button, skip this event.
+        if (targetElement.id !== "versionUp") {
+            continue;
+        }
+
+        //  If the version up button is already hidden, stop processing events.
+        if (targetElement.style.display === 'none') {
+            break;
+        }
+
+        //  Otherwise, hide the version up button and stop processing events.
+        console.log("Hiding Version Up button in the Panel Browser.");
+        targetElement.style.display = 'none';
+        break;
+    }
+};
+
+//  Mutation observer is used to monitor changes to DOM elements to hide the version up button when it is added.
+const observer = new MutationObserver(onDomChange);
+
+//  Flag to determine whether DOM changes are currently being observed.
+let observing = false;
+
+//  Navigation API is used to monitor navigating to the panel browser to start watching DOM modifications.
+navigation.addEventListener("navigate", event => {
+    if (event.destination.url.endsWith("/workspace")) {
+        //  When in the panel browser, start watching DOM changes to hide the version up button
+        console.log("Detected Flix workspace, listening for DOM changes.");
+
+        observer.observe(document.body, { subtree: true, childList: true });
+        observing = true;
+
+        //  If the version up button is already present in the DOM, hide it now
+        const versionUpElement = document.querySelector("#versionUp");
+        if (versionUpElement) {
+            console.log("Hiding Version Up button in the Panel Browser.");
+            versionUpElement.style.display = 'none';
+        }
+    } else if (observing) {
+        //  When leaving the panel browser, stop monitoring DOM changes so it doesn't impact performance
+        console.log("Left Flix workspace, stopped listening to DOM changes.");
+
+        observer.disconnect();
+        observing = false;
+    }
+});

client_plugins/version_up_away/manifest.json

@@ -0,0 +1,12 @@
+{
+    "name": "Version Up Away",
+    "version": "1.0",
+    "description": "A simple plugin that removes the 'Version Up' button from the Flix Panel Browser.",
+    "content_scripts": [
+      {
+        "matches": ["file://*"],
+        "js": ["main.js"]
+      }
+    ],
+    "manifest_version": 3
+  }