[general] Customize favicon (#337)

## Describe your changes
This PR allows users to customize favicons with a custom url or
predefined colors (green, orange, pink, purple, red, yellow)

## Issue ticket number and link
#197

## Checklist before requesting a review
- [x] I have read and understand the [Contributions
section](https://github.com/tprouvot/Salesforce-Inspector-reloaded#contributions)
- [x] Target branch is releaseCandidate and not master
- [x] I have performed a self-review of my code
- [x] I ran the [unit
tests](https://github.com/tprouvot/Salesforce-Inspector-reloaded#unit-tests)
and my PR does not break any tests
- [x] I documented the changes I've made on the
[CHANGES.md](https://github.com/tprouvot/Salesforce-Inspector-reloaded/blob/master/CHANGES.md)
and followed actual conventions
- [x] I added a new section on
[how-to.md](https://github.com/tprouvot/Salesforce-Inspector-reloaded/blob/master/docs/how-to.md)
(optional)

<img width="901" alt="image"
src="https://github.com/tprouvot/Salesforce-Inspector-reloaded/assets/35368290/1bbd9cc8-2425-4e79-8a92-a4e954f3d369">

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">