[general] Customize favicon

CHANGES.md

@@ -2,6 +2,7 @@
 
 ## Version 1.23
 
+- Customize extension's favicon [feature 197](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/197)
 - Save default batch size and thread for data import [feature 329](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/329) (feature request by [ritterblau](https://github.com/ritterblau))
 - Load recently viewed records on popup [feature 321](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/321)
 - Open documentation when installing the extension [feature 322](https://github.com/tprouvot/Salesforce-Inspector-reloaded/issues/322)

addon/inspector.js

@@ -33,6 +33,7 @@ export let sfConn = {
         localStorage.setItem(sfHost + "_orgInstance", res.records[0].InstanceName);
       });
     }
+    setFavicon(sfHost);
   },
 
   async rest(url, {logErrors = true, method = "GET", api = "normal", body = undefined, bodyType = "json", responseType = "json", headers = {}, progressHandler = null} = {}) {
@@ -317,3 +318,21 @@ function showExpiredTokenLink() {
   const mainContainer = document.getElementById("mainTabs");
   if (mainContainer) { mainContainer.classList.add("mask"); }
 }
+
+function setFavicon(sfHost){
+  let fav = localStorage.getItem(sfHost + "_customFavicon");
+  if (fav){
+    let link = document.querySelector("link[rel~='icon']");
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "icon";
+      document.head.appendChild(link);
+    }
+    //check if custom favicon from the extension or web
+    if (fav.indexOf("http") == -1){
+      fav = "./images/favicons/" + fav + ".png";
+    }
+    link.href = fav;
+  }
+
+}

addon/options.js

@@ -63,6 +63,7 @@ class OptionsTabSelector extends React.Component {
   constructor(props) {
     super(props);
     this.model = props.model;
+    this.sfHost = this.model.sfHost;
     this.state = {
       selectedTabId: 1
     };
@@ -78,7 +79,8 @@ class OptionsTabSelector extends React.Component {
           {option: Option, props: {type: "toggle", title: "Always open links in a new tab", key: "openLinksInNewTab"}},
           {option: Option, props: {type: "toggle", title: "Open Permission Set / Permission Set Group summary from shortcuts", key: "enablePermSetSummary"}},
           {option: Option, props: {type: "toggle", title: "Search metadata from Shortcut tab", key: "metadataShortcutSearch"}},
-          {option: Option, props: {type: "toggle", title: "Disable query input autofocus", key: "disableQueryInputAutoFocus"}}
+          {option: Option, props: {type: "toggle", title: "Disable query input autofocus", key: "disableQueryInputAutoFocus"}},
+          {option: Option, props: {type: "text", title: "Custom favicon (org specific)", key: this.sfHost + "_customFavicon", placeholder: "Available values : green, orange, pink, purple, red, yellow"}},
         ]
       },
       {

docs/how-to.md

@@ -204,5 +204,16 @@ You can update the debug level (configuration is per organization) and duration
 ## Display query performance in Data Export
 
 To enable performance metrics for queries on the data export page, open the Options screen and select the Data Export tab,
-then set "Display Query Execution Time" to enabled.  Total time for the query to process and, when applicable, batch stats (Total Number of Batches, Min/Max/Avg Batch Time)
-are displayed.
+then set "Display Query Execution Time" to enabled. Total time for the query to process and, when applicable, batch stats (Total Number of Batches, Min/Max/Avg Batch Time)
+are displayed.
+
+## Customize extension's favicon
+
+From the option page, you can customize the default favicon by:
+
+- a predefined color among those values (green, orange, pink, purple, red, yellow)
+- a custom favicon url (ie "https://stackoverflow.com/favicon.ico")
+
+The customization is linked to the org, it means you can have different colors for DEV and UAT env for example.
+
+<img width="901" alt="image" src="https://github.com/tprouvot/Salesforce-Inspector-reloaded/assets/35368290/1bbd9cc8-2425-4e79-8a92-a4e954f3d369">