From 95fed02660104d65d0ac1dd5dd9a2b07e73c8a8e Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 16 Nov 2022 09:33:09 +0100
Subject: [PATCH 01/12] dev sync

---
 .gitignore                              |   1 +
 .vscode/settings.json                   |  52 +-
 PegaDevTools.code-workspace             |   9 +-
 README.md                               |   2 +-
 agilestudio/agilestudio.js              |   2 +-
 background.js                           | 242 +++++++--
 devstudio/datapage.js                   |  31 +-
 devstudio/devstudio.css                 |  12 +-
 devstudio/devstudio.js                  |  63 +--
 devstudio/devstudio_activity.js         |   4 +-
 devstudio/devstudio_data.js             |   1 +
 devstudio/devstudio_datatransform.js    |   9 +-
 devstudio/devstudio_flow.js             |   8 +-
 devstudio/devstudio_function.js         |   7 +-
 devstudio/devstudio_paragraph.js        |  96 ++--
 devstudio/devstudio_report.js           |   2 +-
 devstudio/devstudio_rule.js             |   7 +-
 devstudio/devstudio_ruleform_popup.js   |   2 +
 devstudio/devstudio_ruleset.js          |   1 +
 devstudio/devstudio_tabs.js             | 104 ++++
 devstudio/logfile.js                    |   4 +-
 devstudio/refactorClass.js              |   6 +
 js/copyDPcall.js                        |   6 +-
 js/injectFlowType.js                    |   1 -
 js/makeRuleNamesLonger.js               |  42 +-
 js/mouseScrollTabs.js                   |  11 +
 jsconfig.json                           |   7 +
 manifest.json                           |  43 +-
 resources/contextmenu.min.css           |   1 -
 resources/contextmenu.min.js            |   1 -
 resources/ctxmenu.min.js                |   2 +
 resources/favicon.png                   | Bin 0 -> 3975 bytes
 resources/registerWithServiceWorker.js  |   1 +
 resources/shared.css                    |  64 ++-
 resources/shared.js                     | 508 +++++++++----------
 settings.html                           |  21 +
 settings.js                             |  41 +-
 tracer/tracerNameContextMenu.html       |   0
 tracer/tracer_PegaRulesetSelection.html |  23 +
 tracer/tracer_button.html               |  12 +
 tracer/tracer_event.css                 |   5 +
 tracer/tracer_event.js                  | 175 ++++++-
 tracer/tracer_menuRow.js                | 628 ++++++++++++++----------
 tracer/tracer_options.js                |  25 +-
 tracer/tracer_page.js                   |  69 +--
 45 files changed, 1547 insertions(+), 804 deletions(-)
 create mode 100644 devstudio/devstudio_tabs.js
 create mode 100644 devstudio/refactorClass.js
 create mode 100644 js/mouseScrollTabs.js
 create mode 100644 jsconfig.json
 delete mode 100644 resources/contextmenu.min.css
 delete mode 100644 resources/contextmenu.min.js
 create mode 100644 resources/ctxmenu.min.js
 create mode 100644 resources/favicon.png
 create mode 100644 resources/registerWithServiceWorker.js
 create mode 100644 tracer/tracerNameContextMenu.html
 create mode 100644 tracer/tracer_PegaRulesetSelection.html

diff --git a/.gitignore b/.gitignore
index 01e2c181..79ea7099 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ resources/codemirror/css.html
 resources/codemirror/htmlmixed.html
 resources/codemirror/javascript.html
 resources/codemirror/jsxjava.html
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0a156472..140a58b2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,56 @@
 {
     "cSpell.ignoreWords": [
         "filtertable",
-        "openlanding"
+        "openlanding",
+        "Recordkey"
+    ],
+    "cSpell.words": [
+        "agilestudio",
+        "bgcolor",
+        "closetag",
+        "Cntr",
+        "codemirror",
+        "contextmenu",
+        "ctxmenu",
+        "datapage",
+        "datatransform",
+        "deploymentmanager",
+        "devstudio",
+        "endregion",
+        "foldcode",
+        "foldgutter",
+        "fullscreen",
+        "htmlmixed",
+        "Huebee",
+        "inanchor",
+        "logfile",
+        "Marcin",
+        "matchtags",
+        "OOTB",
+        "origprocess",
+        "pagesort",
+		"Pega",        
+        "pegacloud",
+        "prweb",
+        "rightborder",
+        "ruleform",
+		"ruleset",        
+        "rulesets",
+        "rulespecific",
+        "Subflow",
+        "TABANCHOR",
+        "TABSPAN",
+        "tabtitle",
+        "threadname",
+        "tracertop",
+        "uicolors",
+        "valign",
+        
+        "bsimplelayout",
+		"editaction",
+		"Leśniak",
+
+
+		"Tinycon"
     ]
 }
\ No newline at end of file
diff --git a/PegaDevTools.code-workspace b/PegaDevTools.code-workspace
index a8cb3c66..e5329a95 100644
--- a/PegaDevTools.code-workspace
+++ b/PegaDevTools.code-workspace
@@ -9,12 +9,15 @@
 			"*.yaml": "home-assistant"
 		},
 		"cSpell.words": [
+			"agilestudio",
 			"closetag",
 			"cntr",
 			"codemirror",
 			"Copypz",
+			"copypzinskey",
 			"datapage",
 			"devstudio",
+			"favico",
 			"foldcode",
 			"foldgutter",
 			"fullscreen",
@@ -24,16 +27,20 @@
 			"inanchor",
 			"lesniak",
 			"marcin",
+			"Marcin",
 			"matchtags",
 			"nocopy",
 			"ootb",
+			"OOTB",
 			"pagesort",
 			"prweb",
+			"pzInskey",
 			"Recordkey",
 			"str",
 			"t",
 			"tabanchor",
-			"tooltiptext"
+			"tooltiptext",
+			"tracertop"
 		],
 		"favorites.resources": [
 			{
diff --git a/README.md b/README.md
index 1680ac43..5d218b28 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ Tracer feature to navigate to first Error and Message is based on Piotr Olejnicz
 ### Third-party libraries (MIT license)
 - [arrive.js](https://github.com/uzairfarooq/arrive)
 - [CodeMirror](https://codemirror.net/)
-- [ContextmenuJS](https://github.com/m-thalmann/contextmenujs)
+- [ctxmenu.js](https://github.com/nkappler/ctxmenu)
 - [Huebee](https://huebee.buzz)
 - [jQuery](https://jquery.com/)
 - [jQuery.FilterTable](https://github.com/sunnywalker/jQuery.FilterTable)
diff --git a/agilestudio/agilestudio.js b/agilestudio/agilestudio.js
index ba3e0159..5814583f 100644
--- a/agilestudio/agilestudio.js
+++ b/agilestudio/agilestudio.js
@@ -1,5 +1,5 @@
 if(window.location.href.includes("agilestudio")) {
-
+    PDT.setScriptsApplied();
     console.log("agilestudio.js");
 
     if (PDT.isAgilestudioEnabled()) {
diff --git a/background.js b/background.js
index b1e1daeb..a702da35 100644
--- a/background.js
+++ b/background.js
@@ -1,4 +1,20 @@
-var browser = (browser)? browser : chrome;
+if (typeof browser === "undefined") {
+    var browser = chrome;
+}
+
+
+
+//TODO: modularize
+// try {
+// 	importScripts('/path/file.js', '/path2/file2.js' /*, and so on */);
+//   } catch (e) {
+// 	console.error(e);
+//}
+// chrome.webNavigation.onCompleted.addListener(info => {
+// 	if (changeInfo.status === "complete") {
+// 	  // ...
+// 	}
+//   });
 
 function injectScript(injectedScript, tabId, frameId) {
 	browser.scripting.executeScript({
@@ -17,20 +33,49 @@ function appendScript(appendedScript, tabId, frameId) {
 }
 
 var tracerIsRunningAppended = false;
+
 // handle content script messages
-browser.runtime.onMessage.addListener(async  (request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
 	console.debug(request);
-	if (request.purpose == "getFrameId")
+	if (request.purpose == "getSettings") {
+		sendResponse(getSettings());
+	}
+	else if (request.purpose == "reloadSettings") {
+		initSettings();
+	}	
+	else if (request.purpose == "getFrameId")
 		sendResponse({ frameId: sender.frameId });
-	else if (request.purpose == "paragraphRule") {
-		injectScriptsToIframe(sender.tab.id, sender.frameId, paragraphScriptList);
-		sendResponse("ok ");
-	} else if (request.purpose == "appendScript") {
+	// else if (request.purpose == "paragraphRule") {
+	// 	injectScriptsToIframe(sender.tab.id, sender.frameId, paragraphScriptList);
+	// 	sendResponse("ok ");
+	//} 
+	else if (request.purpose == "appendScript") {
 		appendScript(request.appendedScript, sender.tab.id, sender.frameId);
-		sendResponse("appending to tab " + sender.tab.id + " frame " + sender.frameId);
+		sendResponse("appending to tab " + sender.tab.id + " frame " + sender.frameId);		
+	} else if (request.purpose == "reloadContentScripts") {
+		if(loadedFrames.has(sender.tab.id + "-" + sender.frameId)) {
+			reloadContentScripts(sender.tab.id, sender.frameId, loadedFrames.get(sender.tab.id + "-" + sender.frameId));
+			sendResponse("reloading content scripts " + sender.tab.id + " frame " + sender.frameId);
+		} else {
+			console.log(sender.tab.id + "-" + sender.frameId + " not found in loadedFrames");
+		}
 	} else if (request.purpose == "injectScript") {
 		injectScript(request.injectedScript, sender.tab.id, sender.frameId);
 		sendResponse("injecting " + request.injectedScript + " to tab " + sender.tab.id + " frame " + sender.frameId);
+	} else if (request.purpose == "loaded") {
+		if(request.url != "about:blank" && !loadedFrames.has(sender.tab.id + "-" + sender.frameId)) {
+			loadedFrames.set(sender.tab.id + "-" + sender.frameId, request.url);
+			console.log("Registered " + sender.tab.id + "-" + sender.frameId + ": " + request.url);
+		} 
+		// else {
+		// 	if(loadedFrames.has(sender.tab.id + "-" + sender.frameId) && (request.url.includes("DeleteCheckOut") || request.url.includes("ReloadHarness"))) {
+		// 		reloadContentScripts(sender.tab.id, sender.frameId, loadedFrames.get(sender.tab.id + "-" + sender.frameId));
+		// 		sendResponse("Reloading content scripts tab " + sender.tab.id + " frame " + sender.frameId);
+		// 	} else {
+		// 		console.log(sender.tab.id + "-" + sender.frameId + " not found in loadedFrames");
+		// 	}
+		// }
+
 	} else if (request.purpose == "tracerState" && arrDevTabs.get(sender.origin)) {
 	//TODO: try Long-lived connections https://developer.chrome.com/docs/extensions/mv3/messaging/#connect 
 
@@ -72,7 +117,7 @@ function tracerIsRunning() {
 	let tracerIndicator	= document.querySelector("div#PDTTracerIndicator");
 	document.querySelector("button#PDTDevTracerPlayPause").addEventListener("click", function(event) { browser.runtime.sendMessage({ purpose: "tracerStop"}) });
 	
-	let titleTimerId = setInterval(function () {
+	let _titleTimerId = setInterval(function () {
 		heartbeat = document.querySelector("input#PDTTracerHeartbeat").value;
 		if (hasHeartbeat && (heartbeat === "off" || (Math.floor(Date.now() / 1000) - heartbeat) > 4)) {
 			console.log("PDT Tracer heartbeat lost " + heartbeat + " " + Math.floor(Date.now() / 1000));
@@ -120,48 +165,143 @@ function tracerStop() {
 	document.getElementById("Pause").click();
 }
 
-const injectScriptsToIframe = (tabId, frameId, scriptList) => {
-	browser.scripting.executeScript({
-		files: scriptList,
-		target: { tabId: tabId, frameIds: [frameId] },
-		world: "MAIN",
+function matchToRegEx(match) {
+	let regEx = match.replace(/[{}()\[\]\\.+?^$|]/g, "\\$&").replace(/\*/g, '.*?');
+	return regEx;
+}
+
+function reloadContentScripts(tabId, frameId, url) {
+	let frameIndex = tabId + "-" + frameId;
+	// if(processedFrames.has(frameIndex)) {
+	// 	console.log("frameIndex " + frameIndex + " " + processedFrames.get(frameIndex) + " " + Date.now());
+	// }
+	if(processedFrames.has(frameIndex) && (Math.floor(Date.now() - processedFrames.get(frameIndex))/1000) < 2 )
+		return false;
+	processedFrames.set(frameIndex, Date.now());
+	console.log("PDT reloadContentScripts tabId " + tabId + ", frameId" + frameId + ", URL " + url);
+	let manifest = browser.runtime.getManifest();
+	let contentScripts = manifest.content_scripts;
+	if(contentScripts.length == 0)
+		return false;
+
+	contentScripts.forEach(contentScript => {
+		let isAMatch = false;
+
+		contentScript.matches.forEach(match => {
+			if(!isAMatch) {
+				let matchRegEx = matchToRegEx(match);
+				let regEx = new RegExp(matchRegEx);
+				isAMatch = regEx.test(url);
+			}
+		});
+
+		// contentScript.js = contentScript.js.filter(function(value){ 
+		// 	return !value.includes("registerWithServiceWorker");
+		// });
+	
+		if(contentScript.js.includes("resources/shared.js") || contentScript.js.includes("resources/registerWithServiceWorker.js"))
+			isAMatch = false;
+		
+		if(isAMatch && contentScript.js.length>0) {
+			console.log(contentScript);
+
+			browser.scripting.executeScript({
+				files: contentScript.js,
+				target: { tabId: tabId, frameIds: [frameId] },
+				world: "ISOLATED",
+			});
+		
+			// if(contentScript.css) {
+			// 	contentScript.css.forEach(css => 
+			// 		chrome.scripting.insertCSS(tabId, {
+			// 			file: css.value
+			// 		})
+			// 	)
+			// }
+		}
+	})
+
+}
+
+
+function pingFrame(tabId, frameId) {
+	browser.tabs.sendMessage(
+		tabId,
+		{ purpose: "PingContent" },
+		{ frameId: 	frameId }
+	);
+	console.log("Pinging content tab " + tabId + " frameId " + frameId);
+}
+
+function initSettings() {
+	browser.storage.sync.get(["settings", "siteConfig"], (data) => {
+		settings = data.settings;
+		if(typeof settings === "undefined") settings = {};
+		if(typeof settings.tracer === "undefined") settings.tracer = {};
+		if(typeof settings.clipboard === "undefined") settings.clipboard = {};
+		if(typeof settings.devstudio === "undefined") settings.devstudio = {};
+		settings.siteConfig = new Map();
+
+		if (data.siteConfig) {
+			for (let i = 0; i < data.siteConfig.length; i++) {
+				if(data.siteConfig[i].color) {
+					data.siteConfig[i].color = data.siteConfig[i].color.replace("#", '');
+					if (data.siteConfig[i].color.length === 3) {
+						data.siteConfig[i].color = data.siteConfig[i].color.split('').map((hex) => {
+							return hex + hex;
+						}).join('');
+					}
+					if(data.siteConfig[i].color[0] != "#") 
+						data.siteConfig[i].color = "#" + data.siteConfig[i].color;
+				}
+
+				siteConfig.set(data.siteConfig[i].site, data.siteConfig[i]);
+			}
+		}
 	});
+}
 
-	// scriptList.forEach((script) => {
-	//   console.log("PDT executeScript tabId: " + tabId + ", frameId: " + frameId + ": " + `${script}`);
-	//   browser.scripting.executeScript({
-	//     files: [injectedScript],
-	//     target: { tabId: tabId, frameIds: [frameId] },
-	//     world: "MAIN"
-	//   });
-
-	//   browser.tabs.executeScript(tabId, {
-	//     file: `${script}`,
-	//     runAt: 'document_end',
-	//     frameId: frameId
-	//     //If the script injection fails (without the tab permission and so on) and is not checked in the callback` runtime.lastError `，
-	//     //It's a mistake. There is no other complicated logic in this example. You don't need to record the tab of successful injection. You can fool it like this.
-	//   }, () => void browser.runtime.lastError);
+function getSettings(site) {
+	let settingsForSite = settings;	
+	if(siteConfig.has(site))
+		settingsForSite.siteConfig = siteConfig.get(site);
+	else
+		settingsForSite.siteConfig = {};
+	return settingsForSite;
+}
+
+let arrDevTabs = new Map(), arrTracerTabs = new Map(), loadedFrames = new Map(), processedFrames = new Map(), settings = {}, siteConfig = new Map();
+
+async function setup() {
+	browser.runtime.onInstalled.addListener(async () => {
+		let url = browser.runtime.getURL("settings.html");
+		await browser.tabs.create({ url });
+	});
+
+	browser.webRequest.onCompleted.addListener(
+		function(details) {
+			console.debug(details);
+			if(details.frameType == "sub_frame" && details.frameId && loadedFrames.has(details.tabId + "-" + details.frameId)) 
+				pingFrame(details.tabId, details.frameId);
+		},
+		{urls: ["<all_urls>"]},
+		["responseHeaders"]
+	);
+
+	initSettings();
+
+	// //FEATURE: toggle certain options from extension context menu
+	// browser.contextMenus.create({
+	// 	title: "Toggle",
+	// 	id: "toggleMenu",
+	// 	"contexts": ["all"]
+	// });
+
+	// browser.contextMenus.create({
+	// 	title: "Hide tab close button",
+	// 	"contexts": ["all"],
+	// 	parentId: "toggleMenu"
 	// });
-};
-
-var arrDevTabs = new Map(), arrTracerTabs = new Map();
-
-const paragraphScriptList = [
-	"resources/codemirror/codemirror.js",
-	"resources/codemirror/foldcode.js",
-	"resources/codemirror/foldgutter.js",
-	"resources/codemirror/brace-fold.js",
-	"resources/codemirror/indent-fold.js",
-	"resources/codemirror/comment-fold.js",
-	"resources/codemirror/xml-fold.js",
-	"resources/codemirror/matchtags.js",
-	"resources/codemirror/closetag.js",
-	"resources/codemirror/fullscreen.js",
-	"resources/codemirror/active-line.js",
-	"resources/codemirror/xml.js",
-	"resources/codemirror/javascript.js",
-	"resources/codemirror/css.js",
-	"resources/codemirror/htmlmixed.js",
-	"devstudio/devstudio_paragraph.js",
-];
\ No newline at end of file
+}
+
+setup();
diff --git a/devstudio/datapage.js b/devstudio/datapage.js
index c49b39d9..f537ef12 100644
--- a/devstudio/datapage.js
+++ b/devstudio/datapage.js
@@ -1,20 +1,23 @@
+PDT.setScriptsApplied();
 console.log("PDT: devstudio/datapage.js");
 
+document.arrive("div[node_name='pzRuleFormParameters'] h2", {onceOnly: true, existing: true}, () => {
+    injectScript("/js/", "CopyDPCall.js");
 
-//appendScript(copyToClipboard);
-injectScript("/js/", "CopyDPCall.js");
+	//same as CopyDPCall.js
+	var dpCallString = document.querySelector("span[title='Page Name']").innerText + "[";
+	document.querySelectorAll("div[node_name='pzRuleFormParameters'] div#gridBody_right table.gridTable  tr.cellCont").forEach(function (row) {
+		if (row.querySelector("input") && row.querySelector("input").value) {
+			dpCallString += row.querySelector("input").value + ": \"" + "\", "
+		}
+	});
+	if (dpCallString.endsWith(", ")) dpCallString = dpCallString.substring(0, dpCallString.length - 2);
+	dpCallString += "]";
+
+	document.querySelector("div[node_name='pzRuleFormParameters'] h2").insertAdjacentHTML(
+		"afterend", 
+		'<div>' + dpCallString + ' <a href="#" onclick="return CopyDPCall()"><i class="icons pi pi-copy" id="CopyName" title="Copy to clipboard"></i></a></div><div id="status"></div>'
+	);
 
-//same as CopyDPCall.js
-var dpCallString = document.querySelector("span[title='Page Name']").innerText + "[";
-document.querySelectorAll("div[node_name='pzRuleFormParameters'] div#gridBody_right table.gridTable  tr.cellCont").forEach(function (row) {
-	if (row.querySelector("input") && row.querySelector("input").value) {
-		dpCallString += row.querySelector("input").value + ": \"" + "\", "
-	}
 });
-if (dpCallString.endsWith(", ")) dpCallString = dpCallString.substring(0, dpCallString.length - 2);
-dpCallString += "]";
 
-document.querySelector("div[node_name='pzRuleFormParameters'] h2").insertAdjacentHTML(
-	"afterend", 
-	'<div>' + dpCallString + ' <a href="#" onclick="return CopyDPCall()"><i class="icons pi pi-copy" id="CopyName" title="Copy to clipboard"></i></a></div><div id="status"></div>'
-);
diff --git a/devstudio/devstudio.css b/devstudio/devstudio.css
index 8d10da0c..468c91ec 100644
--- a/devstudio/devstudio.css
+++ b/devstudio/devstudio.css
@@ -2,14 +2,20 @@
     padding-left: 7px !important;
 }
 
-
 .header-layout.flex.content>.flex.content-item.system-search, .header-layout.flex.content>.flex.content-item.with-icon {
     border-right-width: 0 !important;
     margin: 0 !important;
 }
 
-
 /* remove reserved space in recents explorer, giving more space for item description */
 div[node_name='pzRecentExplorer'] div[node_name='pyFatListItems'] div.explorer-list-item > div {
-    padding-left: 0 !important;
+    padding-left: 2px !important;
+}
+
+div[node_name='pzRecentExplorer'] div[node_name='pyFatListItems']  > div {
+    padding: 0 !important;
+}
+
+div.workspace-app-name {
+    margin-right: 4px !important;
 }
\ No newline at end of file
diff --git a/devstudio/devstudio.js b/devstudio/devstudio.js
index 9f87a788..c70f170b 100644
--- a/devstudio/devstudio.js
+++ b/devstudio/devstudio.js
@@ -9,14 +9,14 @@ function applyPDTCustomization() {
         globalConfig.settings &&
         globalConfig.settings.useSiteLabelForBrowserTitle
       ) {
-        var newTitle = siteConfig.label + " Pega";
+        let newTitle = siteConfig.label + " Pega";
         if (siteConfig.version)
           newTitle += " " + siteConfig.version.slice(0, 1) + "." + siteConfig.version.slice(1, 2);
         parent.document.title = newTitle;
       }
     
       //FEATURE: environment header
-      var productionEnvElement = document.querySelector(
+      let productionEnvElement = document.querySelector(
         "div[data-ui-meta*='D_pzGetCurrentSystemRecord.pyActiveProductionLevelName']"
       );
       if (productionEnvElement) {
@@ -43,9 +43,7 @@ function applyPDTCustomization() {
           );
       }
 
-      if (
-        globalConfig.settings && globalConfig.settings.hideEnvironmentHeader
-      ) {
+      if (globalConfig.settings && globalConfig.settings.hideEnvironmentHeader) {
         if (productionEnvElement) productionEnvElement.style.display = "none";
       }
 
@@ -57,7 +55,7 @@ function applyPDTCustomization() {
           siteConfig.color.replace("#", '');
       }
     }
-    var settings;
+    let settings;
     if (globalConfig && globalConfig.settings) {
       settings = globalConfig.settings;
     }
@@ -70,46 +68,11 @@ function applyPDTCustomization() {
           alterTracerOpenBehavior(settings.tracer.openBehavior);
       }
 
-      //FEATURE: hide close button
-      if (PDT.settings.devstudio.hideCloseButton)
-        injectStyles("div.tStrCntr ul #close {display: none}");
-
-      if (PDT.settings.devstudio.longerRuleNames) {
-        //inject script which will apply it for newly opened tabs
-        injectScript("/js/", "makeRuleNamesLonger.js");
-        injectStyles(
-          ".Temporary_top_tabs .Temporary_top_tabsList LI span#TABANCHOR { padding-right: 4px !important; padding-left: 4px; !important}"
-        );
-      }
-
-      if (PDT.settings.devstudio.expandTabOnHover) {
-        //inject script which will apply it for newly opened tabs
-        injectScript("/js/", "expandTabOnHover.js");
-      }      
-
-      if (PDT.settings.devstudio.checkoutIndicator) {
-        showCheckoutIndicator();
-      }
-
       addHeaderShortcuts();
       customizeText();
       injectSidebarToggle();
-
-      //FEATURE: close tab on middle click
-      if (PDT.settings.devstudio.closeTabMiddleClick) {
-        //inject script which will apply it for newly opened tabs
-        injectScript("/js/", "closeTabMiddleClick.js");
-
-        // apply for existing tabs
-        document.querySelectorAll("div.tStrCntr ul table#RULE_KEY span[data-stl='1'], div.tStrCntr ul table#RULE_KEY svg").forEach(function (elem) {
-          elem.addEventListener("mousedown", function (e) {
-            console.log(e);
-            if (e && (e.which == 2 || e.button == 4))
-              this.parentNode.parentNode.querySelector('#close').click();
-          })
-        })
-      }
     }
+    
     PDT.alterFavicon();
   }
 
@@ -150,20 +113,16 @@ function showCheckoutIndicator() {
   if (containerTabListIndicator) {
     const containerTabListCallbackIndicator = function (
       mutationsList,
-      observer
+      _observer
     ) {
       mutationsList.forEach((mutation) => {
         mutation.addedNodes.forEach((node) => {
           if (DEBUG) console.log(node.nodeName);
+          let elem;
           document.querySelectorAll("iframe").forEach((iframe) => {
-            if (
-              iframe.contentWindow.document.querySelectorAll(
-                "button[title^='Check in']"
-              ).length > 0
-            )
-              var elem = document.querySelector(
-                "div.tStrCntr ul li[aria-label='" + iframe.title + "'] td span"
-              );
+            if (iframe.contentWindow.document.querySelectorAll("button[title^='Check in']").length > 0) {
+              elem = document.querySelector("div.tStrCntr ul li[aria-label='" + iframe.title + "'] td span");
+            }
             if (elem && !elem.innerText.startsWith("*")) {
               elem.innerText = "*" + elem.innerText;
               if (DEBUG) console.log(iframe.title);
@@ -224,7 +183,7 @@ function customizeText() {
   document.querySelector("div.alerts a").innerHTML = document.querySelector("div.alerts a").innerHTML.replace(document.querySelector("div.alerts a").textContent, '');
 
   //FEATURE: shorten Live Data
-  var DataInspectorButton = document.querySelector(
+  let DataInspectorButton = document.querySelector(
     "div a[data-test-id='DataInspectorButton']"
   );
   if (DataInspectorButton) {
diff --git a/devstudio/devstudio_activity.js b/devstudio/devstudio_activity.js
index 3f0935c5..94363720 100644
--- a/devstudio/devstudio_activity.js
+++ b/devstudio/devstudio_activity.js
@@ -1,3 +1,5 @@
 // console.log("PDT: devstudio/devstudio_activity.js");
+//PDT.setScriptsApplied();
 //document.querySelectorAll("table ul.gridNode li.gridRow[pl_index]")
-// //injectRuleExport();
\ No newline at end of file
+// //injectRuleExport();
+
diff --git a/devstudio/devstudio_data.js b/devstudio/devstudio_data.js
index ab09af56..4b78f9c6 100644
--- a/devstudio/devstudio_data.js
+++ b/devstudio/devstudio_data.js
@@ -1,6 +1,7 @@
 
 
 console.log("PDT: devstudio/devstudio_data.js");
+PDT.setScriptsApplied();
 
 //TODO: to be reviewed
 
diff --git a/devstudio/devstudio_datatransform.js b/devstudio/devstudio_datatransform.js
index 59623bf6..923648b1 100644
--- a/devstudio/devstudio_datatransform.js
+++ b/devstudio/devstudio_datatransform.js
@@ -1,8 +1,7 @@
+PDT.setScriptsApplied();
 console.log("PDT: devstudio/devstudio_datatransform.js");
 
-
-var selection = document.querySelector("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links");
-if(selection) {
-    selection.insertAdjacentHTML("beforeend", "<a onclick='copyRuleTableContent()'>Export</a>");
+document.arrive("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links", {onceOnly: true, existing: true}, (selection) => {
+    selection.insertAdjacentHTML("beforeend", "&nbsp;<a onclick='copyRuleTableContent()'>Export</a>");
     injectScript("/js/", "copyDataTransform.js");
-}
+});
diff --git a/devstudio/devstudio_flow.js b/devstudio/devstudio_flow.js
index ec88f841..b5c7b9e8 100644
--- a/devstudio/devstudio_flow.js
+++ b/devstudio/devstudio_flow.js
@@ -1,6 +1,6 @@
 console.log("PDT: devstudio/devstudio_flow.js");
+PDT.setScriptsApplied();
 
-injectSidebarToggle();
-injectCloseShortcut();
-
-injectScript("/js/", "injectFlowType.js");
\ No newline at end of file
+document.arrive("div.gfw-breadcrumbs ul li", {onceOnly: true, existing: true}, () => {
+    injectScript("/js/", "injectFlowType.js"); 
+});
diff --git a/devstudio/devstudio_function.js b/devstudio/devstudio_function.js
index 89f381fa..ae8e785c 100644
--- a/devstudio/devstudio_function.js
+++ b/devstudio/devstudio_function.js
@@ -1,8 +1,7 @@
+PDT.setScriptsApplied();
 console.log("PDT: devstudio/devstudio_function.js");
 
-
-var cms = document.querySelector("a.ce-expand");
-if(cms) {
+document.arrive("a.ce-expand", {onceOnly: true, existing: true}, () => {
     injectScript("/js/", "formatJava.js");
     cms.insertAdjacentHTML('beforebegin', '<a class="pretty-print-icon prettyPrintScrollbar" title="Pretty print" onclick="formatJava()"></a>');
-}
+});
diff --git a/devstudio/devstudio_paragraph.js b/devstudio/devstudio_paragraph.js
index a91619e6..734ef3be 100644
--- a/devstudio/devstudio_paragraph.js
+++ b/devstudio/devstudio_paragraph.js
@@ -1,31 +1,42 @@
+
+PDT.setScriptsApplied();
 console.log("PDT: devstudio/devstudio_paragraph.js");
 
-var tries = 0;
-var mainDiv;
+/* //TODO: currently broken. does not work on reload
+document.arrive("span.TextAreaContainer textarea", {onceOnly: true, existing: true}, () => {
+    applyCodeMirror();
+});
+
+// var tries = 0;
+// var mainDiv;
 
-function addObserver() {
-    const paragraphSection = document.querySelector("div[node_name='pzViewParagraph']");
+// function addObserver() {
+//     const paragraphSection = document.querySelector("div[node_name='pzViewParagraph']");
     
-    const paragraphCallback = function (mutationsList, observer) {
-        mutationsList.forEach((mutation) => {
-            applyCodeMirror();
-        });
-    };
+//     const paragraphCallback = function (mutationsList, observer) {
+//         mutationsList.forEach((mutation) => {
+//             applyCodeMirror();
+//         });
+//     };
     
-    const paragraphObserver = new MutationObserver(paragraphCallback);
-    paragraphObserver.observe(paragraphSection, {
-        childList: true,
-    })
-}
+//     const paragraphObserver = new MutationObserver(paragraphCallback);
+//     paragraphObserver.observe(paragraphSection, {
+//         childList: true,
+//     })
+// }
+if(typeof myCodeMirror !== "undefined")
+    myCodeMirror.destroy();
 
-var myCodeMirror;
+let myCodeMirror;
 
 function applyCodeMirror() {
     //injectStyles(".CodeMirror { height: auto;}");
-    var tarea = document.querySelector("span.TextAreaContainer textarea");
-	if (tarea) {
+    if(document.querySelector("divCodeMirror-wrap"))
+        document.querySelector("divCodeMirror-wrap").remove();
+    let textArea = document.querySelector("span.TextAreaContainer textarea");
+	if (textArea) {
         console.log("PDT: devstudio/devstudio_paragraph.js applying CodeMirror");
-		myCodeMirror = CodeMirror.fromTextArea(tarea, {
+		myCodeMirror = CodeMirror.fromTextArea(textArea, {
 			mode: "htmlmixed",
 			lineNumbers: true,
 			lineWrapping: true,
@@ -56,32 +67,33 @@ function applyCodeMirror() {
 }
 
 
-function waitUntilRenderRS() {
-    mainDiv =  document.querySelector("div[node_name='pzViewParagraph']");
-    if (mainDiv) {
-        applyCodeMirror();
-        addObserver();
-    } else {
-        tries = tries + 1;
-        console.log(tries);
-        if (tries > 10) return;
-        setTimeout(() => {
-            waitUntilRenderRS();
-        }, 500);
-    }
-}
+// function waitUntilRenderRS() {
+//     mainDiv =  document.querySelector("div[node_name='pzViewParagraph']");
+//     if (mainDiv) {
+//         applyCodeMirror();
+//         addObserver();
+//     } else {
+//         tries = tries + 1;
+//         console.log(tries);
+//         if (tries > 10) return;
+//         setTimeout(() => {
+//             waitUntilRenderRS();
+//         }, 500);
+//     }
+// }
 
-waitUntilRenderRS();
+// waitUntilRenderRS();
 
 
 
-var dom_observer = new MutationObserver(function(mutationsList) {
-    mutationsList.forEach((mutation) => {
-        console.log(mutation);
-    });
-});
-var container = document.documentElement || document.body;
-console.log(container);
-var config = { attributes: true, childList: true };
-dom_observer.observe(container, config);
+// var dom_observer = new MutationObserver(function(mutationsList) {
+//     mutationsList.forEach((mutation) => {
+//         console.log(mutation);
+//     });
+// });
+// var container = document.documentElement || document.body;
+// console.log(container);
+// var config = { attributes: true, childList: true };
+// dom_observer.observe(container, config);
 
+*/
\ No newline at end of file
diff --git a/devstudio/devstudio_report.js b/devstudio/devstudio_report.js
index 186d9023..a776a26d 100644
--- a/devstudio/devstudio_report.js
+++ b/devstudio/devstudio_report.js
@@ -1,3 +1,3 @@
 console.log("PDT: devstudio/devstudio_report.js");
-
+PDT.setScriptsApplied();
 injectRuleExport();
\ No newline at end of file
diff --git a/devstudio/devstudio_rule.js b/devstudio/devstudio_rule.js
index d28e49e8..fffc9211 100644
--- a/devstudio/devstudio_rule.js
+++ b/devstudio/devstudio_rule.js
@@ -1,5 +1,7 @@
 console.log("PDT: devstudio/devstudio_rule.js");
 
+PDT.setScriptsApplied();
+
 var tries = 0;
 var mainDiv;
 
@@ -27,7 +29,7 @@ function siteConfigCallback(siteConfig, globalConfig) {
 
         //FEATURE: copy rule info (name, class, ruleset) in a format to be pasted into a table
         if($('a.custom_RuleOpener').eq(0)) {
-            $('a.custom_RuleOpener').eq(0).after('<a class="rule-details" style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyNameAndClass()" title="Copy name, class and ruleset"><i  class="icons pi pi-copy" id="CopyNameAndClass"></i></a>');
+            $('a.custom_RuleOpener').eq(0).after('<a class="rule-details" style="margin-top:0; margin-bottom:0;padding-left: 4px;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyNameAndClass()" title="Copy name, class and ruleset"><i  class="icons pi pi-copy" id="CopyNameAndClass"></i></a>');
         }
         
         //FEATURE: copy class name
@@ -60,4 +62,5 @@ function waitUntilRenderRS() {
 
 waitUntilRenderRS();
 injectSidebarToggle();
-injectCloseShortcut();
\ No newline at end of file
+injectCloseShortcut();
+
diff --git a/devstudio/devstudio_ruleform_popup.js b/devstudio/devstudio_ruleform_popup.js
index cbfb06d6..a24d7228 100644
--- a/devstudio/devstudio_ruleform_popup.js
+++ b/devstudio/devstudio_ruleform_popup.js
@@ -1,4 +1,5 @@
 console.log("PDT: devstudio/devstudio_ruleform_popup.js");
+PDT.setScriptsApplied();
 
 var tries = 0;
 var mainDiv;
@@ -60,4 +61,5 @@ function waitUntilRender() {
 	}
 }
 
+//TODO: use arrive.js
 waitUntilRender();
diff --git a/devstudio/devstudio_ruleset.js b/devstudio/devstudio_ruleset.js
index 0f0d31d0..b7b4af32 100644
--- a/devstudio/devstudio_ruleset.js
+++ b/devstudio/devstudio_ruleset.js
@@ -1,4 +1,5 @@
 console.log("PDT: devstudio/devstudio_ruleset.js");
+PDT.setScriptsApplied();
 
 var tries = 0, pagerDiv;
 var rsvListObserver;
diff --git a/devstudio/devstudio_tabs.js b/devstudio/devstudio_tabs.js
new file mode 100644
index 00000000..067eb046
--- /dev/null
+++ b/devstudio/devstudio_tabs.js
@@ -0,0 +1,104 @@
+console.log("PDT: devstudio/devstudio_tabs.js");
+
+function applyTabMenu() {
+    let tabClicked;
+
+    let menuDefinition = [
+        {
+            text: "⇐ Move left",
+            action: () => {
+                if(tabClicked.previousSibling && tabClicked.previousSibling.getAttribute("section_index") !="1")
+                    tabClicked.parentElement.insertBefore(tabClicked, tabClicked.previousSibling)
+            }
+        },
+        {
+            text: "⇒ Move right",
+            action: () => {
+                if(tabClicked.nextSibling && tabClicked.parentElement && !(tabClicked.nextSibling.classList.contains("rightborder")))
+                    tabClicked.parentElement.insertBefore(tabClicked.nextSibling, tabClicked)
+            }
+        },
+        { isDivider: true },
+        {
+            text: "⚐ Mark",
+            action: () => {
+                tabClicked.querySelectorAll("span#TABANCHOR, span#TABSPAN").forEach((s) => {
+                    if(s.style.backgroundColor == "rgb(169, 7, 30)")
+                        s.style.backgroundColor = null;
+                    else
+                        s.style.backgroundColor = "rgb(169, 7, 30)"; 
+                })
+            }
+        },
+        { isDivider: true },
+        {
+            text: "⦻ Close tab",
+            action: () => { if(tabClicked.querySelector('#close')) tabClicked.querySelector('#close').click(); }
+        },    
+        { isDivider: true },
+        {
+            text: "☓ Close this menu",
+            action: () => { /* empty action just closes menu */  }        
+        }    
+    ]
+
+    //FEATURE: menus
+    $("div.dc-header div.pegaTabGrp div.tStrCntr ul").on(
+        "contextmenu",
+        "li",
+        function (evt) { 
+            evt.preventDefault();
+            tabClicked = this;
+            ctxmenu.show(menuDefinition, evt);
+    });
+}
+
+document.arrive("body[data-PDTSettings='loaded']", {onceOnly: true, existing: true}, () => {
+    if(PDT.settings.devstudio.useTabMenu) {
+        applyTabMenu();
+    }
+
+    //FEATURE: scroll tabs with mouse wheel
+    if (PDT.settings.devstudio.mouseScrollTabs) {
+        injectScript("/js/", "mouseScrollTabs.js");
+    }
+
+    //FEATURE: expand tabs on hover
+    if (PDT.settings.devstudio.expandTabOnHover) {
+        //inject script which will apply it for newly opened tabs
+        injectScript("/js/", "expandTabOnHover.js");
+    }      
+
+    //FEATURE: checkout indicator
+    if (PDT.settings.devstudio.checkoutIndicator) {
+        showCheckoutIndicator();
+    }
+
+    //FEATURE: close tab on middle click
+    if (PDT.settings.devstudio.closeTabMiddleClick) {
+        //inject script which will apply it for newly opened tabs
+        injectScript("/js/", "closeTabMiddleClick.js");
+
+        // apply for existing tabs
+        document.querySelectorAll("div.tStrCntr ul table#RULE_KEY span[data-stl='1'], div.tStrCntr ul table#RULE_KEY svg").forEach(function (elem) {
+            elem.addEventListener("mousedown", function (e) {
+                console.log(e);
+                if (e && (e.which == 2 || e.button == 4))
+                    this.parentNode.parentNode.querySelector('#close').click();
+            })
+        })
+    }
+
+    //FEATURE: hide close button
+    if (PDT.settings.devstudio.hideCloseButton)
+        injectStyles("div.tStrCntr ul #close {display: none}");
+
+    if (PDT.settings.devstudio.longerRuleNames) {
+        //inject script which will apply it for newly opened tabs
+        injectScript("/js/", "makeRuleNamesLonger.js");
+
+        injectStyles(
+            ".Temporary_top_tabs .Temporary_top_tabsList LI span#TABANCHOR { padding-right: 4px !important; padding-left: 4px; !important}"
+        );
+    }
+});
diff --git a/devstudio/logfile.js b/devstudio/logfile.js
index 67baee82..1104ca90 100644
--- a/devstudio/logfile.js
+++ b/devstudio/logfile.js
@@ -5,8 +5,8 @@ if(document.querySelector("div#LogContentDiv > div b.page").nextElementSibling =
     window.scrollTo(0, document.body.scrollHeight);
 }
 
-var pager = document.querySelector("div#LogContentDiv > div").cloneNode(true);
-var target = document.querySelector("div#LogContentDiv");
+let pager = document.querySelector("div#LogContentDiv > div").cloneNode(true);
+let target = document.querySelector("div#LogContentDiv");
 if(target) {
     target.insertBefore(pager, target.firstChild);
 }
diff --git a/devstudio/refactorClass.js b/devstudio/refactorClass.js
new file mode 100644
index 00000000..5474827d
--- /dev/null
+++ b/devstudio/refactorClass.js
@@ -0,0 +1,6 @@
+console.log("PDT: devstudio/refactorClass.js");
+
+document.querySelectorAll("div.repeatContainer").forEach((e) => {
+		e.insertAdjacentHTML('beforebegin', '<button onclick="document.querySelectorAll(\'div.repeatContainer input[type=checkbox]\').forEach((e)=> e.checked = false);return false;">Deselect all</button>');
+	}
+)
\ No newline at end of file
diff --git a/js/copyDPcall.js b/js/copyDPcall.js
index bfbcfbf2..5db4a6db 100644
--- a/js/copyDPcall.js
+++ b/js/copyDPcall.js
@@ -1,4 +1,4 @@
-function CopyDPCall(nocopy) {
+function CopyDPCall(noCopy) {
 	dpCallString = document.querySelector("span[title='Page Name']").innerText + "[";
 	document.querySelectorAll("div[node_name='pzRuleFormParameters'] div#gridBody_right table.gridTable  tr.cellCont").forEach(function (row) {
 		if (row.querySelector("input") && row.querySelector("input").value) {
@@ -7,11 +7,11 @@ function CopyDPCall(nocopy) {
 	});
 	if (dpCallString.endsWith(", ")) dpCallString = dpCallString.substring(0, dpCallString.length - 2);
 	dpCallString += "]";
-	if(!nocopy) {
+	if(!noCopy) {
 		copyToClipboard(dpCallString);
 
 		//let user know 
-		var status = document.getElementById('status');
+		let status = document.getElementById('status');
 		status.textContent = 'copied';
 		setTimeout(function () {
 			status.textContent = '';
diff --git a/js/injectFlowType.js b/js/injectFlowType.js
index fe8d2a94..290c774d 100644
--- a/js/injectFlowType.js
+++ b/js/injectFlowType.js
@@ -1,4 +1,3 @@
-
 if(typeof flowTypeCategory !== 'undefined' && flowTypeCategory !== null) {
     let flowType = flowTypeCategory;
     if(flowType.includes("Standard"))
diff --git a/js/makeRuleNamesLonger.js b/js/makeRuleNamesLonger.js
index 74472e47..7f4bc082 100644
--- a/js/makeRuleNamesLonger.js
+++ b/js/makeRuleNamesLonger.js
@@ -1,26 +1,30 @@
 const containerTabListNames = document.querySelector("div.tStrCntr ul");
 
-const containerTabListCallbackNames = function (mutationsList, _observer) {
-    mutationsList.forEach((mutation) => { 
-        if(mutation.attributeName == "aria-label"){
-            if (mutation.target.nodeName == "LI") {
-                mutation.target.classList.add("PDTmakeRuleNamesLonger");
-                let title = mutation.target.getAttribute("aria-label");
-                if (title) {
-                    title = title.length > 20 ? title.substring(0, 20) + "..." : title;
-                    mutation.target.querySelector("span[inanchor]").innerText = title;
+if(containerTabListNames) {
+
+    const containerTabListCallbackNames = function (mutationsList, _observer) {
+        mutationsList.forEach((mutation) => { 
+            if(mutation.attributeName == "aria-label"){
+                if (mutation.target.nodeName == "LI") {
+                    mutation.target.classList.add("PDTmakeRuleNamesLonger");
+                    let title = mutation.target.getAttribute("aria-label");
+                    if (title) {
+                        title = title.length > 20 ? title.substring(0, 20) + "..." : title;
+                        mutation.target.querySelector("span[inanchor]").innerText = title;
+                    }
                 }
             }
-        }
-	});
-};
+        });
+    };
 
-const containerTabListNamesObserver = new MutationObserver(containerTabListCallbackNames);
-containerTabListNamesObserver.observe(containerTabListNames, 
-    { 
-        attributeFilter: [ "aria-label"],
-        subtree: true
-    }
-);
+    const containerTabListNamesObserver = new MutationObserver(containerTabListCallbackNames);
+
+    containerTabListNamesObserver.observe(containerTabListNames, 
+        { 
+            attributeFilter: [ "aria-label"],
+            subtree: true
+        }
+    );
+}
 
 console.log("PDT: makeRuleNamesLonger.js loaded"); 
diff --git a/js/mouseScrollTabs.js b/js/mouseScrollTabs.js
new file mode 100644
index 00000000..dcf0da09
--- /dev/null
+++ b/js/mouseScrollTabs.js
@@ -0,0 +1,11 @@
+function scrollHorizontally(e) {
+    e.currentTarget.scrollLeft -= e.wheelDelta;
+    e.preventDefault();
+}
+
+let tabListContainer = document.querySelector("div.dc-header div.pegaTabGrp  div.tStrCntr");
+if (tabListContainer && tabListContainer.addEventListener) {
+    tabListContainer.addEventListener('wheel', scrollHorizontally, false);
+} 
+  
+console.log("PDT: mouseScrollTabs.js loaded"); 
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..173db8ec
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,7 @@
+{
+    "typeAcquisition": {
+      "include": [
+        "chrome"
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index c2862c5c..344069ed 100644
--- a/manifest.json
+++ b/manifest.json
@@ -10,7 +10,8 @@
 		"contextMenus",
 		"storage",
 		"notifications",
-		"scripting"
+		"scripting",
+		"webRequest"
 	],
 	"host_permissions": ["<all_urls>"],
 	"incognito":"spanning",
@@ -37,10 +38,11 @@
 				"resources/shared.css"
 			],
 			"js": [
-				"resources/jquery-3.4.1.min.js",				
-				"resources/tinycon.min.js",
-				"resources/arrive.min.js",
-				"resources/shared.js"
+				"resources/jquery-3.4.1.min.js",
+				"resources/arrive.min.js",				
+				"resources/shared.js",
+				"resources/tinycon.min.js"
+		
 			],
 			"all_frames": true,
 			"match_about_blank": true,
@@ -53,12 +55,12 @@
 			"exclude_globs": [
 				"*blank.htm*"
 			],
-			"js": [
-				"resources/main.js"
+			"js": [			
+				"resources/registerWithServiceWorker.js"
 			],
-			"match_about_blank": false,
-			"run_at": "document_end"
-		},
+			"all_frames": true,
+			"run_at": "document_idle"
+		},		
 		{
 			"matches": [
 				"*://*/prweb/*!STANDARD*",
@@ -69,7 +71,9 @@
 				"*agile*"
 			],
 			"js": [
-				"devstudio/devstudio.js"
+				"resources/ctxmenu.min.js",
+				"devstudio/devstudio.js",
+				"devstudio/devstudio_tabs.js"
 			],
 			"css": [
 				"devstudio/devstudio.css"
@@ -231,11 +235,10 @@
 			"js": [
 				"resources/jquery-3.4.1.min.js",
 				"resources/jquery.filtertable.min.js",
-				"resources/contextmenu.min.js",
+				"resources/ctxmenu.min.js",
 				"tracer/tracer_event.js"
 			],
 			"css": [
-				"resources/contextmenu.min.css",
 				"tracer/tracer_event.css"
 			],
 			"all_frames": true,
@@ -333,6 +336,14 @@
 			"match_about_blank": true,
 			"run_at": "document_end"
 		},
+		{
+			"matches": [
+				"*://*/prweb/*/*RefactorClass*PegaAccel-Management-Refactor-Class*"
+			],
+			"js": [
+				"devstudio/refactorClass.js"
+			]
+		},		
 		{
 			"matches": [
 				"*://*.pegacloud.net/prweb/*/*"
@@ -357,9 +368,11 @@
 				"clipboard/*",
 				"tracer/*",
 				"devstudio/*",
-				"js/*"
+				"js/*",
+				"/*"
 			],
 			"matches": ["<all_urls>"]
 		}
 	]
-}
\ No newline at end of file
+}
+
diff --git a/resources/contextmenu.min.css b/resources/contextmenu.min.css
deleted file mode 100644
index 6d694713..00000000
--- a/resources/contextmenu.min.css
+++ /dev/null
@@ -1 +0,0 @@
-.cm_container{position:fixed;opacity:0;transform:scale(0);transition:transform 0.1s;transform-origin:top left;padding:0}.cm_container.display{opacity:1;transform:scale(1)}.cm_container,.cm_container *{box-sizing:border-box}.cm_container *{position:relative}.cm_container ul{list-style-type:none;padding:0;margin:0;background-color:#eee;box-shadow:0 0 5px #333}.cm_container li{padding:5px 10px;padding-right:1.7em;cursor:pointer;white-space:nowrap}.cm_container li:hover{background-color:#bbb}.cm_container li .cm_icon_span{width:1.5em;height:1.2em;vertical-align:bottom;display:inline-block;border-right:1px solid #aaa;margin-right:5px;padding-right:5px;text-align:center}.cm_container li .cm_sub_span{width:1em;display:inline-block;text-align:center;position:absolute;top:50%;right:.5em;transform:translateY(-50%)}.cm_container li>ul{position:absolute;top:0;left:100%;opacity:0;transition:opacity 0.2s;visibility:hidden}.cm_container li:hover>ul{opacity:1;visibility:visible}.cm_container li.cm_divider{border-bottom:1px solid #aaa;margin:5px;padding:0;cursor:default}.cm_container li.cm_divider:hover{background-color:inherit}.cm_container.cm_border_right>ul ul{left:unset;right:100%}.cm_container.cm_border_bottom>ul ul{top:unset;bottom:0}.cm_container li[disabled=""]{color:#777;cursor:default}.cm_container li[disabled=""]:hover{background-color:inherit}
diff --git a/resources/contextmenu.min.js b/resources/contextmenu.min.js
deleted file mode 100644
index fe15bb7f..00000000
--- a/resources/contextmenu.min.js
+++ /dev/null
@@ -1 +0,0 @@
-function ContextMenu(a,b){function c(h){var j=document.createElement("ul");return h.forEach(function(k){var l=document.createElement("li");if(l.menu=f,"undefined"==typeof k.type){var m=document.createElement("span");m.className="cm_icon_span",m.innerHTML=""==ContextUtil.getProperty(k,"icon","")?ContextUtil.getProperty(b,"default_icon",""):ContextUtil.getProperty(k,"icon","");var n=document.createElement("span");n.className="cm_text",n.innerHTML=""==ContextUtil.getProperty(k,"text","")?ContextUtil.getProperty(b,"default_text","item"):ContextUtil.getProperty(k,"text","");var o=document.createElement("span");if(o.className="cm_sub_span","undefined"!=typeof k.sub&&(""==ContextUtil.getProperty(b,"sub_icon","")?o.innerHTML="&#155;":o.innerHTML=ContextUtil.getProperty(b,"sub_icon","")),l.appendChild(m),l.appendChild(n),l.appendChild(o),!ContextUtil.getProperty(k,"enabled",!0))l.setAttribute("disabled","");else{if("object"==typeof k.events)for(var p=Object.keys(k.events),q=0;q<p.length;q++)l.addEventListener(p[q],k.events[p[q]]);"undefined"!=typeof k.sub&&l.appendChild(c(k.sub))}}else k.type==ContextMenu.DIVIDER&&(l.className="cm_divider");j.appendChild(l)}),j}function d(){f.hide()}var f=this,g=ContextMenu.count++;if(this.menu=a,this.contextTarget=null,!(a instanceof Array))throw new Error("Parameter 1 must be of type Array");if("undefined"==typeof b)b={};else if("object"!=typeof b)throw new Error("Parameter 2 must be of type object");window.addEventListener("resize",function(){ContextUtil.getProperty(b,"close_on_resize",!0)&&f.hide()}),this.setOptions=function(h){if("object"==typeof h)b=h;else throw new Error("Parameter 1 must be of type object")},this.changeOption=function(h,j){if("string"!=typeof h)throw new Error("Parameter 1 must be of type string");else if("undefined"!=typeof j)b[h]=j;else throw new Error("Parameter 2 must be set")},this.getOptions=function(){return b},this.reload=function(){if(null==document.getElementById("cm_"+g)){var h=document.createElement("div");h.className="cm_container",h.id="cm_"+g,document.body.appendChild(h)}var j=document.getElementById("cm_"+g);j.innerHTML="",j.appendChild(c(a))},this.display=function(h,j){f.contextTarget="undefined"==typeof j?h.target:j;var k=document.getElementById("cm_"+g),l={x:h.clientX,y:h.clientY},m=l.x,n=l.y,o=k.offsetWidth+4,p=k.offsetHeight+4,q=window.innerWidth,r=window.innerHeight,s=parseInt(ContextUtil.getProperty(b,"mouse_offset",2));k.style.left=q-m<o?q-o+"px":m+s+"px",k.style.top=r-n<p?r-p+"px":n+s+"px";var t=ContextUtil.getSizes(k);q-m<t.width?k.classList.add("cm_border_right"):k.classList.remove("cm_border_right"),r-n<t.height?k.classList.add("cm_border_bottom"):k.classList.remove("cm_border_bottom"),k.classList.add("display"),ContextUtil.getProperty(b,"close_on_click",!0)&&window.addEventListener("click",d),h.preventDefault()},this.hide=function(){document.getElementById("cm_"+g).classList.remove("display"),window.removeEventListener("click",d)},this.reload()}ContextMenu.count=0,ContextMenu.DIVIDER="cm_divider";const ContextUtil={getProperty:function(a,b,c){return"undefined"==typeof a[b]?c:a[b]},getSizes:function(a){for(var g,b=a.getElementsByTagName("li"),c=0,d=0,f=0;f<b.length;f++)g=b[f],g.offsetWidth>c&&(c=g.offsetWidth),g.offsetHeight>d&&(d=g.offsetHeight);for(var h=c,j=d,f=0;f<b.length;f++){var g=b[f],k=g.getElementsByTagName("ul");if("undefined"!=typeof k[0]){var l=ContextUtil.getSizes(k[0]);c+l.width>h&&(h=c+l.width),d+l.height>j&&(j=d+l.height)}}return{width:h,height:j}}};
diff --git a/resources/ctxmenu.min.js b/resources/ctxmenu.min.js
new file mode 100644
index 00000000..454da95e
--- /dev/null
+++ b/resources/ctxmenu.min.js
@@ -0,0 +1,2 @@
+!function(){"use strict";function e(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var i=Array(e),r=0;for(t=0;t<n;t++)for(var o=arguments[t],a=0,d=o.length;a<d;a++,r++)i[r]=o[a];return i}function t(e){return"function"==typeof e?e():e}function n(e){return i(e)||r(e)||o(e)||function(e){return e.hasOwnProperty("html")||e.hasOwnProperty("element")}(e)}function i(e){return e.hasOwnProperty("action")}function r(e){return e.hasOwnProperty("href")}function o(e){return e.hasOwnProperty("subMenu")}function a(e,t){var n;e.addEventListener("mouseenter",(function(e){n=setTimeout((function(){return t(e)}),150)})),e.addEventListener("mouseleave",(function(){return clearTimeout(n)}))}function d(e){return t(e.disabled)||o(e)&&0===e.subMenu.length}function c(e){var a=document.createElement("li");if(function(e){return e.hasOwnProperty("isDivider")}(e))return a.className="divider",a;if(function(e,n){var i=t(e.html),r="<span>"+t(e.text)+"</span>",o=t(e.element);o?n.append(o):n.innerHTML=i||r,n.title=t(e.tooltip)||"",e.style&&n.setAttribute("style",t(e.style));e.icon&&(n.classList.add("icon"),n.innerHTML+='<img class="icon" src="'+t(e.icon)+'" />')}(e,a),!n(e))return a.classList.add("heading"),a;if(d(e))return a.classList.add("disabled"),o(e)&&a.classList.add("submenu"),a;if(a.classList.add("interactive"),r(e)){var c=document.createElement("a");return c.append.apply(c,Array.from(a.childNodes)),c.href=t(e.href),e.hasOwnProperty("download")&&(c.download=t(e.download)),e.hasOwnProperty("target")&&(c.target=t(e.target)),a.append(c),a}return i(e)?(a.addEventListener("click",e.action),a):(a.classList.add("submenu"),a)}var s="r",u="d";function l(e,t){var n=p(),i=window.visualViewport,r=i.width,o=i.height;Object.assign(e.style,{maxHeight:o/n.y+"px",maxWidth:r/n.x+"px"});var a=function(e){var t=e.cloneNode(!0);t.style.visibility="hidden",document.body.appendChild(t);var n=f(t);return document.body.removeChild(t),n}(e);a.width=Math.trunc(a.width)+1,a.height=Math.trunc(a.height)+1;var d={x:0,y:0};if(t instanceof Element){var c=f(t),l=c.x,m=c.width,v=c.y;d={x:"r"===s?l+m:l-a.width,y:v},t.className.includes("submenu")&&(d.y+="d"===u?4:-12);var y=h(a,d);d.x!==y.x&&(s="r"===s?"l":"r",d.x="r"===s?l+m:l-a.width),d.y!==y.y&&(u="u"===u?"d":"u",d.y=y.y),d=h(a,d)}else{var x=""!==document.body.style.transform?document.body.getBoundingClientRect():{x:0,y:0};d=h(a,{x:(t.clientX-x.x)/n.x,y:(t.clientY-x.y)/n.y})}Object.assign(e.style,{left:d.x+"px",top:d.y+"px",width:a.width+"px",height:a.height+"px"})}function h(e,t){var n=window.visualViewport,i=n.width,r=n.height,o=""!==document.body.style.transform?document.body.getBoundingClientRect():{left:0,top:0},a=o.left,d=o.top,c=p(),l=-a/c.x,h=-d/c.y,f=(i-a)/c.x,m=(r-d)/c.y;return{x:"r"===s?t.x+e.width>f?f-e.width:t.x:t.x<l?l:t.x,y:"d"===u?t.y+e.height>m?m-e.height:t.y:t.y<h?h:t.y}}function f(e){var t=e.offsetLeft,n=e.offsetTop,i=e.offsetHeight,r=e.offsetWidth;if(e.offsetParent instanceof HTMLElement){var o=f(e.offsetParent);return{x:t+o.x,y:n+o.y,width:r,height:i}}return{x:t,y:n,width:r,height:i}}function p(){var e=document.body,t=e.getBoundingClientRect();return{x:t.width/e.offsetWidth,y:t.height/e.offsetHeight}}var m=function(){function i(){var e=this;this.cache={},this.preventCloseOnScroll=!1,window.addEventListener("click",(function(t){var n=t.target instanceof Element&&t.target.parentElement;n&&"interactive"===n.className||e.hide()})),window.addEventListener("resize",(function(){return e.hide()}));var t=0;window.addEventListener("wheel",(function(){clearTimeout(t),t=setTimeout((function(){e.preventCloseOnScroll?e.preventCloseOnScroll=!1:e.hide()}))}),{passive:!0}),window.addEventListener("keydown",(function(t){"Escape"===t.key&&e.hide()})),i.addStylesToDom()}return i.getInstance=function(){i.instance||(i.instance=new i);var e=i.instance;return{attach:e.attach.bind(e),delete:e.delete.bind(e),hide:e.hide.bind(e),show:e.show.bind(e),update:e.update.bind(e)}},i.prototype.attach=function(t,n,i){var r=this;void 0===i&&(i=function(e){return e});var o=document.querySelector(t);if(void 0===this.cache[t])if(o){var a=function(t){var o=i(e(n),t);r.show(o,t)};this.cache[t]={ctxMenu:n,handler:a,beforeRender:i},o.addEventListener("contextmenu",a)}else console.error("target element "+t+" not found");else console.error("target element "+t+" already has a context menu assigned. Use ContextMenu.update() intstead.")},i.prototype.update=function(e,t,n){var i=this.cache[e],r=document.querySelector(e);i&&(null==r||r.removeEventListener("contextmenu",i.handler)),delete this.cache[e],this.attach(e,t||(null==i?void 0:i.ctxMenu)||[],n||(null==i?void 0:i.beforeRender))},i.prototype.delete=function(e){var t=this.cache[e];if(t){var n=document.querySelector(e);n?(n.removeEventListener("contextmenu",t.handler),delete this.cache[e]):console.error("target element "+e+" does not exist (anymore)")}else console.error("no context menu for target element "+e+" found")},i.prototype.show=function(t,n){var i=this;n instanceof MouseEvent&&n.stopImmediatePropagation(),this.hide(),this.menu=this.generateDOM(e(t),n),document.body.appendChild(this.menu),this.menu.addEventListener("wheel",(function(){return i.preventCloseOnScroll=!0}),{passive:!0}),n instanceof MouseEvent&&n.preventDefault()},i.prototype.hide=function(e){var t;void 0===e&&(e=this.menu),s="r",u="d",e&&(e===this.menu&&delete this.menu,null===(t=e.parentElement)||void 0===t||t.removeChild(e))},i.prototype.generateDOM=function(e,i){var r=this,s=document.createElement("ul");return 0===e.length&&(s.style.display="none"),e.forEach((function(e){var i=c(e);a(i,(function(){var e,t=null===(e=i.parentElement)||void 0===e?void 0:e.querySelector("ul");t&&t.parentElement!==i&&r.hide(t)})),n(e)&&!d(e)&&(o(e)?a(i,(function(n){i.querySelector("ul")||r.openSubMenu(n,t(e.subMenu),i)})):i.addEventListener("click",(function(){return r.hide()}))),s.appendChild(i)})),s.className="ctxmenu",l(s,i),s.addEventListener("contextmenu",(function(e){e.stopPropagation(),e.preventDefault()})),s.addEventListener("click",(function(e){var t=e.target instanceof Element&&e.target.parentElement;t&&"interactive"!==t.className&&e.stopPropagation()})),s},i.prototype.openSubMenu=function(e,t,n){var i,r=null===(i=n.parentElement)||void 0===i?void 0:i.querySelector("li > ul");r&&r.parentElement!==n&&this.hide(r),n.appendChild(this.generateDOM(t,n))},i.addStylesToDom=function(){var e=function(){if("loading"===document.readyState)return document.addEventListener("readystatechange",e);var t=document.createElement("style");t.innerHTML='html{min-height:100%}.ctxmenu{position:fixed;border:1px solid #999;padding:2px 0;box-shadow:#aaa 3px 3px 3px;background:#fff;margin:0;z-index:9999;overflow-y:auto;font:15px Verdana, sans-serif;box-sizing:border-box}.ctxmenu li{margin:1px 0;display:block;position:relative;user-select:none}.ctxmenu li.heading{font-weight:bold;margin-left:-5px}.ctxmenu li span{display:block;padding:2px 20px;cursor:default}.ctxmenu li a{color:inherit;text-decoration:none}.ctxmenu li.icon{padding-left:15px}.ctxmenu img.icon{position:absolute;width:18px;left:10px;top:2px}.ctxmenu li.disabled{color:#ccc}.ctxmenu li.divider{border-bottom:1px solid #aaa;margin:5px 0}.ctxmenu li.interactive:hover{background:rgba(0, 0, 0, .1)}.ctxmenu li.submenu::after{content:"";position:absolute;display:block;top:0;bottom:0;right:.4em;margin:auto .1rem auto auto;border-right:1px solid #000;border-top:1px solid #000;transform:rotate(45deg);width:.3rem;height:.3rem}.ctxmenu li.submenu.disabled::after{border-color:#ccc}',document.head.insertBefore(t,document.head.childNodes[0]),e=function(){}};e()},i}().getInstance();
+/*! ctxMenu v1.5.0 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/window.ctxmenu=m}();
diff --git a/resources/favicon.png b/resources/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..082a5b2c022f7c056e9d826eaf2dda41a4024f7c
GIT binary patch
literal 3975
zcmZ`+cQhM-^G_l{t=coTmRPY>kOV<$uU3t!qC>5!S&FDu1+`V}G*(fwYSoTiv(&1s
zHA~dq{rSG%U%&T#zkBcQ^KQJmd++Z4IJ}9GE<Fu54FCY3zlp_|T_Wy3Oig(yNyz)(
zE&=FermG1k9e}P~D&R*Nh8h4sMJ(;veaNML<tf(63jknf{SO0c<6SlZfUD4(7!3=5
zyUoliwr{QYyF#SiNlyCp$YBkuO?`W$ZN>!YbQZLuWx}`|)5h&(9RE0SC31xeK8e<#
zv-?`1`&!b}mrYMF`S8rRfIcU1V|Huv`M}|BUG`~)SIV!mEU$~7Dya<t`!vk^4&qtY
z#I<SAzp=oNP#7Rt7(#fK3$Tb`#r4L6OjOJO;=2FkG>ZA&+Hv>cPtmT9x~Tkiz<YM-
zhLgWBg&Y`j7lVnM$Gr~_2CNl}JDGP7K@~D8a!)cI>(Swy*UX|E82X^_G;86M|5IqV
zm}#OgQMfk+E@)jZeEs5DR(rF3EV#XLrS{R4T0cc7-t+Gw@48@t4#5sm-X16re&8%<
zeR6HlNTGU*zI~F%wAS}f_T^x>kf2V^Jz-<vMnLGTjs#BB1Q&ATbbd(A5A2=_8gCkq
zk#G{66@1PU`2~n&+-O>VLqIj*+`_DhmOF?@WzbD(n`H(KkMU`%$Q|yYZ4eeL-{sxu
zWNcX{(h&Y+8qM4qZOSX_lN7ZY&sfBS7N<~E#z>tWV)Tg!;E=(*YDk1F4OoYTYQpzA
zG`sJBt)#|WAe$?aT^g70j=j9Zmf5F7kKiV6gZwxpHxbBkrnJdX(h%ja2>9un*&Y@r
zL4JV&+i7+WqoK1tPzg(N%LLcPaE}+;%Qn6UkKqg}zRh2fE#15NE&ck+Lk)9KC{3Mk
zfI`^Ax0Hsn98&v4Y90aD1y?;oYOD)WJW*FZV^bV2u}|a_j>F8ae+gd!EBs#CVvzYP
zCT6{kF||YA!E#<qgxFP8hQABd`%;X5hcHb7L^Kafvs$K^R_yT@#TA)k0NiH-g-R82
z0*)OP^)khb05#HYoF7mnRVOLoh}hr*Xkg5%h}&cD)5W)%(Gsl3Kf912u+qxTzE>|l
ztZT=E{IlXjN-K4Kv*6?)_VIHDwhs(79V%<hL?c;odD=+NWW~XIPmnfZOdVHn%xX!3
zqe&cQfZn#={IuI^3vXlxJCYHm835OkZxIsx)FGV0rK9*o@X&zWE*(E4x-|UN|91V!
zt%&HQuR7eD)~Kt+$Z?FV8pS(+(VcVEuSs95{|&x&;gh>99?1xxzc~1kXp-~Hc{ou~
z;rx`WB5J*UZIBk1e=eM!PsnrA9?szk4y0h>3bw2ojT*Lq@Y6MgmEHcsT;iwoqt)k`
z37df*iY?Jh{l1;9`_)0pSqYGgM||_+-)_GSo=ScA8nSjmK}<e<pPo*{egF|4_*+~9
zaGzx*zF_2kz&SqH-VT2Ir?@TfrNq>ia&2UF5*POmY8+)VIqBY0*mmS<PY`tdc1N6D
zzihNrlub&k#<<dcyF|Da8wksLMi@!aHr^U(DWy5_@ob;B>yJY<t0W}YeJ~tBbY~CR
zHjre*tN{w!BPpA&mI!2e#1VPC^i>uwx5H@57?JA6b0nRY<sZzB1ZhlI%<M97u4IOG
zCH`Bv{hCtyY%FuxFQk%UZ%&k#x__M?t9r}pZ#DD#{W=)+;7AMwN3NI-Kw&i-J`*~?
zGER*D>GxiCoa3-`j=hXKeEn80A&6GhpPnobfJ?8*k?~w6*D^8Tj~-nijz9g?gJw+j
zyw+gg6f4qTVBoMRqE^ctll!PM@n=nu3G=4S)M8Y{j7fFUHF8uil<E+MS~{9^iFjU=
z9#ZT8(%AZ3ZNGHVtS#YT-ee$K<!;M!&)-+;R(v+rNysOAkt81%o3*-y*5{&@lhaEP
zYny4jvc>zIGW)%Zm+%4q*N-Eu;}A0dBKM9dtwNE_Tb>ubiX*h<Te_VD%Fk5931)j&
zEO0eKll}O3KKA${eL7H%d_&rDin+9pKI7b(pN~fAdM>~l@Y>sXNO#WzvT|LC$dUT#
zg*8J!Raq<<MUGv3_Zm~S5DyvxG93Jn$@TN{?qQtTr@avdaq(U1EZH;HFS3w)%^<ZY
z<6(`m_)dbYPioKzycx<QkLAc-j*?Nm<=x$aziSzW+cTatyOx`p+sS+Wm<P*z32$UP
zo}flc?d<lr8DKc5$y_zfNv%Tfuk|ez)@bM5YJr_$bK5#k{y>H|_O0tPH++zdN4c7l
zi;r!a5l!cxu5vedNCnV`v7(g<Z<Rprjdanu3kS4Ns4X>wXgPUH+C}o}){xcPkjocR
zJCk8yqMFb7HNx))sk)qv7mHdWMp+x{VxK`wOhT-b<mJtmci7r+?r*iP9x0%*DF2yC
z+KGrn&a(1hI^>va+bZuJ3eMZdts3IFMvEO^J3H1B9VJLms{#XHd8=_W!&o|XLPEmd
zKhHtUIWQ{E4R;0PaR7z;bd1Bf2P%Eu(?Biz%5C=>xDsH2HoR6Bt&dL$q}p4bFxgw?
z>t$`(#k^0cS{ghN65CT^zi6QPHnvH!FZ)4V|ANQ!FTB0j<IS`t4dm1n8NGkeg@Kz?
zJ=IWf`quimI)l#JO(?*N>bEp70D5NevTV9Fa*knpI@mSiVGpm~zwghsi|1rNO})2E
ze{3p)f^&HND`!(XsbOwB(d7<Rc~zM(xv*U*F;TwBkBrLYj$U4d0rOhb)9+6Y`8F8O
zVS$`+ETQ)&Bpo15!nvBI3vcf7%KS!22f(=!K|`RTbwh1S3NL99=*8E;`L92KwWsqH
ztB_rWB7&$qO+lcq7T)26mRBG67(HpG{d{#S?~A%ly~=%}uI}FY9`K}IVG+oy2WFEb
z99JlmX;rr$G=|!O$KCV!gN(U4q}|qch|EE+V;*R9s}jHr$v*pDo;bJu$cDR>{`Z$x
zntwGlr53`Z?=`>iUuM2&ItOb`?#GW<b`*T+syBmGJ^hHU2>aPKn_syKX%pgG>@F-m
zx+nm=3ZLO<gmu4UR3FZ_;$42H;@CeOD@zD;Y?2<CXMyajggs!QWtFzT9o9UyV42OX
z-J$1qYKZs9&NSq=fY*{&wfk)95_Q?k3m@L1EJ@F`;56++r(l5%lqEIiUl9%qDHJl@
zUtqCgroZ44Sg2ELNIwQWi9DT3PQ_NC!Vk8>MAcfV<_l&f(ihsz^@J4v5w7RUk>bDw
z61f05^oAstU2!vSr+JNcin$cOdiVHT6FkmpQ?%k&O5=;C1K^qVU5>SQ6f;fTGghH2
z*-}+&m9b^n5VsE)X1u-Zsmjj_BNPeORP0PTGzp&+sn;x1YFWA5S52#aqovt^Rpx{9
zOg^E0w~tOy2OIrq)9J>4!Svvg4Wv!XJdI7D7HP|~Ihzg{&=3G|r%vdYEpbzC5^;JZ
zd8YEsZ+k7HN#ADm(T%a3TC{mJT^@!y#P%P`AATk*we2)|tMxfVZVORexisdBcYtl2
zkyh^n7w|jy2_0{c+hVvPloZA7m)q@J*<lPLbSr~d&77e<pOqJ&fdk?eXG#W!hPBiu
z-oEyw1zZoMX9hmM?ddTH+N)Opc~KgkO7T8vb@A`2YApy&+u3~RKKV%T2wdkGBBwm?
zdkJ!b2b$$<_0gt_2K8c%(xp1riHdu5=~3Bk#KKXT^1OzV!PNW)=oT$O(#AYp1{K`4
zeUN(Q8e52@zQGx7<EJ>MW2CQj2O|;?eJ7eEsx>K)=W$G&3gvG;j)2QgUR!im=<g%u
zsai<j68^aRm6!EWHdF8r_P$F_HE5`uMt`t!BMk2IHA<S#W=E6sen*lVaV+AMj~q3V
zK?D{A(mo93e&?$}@P4jUGYLMw#{=P=(lp;&UEA2^*yT2ZS>|(Qytg#TJl;#IO|E+_
z4nY@MP8Asj`-t=WQwzO3dM~vju;CA<ys~M3MqQ%<eyqlDW2kysi!Dt{`DnQ`NvnZt
zeDq=lI-FehtbVFiBYeJa_kJH=ZJQruo>}4~1*?c0y9EqTSyb~!tz&naOS}BZfr<Z%
z)m(WdHGEL#`9XTk$RVZ4Z{rz+8G!Q9a>C}eUDewtft(Jb`_uTXOmANtOFvlk;9g6P
zDC`u}Q&zCK$YuU59P<Sv&|Q<Ch**sdjTRz6)voz@3xX;k19$0+^*KZ<vbFN=bx6Hk
zf~OQ)175|FnYK>isXtCBv-Pf@%LD=7XWeTv+@yD)-aV!y&HO!CbsmZ$4uHn#(MgQe
z0D0^(<$18nGJ_V<>oXLO!z4+%((AFSM@RPGc1QDLfz)DG$p{Bo_nE+?o8YRFpMJ-W
zlgcIA$H{-tzUYoh7*L>6g?aLjha?#PiWN<1bhoxun-Ln2UVt<IuzPl98L$({>!yu%
z2^k4j{JwbTIcPWEf=bzE9_wc?1C(j-Anxi)cUF8Jm&4=4L(VMyiKTCoZ^x_EpTefz
zTN|<txQ0F!zQHHW2E)~$1CImzB|A&QG@KPrG4vai+cvW7QanFK?||La(+F<6dniZ0
zy*|Z^D>NKZBw@%l+{Cx6c_p?1B$h+nn<Uwbna4{H_<W}0H08@y3SyT?Slr=N4`ORl
zHJ0NMI6tL(%Zg@?eqYTlq0EQY)O47tH>8~Qpw)Fi*IfT64nmxLNK91!%<p=13WL57
z+D2%W%^82DiUz^}^hd4(51Rs4_J{uNq=w1%mhAJetMf9ijn*nn*DEh;UpGz-y!kZ(
zw!kVS^s@6MD=xgx`hcU!cD^emJld3`lD*$iAdD!$<7ku%t3%oWqINy{;Ubwddf9or
z9i8E<ICjb72mJ7F0qWjrKHeNJ<O@0AxIFVVovY856<;dYn5_D(+s+vjgmJQ%0jw(r
z$eiJZcDp*O{(A(a?Nk(0csgUKWgzV;Qhl{S0HM%(Cmz&IX;D1qGHRw4i60aJiOYC?
zvQ&55hAm-Ns5s?4*l>9KO;bZYtU)&%NkoXHjguUiP*gIGEn;le(yLcBIaQxgb^}8>
zg#Ab3E&!M(pKz{W_s(N>3Q=$YNSu~GthUSH4=R``rF5oa3@6_ppim|NAy9PJkmUoo
zy!Ovzy}uh1l|3$P!eaF`j{lwy_o|w>?`GN<rYfG6or0sj_Ej6lM0s%-;(;<!w*LD|
zyyozT{IOqHKte;TE$F{~OgMUBJELDUPX7OUJu9Orut{{=ArZmiz>IPX4sb~~wT&>P
In)WaM2ZV}U9RL6T

literal 0
HcmV?d00001

diff --git a/resources/registerWithServiceWorker.js b/resources/registerWithServiceWorker.js
new file mode 100644
index 00000000..13592aaa
--- /dev/null
+++ b/resources/registerWithServiceWorker.js
@@ -0,0 +1 @@
+browser.runtime.sendMessage({ purpose: "loaded", url: window.location.href });
diff --git a/resources/shared.css b/resources/shared.css
index cfa91bd5..8f8e77f1 100644
--- a/resources/shared.css
+++ b/resources/shared.css
@@ -1,4 +1,4 @@
-.PegaDevToolsButton {
+/* .PegaDevToolsButton {
 	border: 3px solid;
 	border-radius: 5px;
 	margin-right: 7px;
@@ -14,6 +14,11 @@
 	background: orange;
 }
 
+.PegaDevToolsButtonGrey {
+	border-color: darkgrey;
+	background: darkgrey;
+} */
+
 .pz-pi.pi-clipboard,
 .pi.pi-clipboard,
 .pz-pi.pi-tracer,
@@ -28,6 +33,11 @@
 	border: 1px solid red !important;
 }
 
+.PegaDevToolsTextBlue {
+	color: blue;
+	border: 1px solid blue !important;
+}
+
 /*can be moved to tracer-event.css*/
 .PegaDevToolsTracerCloseBottom {
 	position: absolute;
@@ -71,23 +81,23 @@ div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle {
 }
 
 .right {
-	transform: rotate(-45deg);
 	-webkit-transform: rotate(-45deg);
-}
+	transform: rotate(-45deg);
+}	
 
 .left {
-	transform: rotate(135deg);
 	-webkit-transform: rotate(135deg);
+	transform: rotate(135deg);
 }
 
 .up {
-	transform: rotate(-135deg);
 	-webkit-transform: rotate(-135deg);
+	transform: rotate(-135deg);	
 }
 
 .down {
-	transform: rotate(45deg);
 	-webkit-transform: rotate(45deg);
+	transform: rotate(45deg);
 }
 
 .rightPill {
@@ -120,6 +130,10 @@ div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle {
 	background-color: green;
 }
 
+.greyPDT button {
+	background-color: darkgrey;
+}
+
 /*** 3-column layout ***/
 
 .PDTcolumn {
@@ -178,4 +192,42 @@ div#PDTTracerIndicator button {
 
 .margin-bottom-small {
 	margin-bottom: 4px;
+}
+
+.PDTdropdown {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	background-color: whitesmoke;
+	overflow: auto;
+	min-width: 160px;
+	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+	overflow-y: scroll;
+	height: 400px;
+}
+
+.PDTdropdown a {
+	color: black;
+	padding: 2px;
+	text-decoration: none;
+	display: block;
+}
+
+.PDTdropdown a:hover {
+	background-color: #ddd;
+}
+  
+.initiallyHidden {
+	display: none;
+}
+
+.pulse {
+	animation-duration: 2s;
+  	animation-name: fadeInOut;
+  	animation-iteration-count: 2;
+}
+
+.pulse2 {
+	transition: background-color 0.5s ease;
+	background-color: darkseagreen !important;
 }
\ No newline at end of file
diff --git a/resources/shared.js b/resources/shared.js
index 1bd17c5f..40ac211c 100644
--- a/resources/shared.js
+++ b/resources/shared.js
@@ -1,32 +1,237 @@
 console.log("PDT: resources/shared.js");
 
+browser = window.browser || window.chrome;
+
+// //TODO: deprecated?
+// window.browser = (function () {
+// 	return window.msBrowser || window.browser || window.browser;
+// })();
+
+class PDT {
+	static {
+	}
+
+	static init() {
+		this.settings = {};
+		
+		browser.storage.sync.get(["settings", "siteConfig"], (data) => {
+			//this.settings = await getObjectFromLocalStorage("settings");
+
+			this.settings = data.settings;
+			if(typeof this.settings === "undefined") this.settings = {};
+			if(typeof this.settings.tracer === "undefined") this.settings.tracer = {};
+			if(typeof this.settings.clipboard === "undefined") this.settings.clipboard = {};
+			if(typeof this.settings.devstudio === "undefined") this.settings.devstudio = {};
+			
+			//var siteConfigs = await getObjectFromLocalStorage("siteConfig");
+
+			this.hasConfigForSite = false;
+			if (data.siteConfig) {
+				for (let i = 0; i < data.siteConfig.length; i++) {
+					if (window.location.href.includes(data.siteConfig[i].site)) {
+						this.siteConfig = data.siteConfig[i];
+						this.hasConfigForSite = true;
+						if(this.siteConfig.color) {
+							this.siteConfig.color = this.siteConfig.color.replace("#", '');
+							if (this.siteConfig.color.length === 3) {
+								this.siteConfig.color = this.siteConfig.color.split('').map((hex) => {
+									return hex + hex;
+								}).join('');
+							}
+							if(this.siteConfig.color[0] != "#") 
+								this.siteConfig.color = "#" + this.siteConfig.color;
+						}
+						break;
+					}
+				}
+			}
+
+			document.arrive("body", { onceOnly: true, existing: true}, (elem) => {
+				let skip = PDT.shouldSkipContentForDocument(elem);
+				if(!skip)
+					elem.setAttribute("data-PDTSettings", "loaded");
+				else
+					PDT.debug("skipped data-PDTSettings");
+			});
+
+			PDT.debug("storage settings load");
+
+		});
+	}
+
+	save() {
+		browser.storage.sync.set({ settings: this.settings });
+	}
+
+	get(key) {
+		return this.settings[key];
+	}
+
+	static isTracerEnabled() {
+		return !(this.settings.tracer.disabled);
+	}
+
+	static isClipboardEnabled() {
+		return !(this.settings.clipboard.disabled);
+	}
+
+	static isDevstudioEnabled() {
+		return !(this.settings.devstudio && this.settings.devstudio.disabled);
+	}
+
+	static isAgilestudioEnabled() {
+		return (this.settings.agilestudio && this.settings.agilestudio.enabled);
+	}
+
+	static isDeploymentManagerEnabled() {
+		return (this.settings.deploymentmanager && this.settings.deploymentmanager.enabled);
+	}
+
+	static isDebugEnabled() {
+		return this.settings.debug;
+	}
+
+	static isInTracer() {
+		return (window.location.href.includes("Tracer"));
+	}
+	
+	static hasConfigForSite;
+
+	static debug(msg) {
+		if(this.isDebugEnabled()) console.log(msg);
+	}
+
+	static log(msg) {
+		console.log(msg);
+	}
+
+	static isDigit(n) {
+		return !!([!0, !0, !0, !0, !0, !0, !0, !0, !0, !0][n]);
+	}
+
+	static contrastTextColor(backgroundColor) {
+		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+		const getColorLuminance = function(clr) {
+			clr = clr / 255;
+			if(clr <= 0.03928) 
+				return clr / 12.92;
+			else
+				return ((clr + 0.055) / 1.055) ** 2.4;
+		}
+
+		backgroundColor = backgroundColor.replace("#", "");
+		let r = parseInt(backgroundColor.substring(0, 2), 16);
+		let g = parseInt(backgroundColor.substring(2, 4), 16);
+		let b = parseInt(backgroundColor.substring(4, 6), 16);
+		let rs = getColorLuminance(r);
+		let gs = getColorLuminance(g);
+		let bs = getColorLuminance(b);
+	  
+		let L =  (0.2126 * rs) + (0.7152 * gs) + (0.0722 * bs);
+
+		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+		//const contrastThreshold = 0.0525; 	// 0.0525 is contrast ratio between white and black 
+		const contrastThreshold = 0.3; 		// favor more lighter text	 
+
+		return (L > contrastThreshold) ? "#000000" : "#FFFFFF";
+	}
+
+	static tabColorCoding = new Map([
+		['RULE-HTML-SECTION', 'green'],
+		['RULE-OBJ-ACTIVITY', 'red'],
+		['RULE-OBJ-MODEL', 'blue'],
+	  ]);
+
+
+	static alterFavicon(forceSmall = false, forceLargeLabel = "", forceColor = "") {
+		//favicon fallback
+		let favicon = document.querySelector("link[rel~='icon']");
+		if (!favicon) {
+			favicon = document.createElement('link');
+			favicon.rel = 'icon';
+			favicon.href = "images/pzPegaIcon.ico";
+			favicon.name = "faviconFallback"
+			document.getElementsByTagName('head')[0].appendChild(favicon);
+		}
+
+		if(this.hasConfigForSite || forceColor) {
+			if(forceLargeLabel || (this.settings.favicon == "large" && this.siteConfig.label && !forceSmall)) {
+				Tinycon.setOptions({
+					width: 16,
+					height: 16,
+					background: (forceColor || this.siteConfig.color),
+					color: this.contrastTextColor(forceColor || this.siteConfig.color),
+					fallback: true
+				});
+				let faviconLabel = forceLargeLabel;
+				if(!faviconLabel) {
+					faviconLabel = this.siteConfig.label[0];
+					if(this.siteConfig.label.length>1) {
+						if(PDT.isDigit(this.siteConfig.label.slice(-1)))
+							faviconLabel += this.siteConfig.label.slice(-1);
+					}
+					if(faviconLabel.length == 1)
+						faviconLabel += " ";
+				}
+				Tinycon.setBubble(faviconLabel);
+			} else {
+				Tinycon.setOptions({
+					width: 16,
+					height: 3,
+					background: this.siteConfig.color,          
+					fallback: true
+				});
+				Tinycon.setBubble(" ");
+			}
+		}
+	}
+
+	static setScriptsApplied() {
+		if(!document.querySelector("input#PDTContent"))
+			document.querySelector("div[data-node-id='RuleFormHeader'], body").insertAdjacentHTML("beforeend",'<input type="hidden" id="PDTContent" value="loaded" />');
+	}
+
+	//TODO: not really working, probably CKE starts with empty body
+	static shouldSkipContentForDocument(document){ 
+		//CKE editor loads a body element which causes hidden input to be appended to paragraph source
+		let skip = false;
+		document.classList.forEach((className) => { if(className.includes("cke")) skip = true; });
+		if(skip) {
+			if(document.querySelector("body"))
+				document.querySelector("body").setAttribute("data-PDTskipContent", true);
+			else
+				PDT.debug("could not set data-PDTskipContent");
+		}
+		return skip;
+	}
+}
+if(typeof PDT.settings ===  "undefined")
+	PDT.init();
+
 function getFrameId() {
-	chrome.runtime.sendMessage({ purpose: "getFrameId" }, function (response) {
+	browser.runtime.sendMessage({ purpose: "getFrameId" }, function (response) {
 		console.log("FrameId: " + response.frameId);
 		return response.frameId;
 	});
 }
 
-function applyContentScripts(purpose) {
-	chrome.runtime.sendMessage(
-		{ purpose: purpose, tabId: getCurrentTabId() },
-		function (response) {
-			console.log(response);
-		}
-	);
-}
+// function applyContentScripts(purpose) {
+// 	browser.runtime.sendMessage(
+// 		{ purpose: purpose, tabId: getCurrentTabId() },
+// 		function (response) {
+// 			console.log(response);
+// 		}
+// 	);
+// }
 
 const injectScriptsToIframe = (tabId, frameId, scriptList) => {
 	scriptList.forEach((script) => {
 		console.log(
-			"PDT executeScript tabId: " +
-				tabId +
-				", frameId: " +
-				frameId +
-				": " +
-				`${script}`
+			"PDT executeScript tabId: " + tabId +
+			", frameId: " + frameId +
+			": " + `${script}`
 		);
-		chrome.tabs.executeScript(
+		browser.tabs.executeScript(
 			tabId,
 			{
 				file: `${script}`,
@@ -35,48 +240,16 @@ const injectScriptsToIframe = (tabId, frameId, scriptList) => {
 				//If the script injection fails (without the tab permission and so on) and is not checked in the callback` runtime.lastError `，
 				//It's a mistake. There is no other complicated logic in this example. You don't need to record the tab of successful injection. You can fool it like this.
 			},
-			() => void chrome.runtime.lastError
+			() => void browser.runtime.lastError
 		);
 	});
 };
 
-//applyContentScripts("paragraphRule");
-
-const paragraphScriptList = [
-	"resources/codemirror/codemirror.js",
-	"resources/codemirror/foldcode.js",
-	"resources/codemirror/foldgutter.js",
-	"resources/codemirror/brace-fold.js",
-	"resources/codemirror/indent-fold.js",
-	"resources/codemirror/comment-fold.js",
-	"resources/codemirror/xml-fold.js",
-	"resources/codemirror/matchtags.js",
-	"resources/codemirror/closetag.js",
-	"resources/codemirror/fullscreen.js",
-	"resources/codemirror/active-line.js",
-	"resources/codemirror/xml.js",
-	"resources/codemirror/javascript.js",
-	"resources/codemirror/css.js",
-	"resources/codemirror/htmlmixed.js",
-	"devstudio/devstudio_paragraph.js",
-];
-
-//injectScriptsToIframe(null, getFrameId(), paragraphScriptList);
-
-//TODO: deprecated?
-window.browser = (function () {
-	return window.msBrowser || window.browser || window.chrome;
-})();
-
 const DEBUG = false;
 
-if (
-	$(
-		'body[class^="channels-express"] div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle'
-	).length
-) {
+if ($('body[class^="channels-express"] div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle').length) {
 	//change order to match Dev Studio
-	var tracerRef = $(
+	let tracerRef = $(
 		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-tracer)'
 	);
 	$(
@@ -97,8 +270,8 @@ if (
 
 var copyToClipboard = function copyToClipboard(textContent) {
 	// create hidden text element, if it doesn't already exist
-	var targetId = "_hiddenCopyText_";
-	var target = document.createElement("textarea");
+	let targetId = "_hiddenCopyText_";
+	let target = document.createElement("textarea");
 	target.style.position = "absolute";
 	target.style.left = "-9999px";
 	target.style.top = "0";
@@ -107,12 +280,12 @@ var copyToClipboard = function copyToClipboard(textContent) {
 	target.textContent = textContent;
 
 	// select the content
-	var currentFocus = document.activeElement;
+	let currentFocus = document.activeElement;
 	target.focus();
 	target.setSelectionRange(0, target.value.length);
 
 	// copy the selection
-	var succeed;
+	let succeed;
 	try {
 		succeed = document.execCommand("copy");
 	} catch (e) {
@@ -128,7 +301,7 @@ var copyToClipboard = function copyToClipboard(textContent) {
 };
 
 function messageServiceWorker(purpose) {
-	chrome.runtime.sendMessage(
+	browser.runtime.sendMessage(
 		{ purpose: purpose }
 	); 
 }
@@ -137,7 +310,7 @@ function messageServiceWorker(purpose) {
 function appendScript(appendedScript) {
 	if(PDT.isDebugEnabled)
 		console.log("PDT: appendScript: " + appendedScript);
-	chrome.runtime.sendMessage(
+	browser.runtime.sendMessage(
 		{ purpose: "appendScript", appendedScript: appendedScript },
 		function (response) {
 			console.log(response);
@@ -146,7 +319,7 @@ function appendScript(appendedScript) {
 }
 
 function injectScript(aBasePath, aScriptURL) {
-	chrome.runtime.sendMessage(
+	browser.runtime.sendMessage(
 		{ purpose: "injectScript", injectedScript: aBasePath+aScriptURL },
 		function (response) {
 			console.log(response);
@@ -163,52 +336,32 @@ function injectCloseShortcut() {
 	injectScript("/js/", "closeShortcut.js");
 }
 
-// deprecated?
+//TODO: deprecated?
 function executeScript(injectedCode) {
-	var scriptEl = document.createElement("script");
+	let scriptEl = document.createElement("script");
 	scriptEl.appendChild(document.createTextNode("(" + injectedCode + ")();"));
 	(document.body || document.head || document.documentElement).appendChild(
 		scriptEl
 	);
 }
 
-function extractClassName(sinput, getFull) {
-	if (sinput) {
-		var idx = sinput.indexOf("(");
-		sinput = sinput.substring(idx != -1 ? idx + 1 : 0);
-		if (sinput[sinput.length - 1] === ")")
-			sinput = sinput.substring(0, sinput.length - 1);
-		if (getFull) return sinput;
-		if (sinput.includes("Work-")) sinput = sinput.split("Work-")[1];
-		else if (sinput.includes("Assign-")) sinput = sinput.split("Assign-")[1];
-		else if (sinput.includes("-")) {
-			var sinputLength = sinput.split("-").length;
-			sinput = (sinputLength>3)? sinput.split("-")[sinputLength - 2] + "-" + sinput.split("-")[sinputLength - 1] : sinput.split("-")[sinputLength - 1];
+function extractClassName(sInput, getFull) {
+	if (sInput) {
+		let idx = sInput.indexOf("(");
+		sInput = sInput.substring(idx != -1 ? idx + 1 : 0);
+		if (sInput[sInput.length - 1] === ")")
+			sInput = sInput.substring(0, sInput.length - 1);
+		if (getFull) return sInput;
+		if (sInput.includes("Work-")) sInput = sInput.split("Work-")[1];
+		else if (sInput.includes("Assign-")) sInput = sInput.split("Assign-")[1];
+		else if (sInput.includes("-")) {
+			let sInputLength = sInput.split("-").length;
+			sInput = (sInputLength>3)? sInput.split("-")[sInputLength - 2] + "-" + sInput.split("-")[sInputLength - 1] : sInput.split("-")[sInputLength - 1];
 		}
-		return sinput;
+		return sInput;
 	}
 }
 
-var showElem = function (elem) {
-	//show an element
-	elem.style.display = "block";
-};
-
-var hideElem = function (elem) {
-	//hide an element
-	elem.style.display = "none";
-};
-
-var toggleElem = function (elem) {
-	//toggle element visibility
-	if (window.getComputedStyle(elem).display === "block") {
-		// if the element is visible, hide it
-		hide(elem);
-		return;
-	}
-	show(elem); //otherwise show it
-};
-
 function injectStyles(rule) {
 	$("<div />", {
 		//html: '&shy;<style>' + rule + '</style>'
@@ -224,10 +377,10 @@ function replaceInnerHTML(elem, html) {
 
 function siteConfig(callback) {
 	//get label and color config
-	chrome.storage.sync.get(["siteConfig", "settings"], (data) => {
+	browser.storage.sync.get(["siteConfig", "settings"], (data) => {
 		console.log(data);
 		//find config for current url
-		var configForSiteFound = false;
+		let configForSiteFound = false;
 		if (data.siteConfig) {
 			for (let i = 0; i < data.siteConfig.length; i++) {
 				if (window.location.href.includes(data.siteConfig[i].site)) {
@@ -248,7 +401,7 @@ function siteConfig(callback) {
 
 //TODO: ugly, try not to use it
 function sleep(milliseconds) {
-	var start = new Date().getTime();
+	let start = new Date().getTime();
 	while (new Date() < start + milliseconds) {}
 	return 0;
 }
@@ -269,7 +422,7 @@ function isInDevStudio() {
 }
 
 function injectRuleExport() {
-	var selection = document.querySelector("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links");
+	let selection = document.querySelector("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links");
 	if(selection) {
 		selection.insertAdjacentHTML("beforeend", "<a onclick='copyRuleTableContent()'>Export</a>");
 		injectScript("/js/", "copyRuleTableContent.js");
@@ -279,7 +432,7 @@ function injectRuleExport() {
 const getObjectFromStorage = async function (key) {
 	return new Promise((resolve, reject) => {
 		try {
-			chrome.storage.sync.get(key, function (value) {
+			browser.storage.sync.get(key, function (value) {
 				resolve(value[key]);
 			});
 		} catch (ex) {
@@ -288,154 +441,17 @@ const getObjectFromStorage = async function (key) {
 	});
 };
 
-class PDT {
-
-	static {
-
-	}
-
-	static init() {
-		this.settings = {};
-		
-		chrome.storage.sync.get(["settings", "siteConfig"], (data) => {
-			//this.settings = await getObjectFromLocalStorage("settings");
-
-			this.settings = data.settings;
-			if(! this.settings.tracer) this.settings.tracer = {};
-			if(! this.settings.clipboard) this.settings.clipboard = {};
-			if(! this.settings.devstudio) this.settings.devstudio = {};
-			PDT.debug("storage settings load");
-
-			//var siteConfigs = await getObjectFromLocalStorage("siteConfig");
-
-			this.hasConfigForSite = false;
-			if (data.siteConfig) {
-				for (let i = 0; i < data.siteConfig.length; i++) {
-					if (window.location.href.includes(data.siteConfig[i].site)) {
-						this.siteConfig = data.siteConfig[i];
-						this.hasConfigForSite = true;
-						if(this.siteConfig.color) {
-							this.siteConfig.color = this.siteConfig.color.replace("#", '');
-							if (this.siteConfig.color.length === 3) {
-								this.siteConfig.color = this.siteConfig.color.split('').map(function (hex) {
-									return hex + hex;
-								}).join('');
-							}
-							if(this.siteConfig.color[0] != "#") 
-								this.siteConfig.color = "#" + this.siteConfig.color;
-						}
-						break;
-					}
-				}
-			}
-		});
-	}
-
-	save() {
-		chrome.storage.sync.set({ settings: this.settings });
-	}
-
-	get(key) {
-		return this.settings[key];
-	}
-
-	static isTracerEnabled() {
-		return !(this.settings.tracer.disabled);
-	}
-
-	static isClipboardEnabled() {
-		return !(this.settings.clipboard.disabled);
-	}
-
-	static isDevstudioEnabled() {
-		return !(this.settings.devstudio && this.settings.devstudio.disabled);
-	}
-
-	static isAgilestudioEnabled() {
-		return (this.settings.agilestudio && this.settings.agilestudio.enabled);
-	}
-
-	static isDeploymentManagerEnabled() {
-		return (this.settings.deploymentmanager && this.settings.deploymentmanager.enabled);
-	}
-
-	static isDebugEnabled() {
-		return this.settings.debug;
-	}
-
-	static isInTracer() {
-		return (window.location.href.includes("Tracer"));
-	}
-	
-	static hasConfigForSite;
-
-	static debug(msg) {
-		if(this.isDebugEnabled()) console.log(msg);
-	}
-
-	static isDigit(n) {
-		return !!([!0, !0, !0, !0, !0, !0, !0, !0, !0, !0][n]);
-	}
-
-	static contrastTextColor(backgroundColor) {
-		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-		const getColorLuminance = function(clr) {
-			clr = clr / 255;
-			if(clr <= 0.03928) 
-				return clr / 12.92;
-			else
-				return ((clr + 0.055) / 1.055) ** 2.4;
+browser.runtime.onMessage.addListener(function(msg) {
+	if(msg.purpose == "PingContent") {
+		if (document.querySelector("input#PDTContent")) {
+			//messageServiceWorker('OK');
 		}
-
-		backgroundColor = backgroundColor.replace("#", "");
-		var r = parseInt(backgroundColor.substring(0, 2), 16);
-		var g = parseInt(backgroundColor.substring(2, 4), 16);
-		var b = parseInt(backgroundColor.substring(4, 6), 16);
-		var rs = getColorLuminance(r);
-		var gs = getColorLuminance(g);
-		var bs = getColorLuminance(b);
-	  
-		var L =  (0.2126 * rs) + (0.7152 * gs) + (0.0722 * bs);
-
-		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-		//const contrastThreshold = 0.0525; 	// 0.0525 is contrast ratio between white and black 
-		const contrastThreshold = 0.3; 		// favor more lighter text	 
-
-		return (L > contrastThreshold) ? "#000000" : "#FFFFFF";
-	}
-
-	static alterFavicon(forceSmall = false, forceLargeLabel = "", forceColor = "") {
-		if(this.hasConfigForSite || forceColor) {
-			if(forceLargeLabel || (this.settings.favicon == "large" && this.siteConfig.label && !forceSmall)) {
-				Tinycon.setOptions({
-					width: 16,
-					height: 16,
-					background: (forceColor || this.siteConfig.color),
-					color: this.contrastTextColor(forceColor || this.siteConfig.color),
-					fallback: true
-				});
-				let faviconLabel = forceLargeLabel;
-				if(!faviconLabel) {
-					faviconLabel = this.siteConfig.label[0];
-					if(this.siteConfig.label.length>1) {
-						if(PDT.isDigit(this.siteConfig.label.slice(-1)))
-							faviconLabel += this.siteConfig.label.slice(-1);
-					}
-					if(faviconLabel.length == 1)
-						faviconLabel += " ";
-				}
-				Tinycon.setBubble(faviconLabel);
-			} else {
-				Tinycon.setOptions({
-					width: 16,
-					height: 3,
-					background: this.siteConfig.color,          
-					fallback: true
-				});
-				Tinycon.setBubble(" ");
-			}
+		else if(document.querySelector("body") && document.querySelector("body").hasAttribute("data-PDTskipContent")) {
+			//messageServiceWorker('OK');
+		}
+		else {
+			console.log("PDT requesting content script reload");
+			messageServiceWorker('reloadContentScripts');
 		}
 	}
-}
-
-PDT.init();
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/settings.html b/settings.html
index cb326780..1c133c7b 100644
--- a/settings.html
+++ b/settings.html
@@ -180,6 +180,27 @@ <h3>
 					</span>
 				</label>
 				<br />
+				<input type="checkbox" id="devstudioMouseScrollTabs" data-pdt-setting-name="mouseScrollTabs" />
+				<label for="devstudioMouseScrollTabs" class="tooltip">Scrollable tab list
+					<span class="tooltipText">
+						Allows to scroll through tabs using the mouse wheel they no longer fit
+					</span>
+				</label>
+				<br />	
+				<input type="checkbox" id="devstudioUseTabMenu" data-pdt-setting-name="useTabMenu" />
+				<label for="devstudioUseTabMenu" class="tooltip">Use tab menu
+					<span class="tooltipText">
+						Tab menu allows you to rearrange and mark tabs
+					</span>
+				</label>
+				<br />	
+				<input type="checkbox" id="devstudioTabColorCoding" data-pdt-setting-name="tabColorCoding" />
+				<label for="devstudioTabColorCoding" class="tooltip">Tab color coding
+					<span class="tooltipText">
+						Color tabs based on rule type
+					</span>
+				</label>				
+				<br />								
 				<input type="checkbox" id="devstudioExpandTabOnHover" data-pdt-setting-name="expandTabOnHover" />
 				<label for="devstudioExpandTabOnHover" class="tooltip">Expand rule names in tab on hover (BETA)
 					<span class="tooltipText">
diff --git a/settings.js b/settings.js
index 99d73cd8..e96936d5 100644
--- a/settings.js
+++ b/settings.js
@@ -1,14 +1,15 @@
+browser = (window.browser)? window.browser : window.chrome;
 
 // Saves options to browser.storage
 function saveSiteConfig() {
   let siteConfig = new Array();
-  $("div#siteRow").each(function (index, element) {
-    var site = $(this).find("input#site")[0].value;
+  $("div#siteRow").each(function (_index, _element) {
+    let site = $(this).find("input#site")[0].value;
     if(site) {
-      var label = $(this).find("input#label")[0].value;
-      var useColorTop = $(this).find("input#useColorTop")[0].checked;
-      var color = $(this).find("button#color")[0].innerText;
-      var version = $(this).find("select#version")[0].value;
+      let label = $(this).find("input#label")[0].value;
+      let useColorTop = $(this).find("input#useColorTop")[0].checked;
+      let color = $(this).find("button#color")[0].innerText;
+      let version = $(this).find("select#version")[0].value;
 
       siteConfig.push({ site: site, label: label, color: color, useColorTop: useColorTop, version: version });
     } else {
@@ -21,7 +22,7 @@ function saveSiteConfig() {
     siteConfig: siteConfig
   }, function () {
     //update status to let user know options were saved
-    var status = document.getElementById('status');
+    let status = document.getElementById('status');
     status.textContent = 'Site configuration saved';
     setTimeout(function () {
       status.textContent = '';
@@ -50,6 +51,9 @@ function saveSettings() {
   settings.devstudio.hideCloseButton = document.querySelector("input#devstudioHideCloseButton").checked;
   settings.devstudio.longerRuleNames = document.querySelector("input#devstudioLongerRuleNames").checked;
   settings.devstudio.checkoutIndicator = document.querySelector("input#devstudioCheckoutIndicator").checked;
+  settings.devstudio.mouseScrollTabs = document.querySelector("input#devstudioMouseScrollTabs").checked;
+  settings.devstudio.useTabMenu = document.querySelector("input#devstudioUseTabMenu").checked;
+  settings.devstudio.tabColorCoding = document.querySelector("input#devstudioTabColorCoding").checked;
 
   settings.agilestudio = new Object();
   settings.agilestudio.enabled = document.querySelector("input#enableAgilestudio").checked;
@@ -64,7 +68,7 @@ function saveSettings() {
   browser.storage.sync.set({
     settings: settings
   }, function () {
-    var status = document.getElementById('settingsStatus');
+    let status = document.getElementById('settingsStatus');
     status.textContent = 'Settings saved';
     setTimeout(function () {
       status.textContent = '';
@@ -85,26 +89,36 @@ function restore_options() {
       $("select#version").eq(index).val(element.version);
    });
     
+    if(typeof data.settings === "undefined") data.settings = {};
     document.querySelector("input#debug").checked = (data.settings.debug)?data.settings.debug:false;
     document.querySelector("input#useSiteLabelForBrowserTitle").checked = (data.settings.useSiteLabelForBrowserTitle)?data.settings.useSiteLabelForBrowserTitle:"";
     document.querySelector("input#hideEnvironmentHeader").checked = (data.settings.hideEnvironmentHeader)?data.settings.hideEnvironmentHeader:"";
     document.querySelector("select#favicon").value = (data.settings.favicon)?data.settings.favicon:"small";
+    if(typeof data.settings.clipboard === "undefined") data.settings.clipboard = {};
     document.querySelector("input#clipboardSplit5050").checked = (data.settings.clipboard.split5050)?data.settings.clipboard.split5050:"";
     document.querySelector("input#disableClipboard").checked = (data.settings.clipboard.disabled)?data.settings.clipboard.disabled:"";
+    if(typeof data.settings.tracer === "undefined") data.settings.tracer = {};
     document.querySelector("input#disableTracer").checked = (data.settings.tracer.disabled)?data.settings.tracer.disabled:"";
     document.querySelector("input#tracerPageSort").checked = (data.settings.tracer.pagesort)?data.settings.tracer.pagesort:"";
     document.querySelector("input#tracerSettingsFullscreen").checked = (data.settings.tracer.settingsFullscreen)?data.settings.tracer.settingsFullscreen:"";
     //if(data.settings.tracer.openBehavior) document.getElementById(data.settings.tracer.openBehavior).checked = true;
 
+    if(typeof data.settings.devstudio === "undefined") data.settings.devstudio = {};
     document.querySelector("input#disableDevStudioCustomization").checked = (data.settings.devstudio.disabled)?data.settings.devstudio.disabled:"";
     document.querySelector("input#devstudioCloseTabMiddleClick").checked = (data.settings.devstudio.closeTabMiddleClick)?data.settings.devstudio.closeTabMiddleClick:"";
     document.querySelector("input#devstudioExpandTabOnHover").checked = (data.settings.devstudio.expandTabOnHover)?data.settings.devstudio.expandTabOnHover:"";    
     document.querySelector("input#devstudioHideCloseButton").checked = (data.settings.devstudio.hideCloseButton)?data.settings.devstudio.hideCloseButton:"";
     document.querySelector("input#devstudioLongerRuleNames").checked = (data.settings.devstudio.longerRuleNames)?data.settings.devstudio.longerRuleNames:"";
     document.querySelector("input#devstudioCheckoutIndicator").checked = (data.settings.devstudio.devstudioCheckoutIndicator)?data.settings.devstudio.devstudioCheckoutIndicator:"";
-
+    document.querySelector("input#devstudioMouseScrollTabs").checked = (data.settings.devstudio.mouseScrollTabs)?data.settings.devstudio.mouseScrollTabs:"";
+    document.querySelector("input#devstudioUseTabMenu").checked = (data.settings.devstudio.useTabMenu)?data.settings.devstudio.useTabMenu:"";
+    document.querySelector("input#devstudioTabColorCoding").checked = (data.settings.devstudio.tabColorCoding)?data.settings.devstudio.tabColorCoding:"";
+    devstudioTabColorCoding
+    
+    if(typeof data.settings.agilestudio === "undefined") data.settings.agilestudio = {};
     document.querySelector("input#enableAgilestudio").checked = (data.settings.agilestudio.enabled)?data.settings.agilestudio.enabled:"";
 
+    if(typeof data.settings.deploymentmanager === "undefined") data.settings.deploymentmanager = {};
     document.querySelector("input#enableDeploymentManager").checked = (data.settings.deploymentmanager.enabled)?data.settings.deploymentmanager.enabled:"";
 
   });
@@ -115,7 +129,7 @@ document.getElementById('saveSettings').addEventListener('click', saveSettings);
 
 
 function addSite() {
-  var newOptionsHtml = '<div id="siteRow">'
+  let newOptionsHtml = '<div id="siteRow">'
   newOptionsHtml += '<input id="site" placeholder="domain, without https://"></input>';
   newOptionsHtml += '<input id="label" placeholder="DEV, STG, UAT, etc."></input>';
   newOptionsHtml += '<button id="color" class="color-button" data-huebee>Pick a color</button>';
@@ -123,8 +137,8 @@ function addSite() {
   newOptionsHtml += '<select id="version"><option value="" disabled selected hidden>Version:</option><option value=""></option><option value="7">Pega 7</option><option value="81">Pega 8.1</option><option value="82">Pega 8.2</option><option value="83">Pega 8.3</option><option value="84">Pega 8.4</option><option value="85">Pega 8.5</option><option value="86">Pega 8.6</option><option value="87">Pega 8.7</option><option value="88">Pega 8.8</option></select>';
   newOptionsHtml += '&nbsp;&nbsp;<a href="#" class="siteRem">remove</a></div>';
   $("#siteConfig").append(newOptionsHtml);
-  var hueb = new Huebee($("button#color").last()[0], { notation: 'hex', saturations: 1, setBGColor: true, shades: 7, hue0: 80, customColors: [ '#FFF', '#0E0', '#FFA30F', '#C25', '#FFF000', '#19F' ]});
-  hueb.on('change', function(color) { //sets text color to chosen color so hex is not visible
+  let huebee = new Huebee($("button#color").last()[0], { notation: 'hex', saturations: 1, setBGColor: true, shades: 7, hue0: 80, customColors: [ '#FFF', '#0E0', '#FFA30F', '#C25', '#FFF000', '#19F' ]});
+  huebee.on('change', function(color) { //sets text color to chosen color so hex is not visible
     this.anchor.style.color = color;
   });
 }
@@ -132,7 +146,6 @@ function addSite() {
 document.getElementById('addSite').addEventListener('click', addSite);
 
 //event delegation
-$("div#siteConfig").on("click", "a", function (event) {
-  //event.preventDefault();
+$("div#siteConfig").on("click", "a", function (_event) {
   $(this).closest("div#siteRow").remove();
 });
diff --git a/tracer/tracerNameContextMenu.html b/tracer/tracerNameContextMenu.html
new file mode 100644
index 00000000..e69de29b
diff --git a/tracer/tracer_PegaRulesetSelection.html b/tracer/tracer_PegaRulesetSelection.html
new file mode 100644
index 00000000..ca89d18a
--- /dev/null
+++ b/tracer/tracer_PegaRulesetSelection.html
@@ -0,0 +1,23 @@
+
+<td class="dataLabelStyle"align="left">
+    <button type="button" title="Select Pega* rulesets" id="PDTSelectPegaRulesets">
+        <span class="buttonLeft"></span>
+        <span class="buttonMiddle">
+            <span class="buttonText">
+                Select Pega
+            </span>
+        </span>
+        <span class="buttonRight"></span>
+    </button>
+</td>
+<td class="dataLabelStyle"align="left">
+    <button type="button" title="Deselect Pega* rulesets" id="PDTDeselectPegaRulesets">
+        <span class="buttonLeft"></span>
+        <span class="buttonMiddle">
+            <span class="buttonText">
+                Deselect Pega
+            </span>
+        </span>
+        <span class="buttonRight"></span>
+    </button>
+</td>
\ No newline at end of file
diff --git a/tracer/tracer_button.html b/tracer/tracer_button.html
index ca9c66a9..6a92d5a8 100644
--- a/tracer/tracer_button.html
+++ b/tracer/tracer_button.html
@@ -1,3 +1,15 @@
+<div class="btnPDTGroup greyPDT initiallyHidden" data-count="1">
+    <button class="btnPDT leftPill" id="btnPDTBookmarksPrev" title="Previous">
+        <span class="arrow down"></span>
+    </button>
+
+    <button class="btnPDT" id="btnPDTBookmarks">Bookmarks</button>
+
+    <button class="btnPDT rightPill" id="btnPDTBookmarksNext" title="Next">
+        <span class="arrow up"></span>
+    </button>
+</div>
+
 <div class="btnPDTGroup redPDT">
     <button class="btnPDT leftPill" id="btnPDTErrorsPrev"  title="Previous">
         <span class="arrow down"></span>
diff --git a/tracer/tracer_event.css b/tracer/tracer_event.css
index 003a0ac2..bd43ac0e 100644
--- a/tracer/tracer_event.css
+++ b/tracer/tracer_event.css
@@ -9,4 +9,9 @@
 
 span.removeColumn {
     margin-left: 4px;
+}
+
+.removeColumn:hover {
+    background-color: darkred;
+    color: white;
 }
\ No newline at end of file
diff --git a/tracer/tracer_event.js b/tracer/tracer_event.js
index 634ed7bc..7facf9ce 100644
--- a/tracer/tracer_event.js
+++ b/tracer/tracer_event.js
@@ -1,44 +1,167 @@
-//FEATURE mark row on right-click
-$("div#traceEvent-CONTAINER").on("contextmenu", "td#eventLineNumber", function (evt) { evt.preventDefault(); $(this).parent().toggleClass("PegaDevToolsTextRed"); });
+console.log("PDT: tracer/tracer_event.js");
+PDT.setScriptsApplied();
 
-//FEATURE hide columns
-var removeThreadNameButton = $('<span title="Remove" style="margin-left:3px; cursor:pointer">x</span>');
+//FEATURE: hide columns
+const removeThreadNameButton = $('<span title="Remove column" class="removeColumn">x</span>');
 removeThreadNameButton.click(function () { injectStyles('td.EventDataCenter#threadname { display: none}'); $('td.eventTitleBarStyle[title="Thread"]').css('display', 'none'); });
 $('td.eventTitleBarStyle[title="Thread"]').append(removeThreadNameButton);
 
-var removeIntBtn = $('<span title="Remove" style="margin-left:3px; cursor:pointer">x</span>');
+const removeIntBtn = $('<span title="Remove column" class="removeColumn">x</span>');
 removeIntBtn.click(function () { injectStyles('div#traceEvent-CONTAINER table td:nth-child(6) { display: none}'); $('td.eventTitleBarStyle[title="Int"]').css('display', 'none'); });
 $('td.eventTitleBarStyle[title="Int"]').append(removeIntBtn);
 
-var removeElapsedBtn = $('<span title="Remove" style="margin-left:3px; cursor:pointer">x</span>');
+const removeElapsedBtn = $('<span title="Remove column" class="removeColumn">x</span>');
 removeElapsedBtn.click(function () { injectStyles('div#traceEvent-CONTAINER table td:nth-child(13) { display: none}'); $('td.eventTitleBarStyle[title="Elapsed"]').css('display', 'none'); });
 $('td.eventTitleBarStyle[title="Elapsed"]').append(removeElapsedBtn);
 
-var removeRuleNoBtn = $('<span title="Remove" style="margin-left:3px; cursor:pointer">x</span>');
+const removeRuleNoBtn = $('<span title="Remove column" class="removeColumn">x</span>');
 removeRuleNoBtn.click(function () { injectStyles('div#traceEvent-CONTAINER table td:nth-child(7) { display: none}'); $('td.eventTitleBarStyle[title="Rule#"]').css('display', 'none'); });
 $('td.eventTitleBarStyle[title="Rule#"]').append(removeRuleNoBtn);
 
-//TODO
+const removeAllColumnsBtn = $('<div title="Remove all columns" class="removeColumn">X</div>');
+removeAllColumnsBtn.click(function () { $('span.removeColumn').click(); $(this).css('display', 'none'); });
+$('td.eventTitleBarStyle[title="Line"]').prev().append(removeAllColumnsBtn);
 
-//TODO - requestor div element added when events are captured
-// var removeRequestorBtn = '<span id="PDTRemoveRequestor" title="Remove" style="margin-left:3px; cursor:pointer">x</span>';
-// document.querySelector('div#traceEvent-CONTAINER div div h2').insertAdjacentHTML("beforeend", removeRequestorBtn);
-// document.querySelector('div#traceEvent-CONTAINER div div span#PDTRemoveRequestor').click(function () { injectStyles('div#traceEvent-CONTAINER div div { display: none}');  });
+const menuLineNumberStructure = [
+    {
+        text: "&nbsp;⚐ Mark",
+        action: () => {
+            contextTarget.parentNode.classList.toggle("PegaDevToolsTextRed")
+        }
+    },
+    {
+        text: "🔖 Add to bookmarks",
+        action: () => {
+            contextTarget.parentNode.classList.toggle("PegaDevToolsTextBlue");
+            contextTarget.setAttribute("data-PDTbookmark", true);
 
-//TODO
-// var dropdown = document.createElement("div");
-// dropdown.className = "dropdown-content";
-// document.querySelector("body#main").appendChild(dropdown);
+            let bookmarksButton = window.parent.frames[0].document.querySelector("div.btnPDTGroup.greyPDT");
+            bookmarksButton.classList.remove("initiallyHidden");
 
+            let newTextContent = "Bookmarks";
+                if (bookmarksButton.getAttribute("data-count")) {
+                    newTextContent = "Bookmarks" + String.fromCharCode(160);
+                    newTextContent += "" + document.querySelectorAll("td[data-PDTbookmark]").length;
+                }
+            bookmarksButton.querySelector("button#btnPDTBookmarks").textContent = newTextContent;
 
-oncontextmenu = (e) => {
-    if(e.srcElement.getAttribute("class") === "eventElementDataSelect") {
-        e.preventDefault();
-        let menu = document.createElement("div");
-        menu.id = "ctxmenu";
-        menu.style = "top:${e.pageY-10}px;left:${e.pageX-40}px";
-        menu.onmouseleave = () => ctxmenu.outerHTML = '';
-        menu.innerHTML = "<p onclick='alert(`Thank you!`)'>Highlight</p>";
-        document.body.appendChild(menu);
+        }
+    },    
+    { isDivider: true },
+    {
+        text: "⇑ Remove next events",
+        action: () => {
+            let eventNumber = parseInt(contextTarget.getAttribute("title"));
+            document.querySelectorAll('tr#eventRow').forEach( row => { if(parseInt(row.querySelector("td#eventLineNumber").getAttribute("title")) > eventNumber) row.remove() });
+        }
+    },
+    {
+        text: "⇓ Remove previous events",
+        action: () => {
+            let eventNumber = parseInt(contextTarget.getAttribute("title"));
+            document.querySelectorAll('tr#eventRow').forEach( row => { if(parseInt(row.querySelector("td#eventLineNumber").getAttribute("title")) < eventNumber) row.remove() });
+        }
+    },
+    { isDivider: true }, 
+    {
+        text: "☓ Close this menu",
+        action: () => { /* empty action just closes menu */  }   
+    } 
+];
+
+const menuInstanceNameStructure = [
+    {
+        text: "↪ Jump to",
+        subMenu: [           
+            {
+                text: "↟ Last occurrence",
+                action: () => {
+                    let eventInstance = contextTarget.title;
+                    let instancesByTitle = document.querySelector("td#elementInstanceName[title='" + eventInstance + "']");
+                    instancesByTitle.scrollIntoView(false);                    
+                }                
+            },
+            {
+                text: "↟ Last step (if applicable)",
+                action: () => {
+                    let tmpNodeList = contextTarget.parentElement.querySelectorAll("td.eventDataCenter");
+                    let ruleNo = tmpNodeList[tmpNodeList.length-1].getAttribute("title");
+                    let instancesByRuleNo = document.querySelector("td.eventDataCenter[title='" + ruleNo + "']");
+                    instancesByRuleNo.scrollIntoView(false);                 
+                }                
+            },
+            {
+                text: "↡ First occurrence",
+                action: () => {
+                    let eventInstance = contextTarget.title;
+                    let instancesByTitle = document.querySelectorAll("td#elementInstanceName[title='" + eventInstance + "']");
+                    instancesByTitle[instancesByTitle.length - 1].scrollIntoView(false);
+                }                
+            },
+            {
+                text: "↡ First step (if applicable)",
+                action: () => {
+                    let tmpNodeList = contextTarget.parentElement.querySelectorAll("td.eventDataCenter");
+                    let ruleNo = tmpNodeList[tmpNodeList.length-1].getAttribute("title");
+                    let instancesByRuleNo = document.querySelectorAll("td.eventDataCenter[title='" + ruleNo + "']");
+                    instancesByRuleNo[instancesByRuleNo.length - 1].scrollIntoView(false);
+                }                
+            }            
+        ]
+    },
+    {
+        text: "☖ Highlight all occurrences",
+        action: () => {
+            let color = getEventElementDataSelectColor();
+            let instanceName = contextTarget.getAttribute("title");
+            document.querySelectorAll("td.eventElementDataSelect[title='" + instanceName + "']").forEach( row => row.style.backgroundColor = color );
+        }
+    },
+    {
+        text: "🗑 Remove all occurrences",
+        action: () => {
+            let instanceName = contextTarget.getAttribute("title");
+            document.querySelectorAll('tr#eventRow').forEach( row => { 
+                let eventElement = row.querySelector("td.eventElementDataSelect");
+                if(eventElement && eventElement.hasAttribute("title") && eventElement.getAttribute("title") == instanceName)
+                    row.remove() 
+            });            
+        }
+    },   
+    { isDivider: true }, 
+    {
+        text: "☓ Close this menu",
+        action: () => { /* empty action just closes menu */  } 
     }
-  }
\ No newline at end of file
+];
+
+let contextTarget;
+
+//FEATURE: menus
+$("div#traceEvent-CONTAINER").on(
+    "contextmenu", 
+    "td#eventLineNumber", 
+    function (evt) {
+        evt.preventDefault();
+        contextTarget = this;
+        ctxmenu.show(menuLineNumberStructure, evt);
+}).on(
+    "contextmenu", 
+    "td#elementInstanceName", 
+    function (evt) {
+        evt.preventDefault();
+        contextTarget = this;
+        ctxmenu.show(menuInstanceNameStructure, evt);
+});
+
+const eventElementDataSelectColors = ["PeachPuff", "lavender", "PaleGreen", "#C0448f", "#FFFACD", "#E0FFFF", "#FFD700", "#FFE1FF", "#FF8C69"];
+let currentColorIndex = 0;
+
+function getEventElementDataSelectColor() {
+	let returnColor = eventElementDataSelectColors[currentColorIndex];
+    currentColorIndex++;
+	if(currentColorIndex == eventElementDataSelectColors.length) {
+		currentColorIndex = 0;
+	}
+    return returnColor;
+}
\ No newline at end of file
diff --git a/tracer/tracer_menuRow.js b/tracer/tracer_menuRow.js
index dc924786..ac911ac3 100644
--- a/tracer/tracer_menuRow.js
+++ b/tracer/tracer_menuRow.js
@@ -1,292 +1,418 @@
 /* tracer - top menu iframe */
+document.arrive("body#main", { onceOnly: true, existing: true}, () => {
+	PDT.setScriptsApplied();
+	console.log("[PDT] tracer/tracer_menuRow.js");
+
+	function isTracerActive() {
+		return (
+			document.getElementById("Pause") &&
+			document.getElementById("Pause").innerText == "Pause"
+		);
+	}
+	var titleTimerId;
+	var counter = 0;
+
+	async function backgroundNotify(state) {
+		if (PDT.settings.debug) {
+			browser.runtime.sendMessage({ purpose: "tracerState", tracerIsOn: state });
+		}
+	}
 
-function isTracerActive() {
-	return (
-		document.getElementById("Pause") &&
-		document.getElementById("Pause").innerText == "Pause"
-	);
-}
-var titleTimerId;
-var counter = 0;
-
-async function backgroundNotify(state) {
-	if (PDT.settings.debug) {
-		browser.runtime.sendMessage({ purpose: "tracerState", tracerIsOn: state });
+	async function backgroundHeartbeat() {
+		if (PDT.settings.debug) {
+			browser.runtime.sendMessage({ purpose: "tracerHeartbeat" });
+			console.log("PDT sending heartbeat " + Math.floor(Date.now() / 1000));
+		}
 	}
-}
 
-async function backgroundHeartbeat() {
-	if (PDT.settings.debug) {
-		browser.runtime.sendMessage({ purpose: "tracerHeartbeat" });
-		console.log("PDT sending heartbeat " + Math.floor(Date.now() / 1000));
+	async function updateCounts() {
+		updateMessageCount(getMessagesList().length);
+		updateErrorCount(getErrorList().length);
 	}
-}
-
-async function updateCounts() {
-	updateMessageCount(getMessagesList().length);
-	updateErrorCount(getErrorList().length);
-}
-
-async function resetCounts() {
-	updateMessageCount();
-	updateErrorCount();
-}
-
-function setTitle() {
-	if (isTracerActive()) {
-		parent.document.title = "ıı Tracer Off";
-		clearInterval(titleTimerId);
-		backgroundNotify(false);
-		updateCounts();
-	} else {
-		parent.document.title = "Tracer Active!";
-		backgroundHeartbeat();
-		backgroundNotify(true);
-		resetCounts();
-
-		titleTimerId = setInterval(function () {
-			parent.document.title = "►" + parent.document.title;
-			counter++;
-			if (counter % 2 == 0) {
-				parent.document.title = "Tracer Active!";
-			}
+
+	async function resetCounts() {
+		updateMessageCount();
+		updateErrorCount();
+	}
+
+	function setTitle() {
+		if (isTracerActive()) {
+			parent.document.title = "ıı Tracer Off";
+			clearInterval(titleTimerId);
+			backgroundNotify(false);
+			updateCounts();
+		} else {
+			parent.document.title = "Tracer Active!";
 			backgroundHeartbeat();
-		}, 1000);
+			backgroundNotify(true);
+			resetCounts();
+
+			titleTimerId = setInterval(function () {
+				parent.document.title = "►" + parent.document.title;
+				counter++;
+				if (counter % 2 == 0) {
+					parent.document.title = "Tracer Active!";
+				}
+				backgroundHeartbeat();
+			}, 1000);
+		}
 	}
-}
-
-var errorIndex = 0,
-	messageIndex = 0,
-	accessDeniedIndex;
-var errorList = [],
-	messagesList = [],
-	accessDeniedList = [];
-
-function getErrorList() {
-	return window.parent.frames[1].document.querySelectorAll(
-		'td[title="FAIL"], td[title="Exception"], tr.eventTableAlertTrace td#eventNodeId'
-	);
-}
-
-function getMessagesList() {
-	return window.parent.frames[1].document.querySelectorAll(
-		'td[bgcolor="orange"]'
-	);
-}
-
-function getAccessDeniedList() {
-	return window.parent.frames[1].document.querySelectorAll(
-		'td[title="Access Denied"]'
-	);
-}
-
-function updateErrorCount(count, index) {
-	let newTextContent = "Errors";
-	if (!(count === undefined)) {
-		newTextContent = "Errors" + String.fromCharCode(160);
-		if (index) newTextContent += "" + index + "/" + count;
-		else newTextContent += "" + count;
+
+	var errorIndex = 0,
+		messageIndex = 0,
+		accessDeniedIndex,
+		bookmarkIndex = 1;
+	var errorList = [],
+		messagesList = [],
+		accessDeniedList = [],
+		bookmarkList = [];
+
+	function getErrorList() {
+		return window.parent.frames[1].document.querySelectorAll(
+			'td[title="FAIL"], td[title="Exception"], tr.eventTableAlertTrace td#eventNodeId'
+		);
 	}
-	document.querySelector("button#btnPDTErrors").textContent = newTextContent;
-}
-
-function updateMessageCount(count, index) {
-	let newTextContent = "Warnings";
-	if (count !== undefined) {
-		newTextContent = "Warnings" + String.fromCharCode(160);
-		if (index) newTextContent += "" + index + "/" + count;
-		else newTextContent += "" + count;
+
+	function getMessagesList() {
+		return window.parent.frames[1].document.querySelectorAll(
+			'td[bgcolor="orange"], td[title="WARN"]'
+		);
 	}
-	document.querySelector("button#btnPDTMessages").textContent = newTextContent;
-}
-
-function updateAccessDeniedCount(count) {
-	document.querySelector("button#btnPDTAccessDenied").textContent =
-		" AccessDeny(" + count + ")";
-}
-
-//TODO: convert to use PDT.settings
-function siteConfigCallback(siteConfig, _globalConfig) {
-	if (!PDT.isTracerEnabled()) {
-		console.log("PDT tracer disabled");
-	} else {
-		console.log("PDT tracer");
-		messageServiceWorker("registerTracer"); //register with Service Worker
-
-		if (siteConfig && siteConfig.label) {
-			let headerButtonsElement = document.querySelector("table.tracertop tr");
-			if (headerButtonsElement) {
-				headerButtonsElement.insertAdjacentHTML(
-					"beforeend",
-					"<td style='width:30px;font-size:11pt; color: white; text-shadow: black 0px 0px 6px;background-color:#" +
-						siteConfig.color.replace("#", "") +
-						";border:2px solid;border-top-style:none; border-right-style:none;margin: 0 0 4px 0;font-weight: bold;border-color:#" +
-						siteConfig.color.replace("#", "") +
-						"; padding:6px'>" +
-						siteConfig.label +
-						"</ td>"
-				);
-			}
 
-			if (siteConfig.useColorTop) {
-				document.querySelector("table.tracertop").style.cssText =
-					"border-top: #" + siteConfig.color.replace("#", "") + " 2px solid";
-			}
+	function getAccessDeniedList() {
+		return window.parent.frames[1].document.querySelectorAll(
+			'td[title="Access Denied"]'
+		);
+	}
+
+	function getBookmarksList() {
+		return window.parent.frames[1].document.querySelectorAll(
+			'td[data-PDTbookmark]'
+		);
+	}
+
+	function updateErrorCount(count, index) {
+		let newTextContent = "Errors";
+		if (count !== undefined) {
+			newTextContent = "Errors" + String.fromCharCode(160);
+			if (index) newTextContent += "" + index + "/" + count;
+			else newTextContent += "" + count;
 		}
-		$("#Pause").click(function () {
-			setTitle();
-		});
+		document.querySelector("button#btnPDTErrors").textContent = newTextContent;
+	}
 
-		$("#ClearEvents").click(function () {
-			resetCounts();
-		});
+	function updateMessageCount(count, index) {
+		let newTextContent = "Warnings";
+		if (count !== undefined) {
+			newTextContent = "Warnings" + String.fromCharCode(160);
+			if (index) newTextContent += "" + index + "/" + count;
+			else newTextContent += "" + count;
+		}
+		document.querySelector("button#btnPDTMessages").textContent = newTextContent;
+	}
 
-		//TODO: get rid of jQuery, use fetch API
-		$.get(browser.runtime.getURL("tracer/tracer_button.html"), function (data) {
-			//add buttons from html
-			$("table.tracertop table tr").eq(2).prepend(data);
+	function updateButtonCount(buttonElement, text, count, index) {
+		if (count !== undefined) {
+			text = text + String.fromCharCode(160);
+			if (index) text += "" + index + "/" + count;
+			else text += "" + count;
+		}
+		buttonElement.textContent = text;
+	}
 
-			waitUntilRenderTracerButtons();
-		});
+	function updateAccessDeniedCount(count) {
+		document.querySelector("button#btnPDTAccessDenied").textContent =
+			" AccessDeny(" + count + ")";
 	}
-}
 
-function addEventHandlers() {
-	document.querySelector("button#btnPDTErrors");
+	//TODO: convert to use PDT.settings
+	function siteConfigCallback(siteConfig, _globalConfig) {
+		if (!PDT.isTracerEnabled()) {
+			console.log("PDT tracer disabled");
+		} else {
+			console.log("PDT tracer");
+			messageServiceWorker("registerTracer"); //register with Service Worker
+
+			if (siteConfig && siteConfig.label) {
+				let headerButtonsElement = document.querySelector("table.tracertop tr");
+				if (headerButtonsElement) {
+					headerButtonsElement.insertAdjacentHTML(
+						"beforeend",
+						"<td style='width:30px;font-size:11pt; color: white; text-shadow: black 0px 0px 6px;background-color:#" +
+							siteConfig.color.replace("#", "") +
+							";border:2px solid;border-top-style:none; border-right-style:none;margin: 0 0 4px 0;font-weight: bold;border-color:#" +
+							siteConfig.color.replace("#", "") +
+							"; padding:6px'>" +
+							siteConfig.label +
+							"</ td>"
+					);
+				}
 
-	//setTitle();
+				if (siteConfig.useColorTop) {
+					document.querySelector("table.tracertop").style.cssText =
+						"border-top: #" + siteConfig.color.replace("#", "") + " 2px solid";
+				}
+			}
+			$("#Pause").click(function () {
+				setTitle();
+			});
+
+			$("#ClearEvents").click(function () {
+				resetCounts();
+			});
+
+			//TODO: get rid of jQuery, use fetch API
+			$.get(browser.runtime.getURL("tracer/tracer_button.html"), function (data) {
+				//add buttons from html
+				$("table.tracertop table tr").eq(2).prepend(data);
+				waitUntilRenderTracerButtons();
+			});
+
+			// fetch API
+			// fetch(browser.runtime.getURL("tracer/tracer_buttonBookmarks.html")).then(t => t.text()).then(data => {                    
+			// 	let prevButton = document.querySelector("div.btnPDTGroup");
+			// 	if(prevButton) {
+			// 		prevButton.insertAdjacentHTML("beforebegin", data)
+			// 	}
+			// });
+		}
+	}
 
-	//TODO: !!!!!!!
-	document.querySelector("button#btnPDTErrors").oncontextmenu = function () {
-		let offset = this.getBoundingClientRect().left;
-		let errorListDropdown = window.parent.frames[1].document.querySelector(
-			"div.dropdown-content"
-		);
-		if (errorListDropdown) {
+	function addDropdownHandler(dropdown, itemList, offset) {
+		if (dropdown && itemList) {
 			Array.prototype.forEach.call(
-				errorListDropdown.querySelectorAll("a"),
+				dropdown.querySelectorAll("a"),
 				function (node) {
 					node.parentNode.removeChild(node);
 				}
 			);
-			errorListDropdown.style.display = "block";
-			errorListDropdown.style.left = offset;
 
-			for (let errorResult in getErrorList()) {
+			if(itemList.length === 0)
+				return false;
+
+			dropdown.style.display = "block";
+			dropdown.style.left = offset;
+
+			itemList.forEach((element) => {
 				let newElem = document.createElement("a");
-				newElem.textContent = errorResult.parent.querySelector("td#eventLineNumber").title;
-				errorListDropdown.appendChild(newElem);
-			}
+				newElem.value = element.parentNode.querySelector("td#eventLineNumber").innerText;
+				newElem.textContent = newElem.value;
+				if(element.parentNode.querySelector("td#elementInstanceName"))
+					newElem.textContent += ' - ' + element.parentNode.querySelector("td#elementInstanceName").title;
+				newElem.onclick = function () {
+					window.parent.frames[1].document.querySelector("td#eventLineNumber[title='" + this.value + "']").scrollIntoView(false, { behavior: "smooth" });
+				};
+				dropdown.appendChild(newElem);
+			})
+			
 			let elem = document.createElement("a");
+			elem.style = "border-top: 1px solid #aaa;"
 			elem.textContent = "Close";
 			elem.onclick = function () {
-				document.querySelector("div.dropdown-content").style.display = "none";
+				dropdown.style.display = "none";
 			};
+			dropdown.appendChild(elem);
 			return false;
-		} else console.log("[PDT] tracer dropdown not found");
-	};
-
-	/* #region Errors buttons */
-	document.querySelector("button#btnPDTErrors").onclick = function () {
-		errorList = getErrorList();
-		if (errorList.length) {
-			errorList[errorList.length - 1].scrollIntoView(false);
+		} else console.log("[PDT] addDropdownHandler - wrong arguments");
+	}
+
+	function addEventHandlers() {
+
+		function navigateTo(itemList, nextOrPrev, currentIndex, text, clickedButton) {
+			let buttonElement = (nextOrPrev === "next" ? clickedButton.previousElementSibling : clickedButton.nextElementSibling);
+			if (itemList.length) {
+				currentIndex += (nextOrPrev === "next" ? -1 : 1);
+				// if(nextOrPrev === "next")
+				// 	currentIndex -= 1;
+				// else
+				// 	currentIndex += 1;				
+				if (currentIndex < 0) {
+					currentIndex = itemList.length - 1;
+				}
+				itemList[currentIndex].scrollIntoView(false, { behavior: "smooth" });
+				updateButtonCount(buttonElement, text, itemList.length, currentIndex + 1);
+			} else updateButtonCount(buttonElement, text, itemList.length);
+			return currentIndex;
 		}
-		updateErrorCount(errorList.length);
-		errorIndex = 0;
-	};
-
-	document.querySelector("button#btnPDTErrorsPrev").onclick = function () {
-		errorList = getErrorList();
-		if (errorList.length) {
-			errorIndex += 1;
-			if (errorIndex >= errorList.length) {
-				errorIndex = 0;
+
+		/* #region Errors buttons */
+
+		//FEATURE: Errors button context menu
+		document.querySelector("button#btnPDTErrors").oncontextmenu = (e) => {
+			let errorListDropdown = window.parent.frames[1].document.querySelector("div.PDTdropdown.errors");
+			return addDropdownHandler(errorListDropdown, getErrorList(), e.clientX - e.offsetX);
+		};
+
+		//FEATURE: Go to first error instance
+		document.querySelector("button#btnPDTErrors").onclick = function () {
+			errorList = getErrorList();
+			if (errorList.length) {
+				errorList[errorList.length - 1].scrollIntoView(false);
 			}
-			errorList[errorIndex].scrollIntoView(false, { behavior: "smooth" });
-			updateErrorCount(errorList.length, errorIndex + 1);
-		} else {
 			updateErrorCount(errorList.length);
-		}
-	};
-
-	document.querySelector("button#btnPDTErrorsNext").onclick = function () {
-		errorList = getErrorList();
-		if (errorList.length) {
-			errorIndex -= 1;
-			if (errorIndex < 0) {
-				errorIndex = errorList.length - 1;
+			errorIndex = 0;
+		};
+
+		//FEATURE: Go to previous error
+		document.querySelector("button#btnPDTErrorsPrev").onclick = function () {
+			// errorList = getErrorList();
+			// if (errorList.length) {
+			// 	errorIndex += 1;
+			// 	if (errorIndex >= errorList.length) {
+			// 		errorIndex = 0;
+			// 	}
+			// 	errorList[errorIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateErrorCount(errorList.length, errorIndex + 1);
+			// } else {
+			// 	updateErrorCount(errorList.length);
+			// }
+			errorIndex = navigateTo(getErrorList(), "prev", errorIndex, "Errors", this);
+		};
+
+		//FEATURE: Go to next error
+		document.querySelector("button#btnPDTErrorsNext").onclick = function () {
+			// errorList = getErrorList();
+			// if (errorList.length) {
+			// 	errorIndex -= 1;
+			// 	if (errorIndex < 0) {
+			// 		errorIndex = errorList.length - 1;
+			// 	}
+			// 	errorList[errorIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateErrorCount(errorList.length, errorIndex + 1);
+			// } else {
+			// 	updateErrorCount(errorList.length);
+			// }
+			errorIndex = navigateTo(getErrorList(), "next", errorIndex, "Errors", this);
+		};
+		/* #endregion */
+
+		/* #region Messages buttons */
+
+		//FEATURE: Warnings button context menu
+		document.querySelector("button#btnPDTMessages").oncontextmenu = (e) => {
+			let messagesListDropdown = window.parent.frames[1].document.querySelector("div.PDTdropdown.warnings");
+			return addDropdownHandler(messagesListDropdown, getMessagesList(), e.clientX - e.offsetX);
+		};
+
+		//FEATURE: Go to first warning/message instance
+		document.querySelector("button#btnPDTMessages").onclick = function () {
+			messagesList = getMessagesList();
+			if (messagesList.length) {
+				messagesList[messagesList.length - 1].scrollIntoView(false);
 			}
-			errorList[errorIndex].scrollIntoView(false, { behavior: "smooth" });
-			updateErrorCount(errorList.length, errorIndex + 1);
+			updateMessageCount(messagesList.length);
+			messageIndex = 0;
+		};
+
+		//FEATURE: Go to previous warning
+		document.querySelector("button#btnPDTMessagesPrev").onclick = function () {
+			// messagesList = getMessagesList();
+			// if (messagesList.length) {
+			// 	messageIndex += 1;
+			// 	if (messageIndex >= messagesList.length) {
+			// 		messageIndex = 0;
+			// 	}
+			// 	messagesList[messageIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateMessageCount(messagesList.length, messageIndex + 1);
+			// } else updateMessageCount(messagesList.length);
+			messageIndex = navigateTo(getMessagesList(), "prev", messageIndex, "Warnings", this);
+		};
+
+		//FEATURE: Go to next warning
+		document.querySelector("button#btnPDTMessagesNext").onclick = function () {
+			// messagesList = getMessagesList();
+			// if (messagesList.length) {
+			// 	messageIndex -= 1;
+			// 	if (messageIndex < 0) {
+			// 		messageIndex = messagesList.length - 1;
+			// 	}
+			// 	messagesList[messageIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateMessageCount(messagesList.length, messageIndex + 1);
+			// } else updateMessageCount(messagesList.length);
+			messageIndex = navigateTo(getMessagesList(), "next", messageIndex, "Warnings", this);
+		};
+		/* #endregion */
+
+		/* #region Bookmarks buttons */
+
+		//FEATURE: Bookmarks button context menu
+		document.querySelector("button#btnPDTBookmarks").oncontextmenu = (e) => {
+			let errorListDropdown = window.parent.frames[1].document.querySelector("div.PDTdropdown.bookmarks");
+			return addDropdownHandler(errorListDropdown, getBookmarksList(), e.clientX - e.offsetX);
+		};
+
+		//FEATURE: Go to first bookmark instance
+		document.querySelector("button#btnPDTBookmarks").onclick = function () {
+			bookmarkList = getBookmarksList();
+			if (bookmarkList.length) {
+				bookmarkList[bookmarkList.length - 1].scrollIntoView(false);
+			}
+			updateButtonCount(this, "Bookmarks", bookmarkList.length);
+			bookmarkIndex = 0;
+		};
+
+		//FEATURE: Go to previous bookmark
+		document.querySelector("button#btnPDTBookmarksPrev").onclick = function () {
+			// bookmarkList = getBookmarksList();
+			// if (bookmarkList.length) {
+			// 	bookmarkIndex += 1;
+			// 	if (bookmarkIndex >= bookmarkList.length) {
+			// 		bookmarkIndex = 0;
+			// 	}
+			// 	bookmarkList[bookmarkIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateButtonCount(this.nextElementSibling, "Bookmarks", bookmarkList.length, bookmarkIndex + 1);
+			// } else updateButtonCount(this.nextElementSibling, "Bookmarks", bookmarkList.length);
+			bookmarkIndex = navigateTo(getBookmarksList(), "prev", bookmarkIndex, "Bookmarks", this);
+		};
+
+		//FEATURE: Go to next bookmark
+		document.querySelector("button#btnPDTBookmarksNext").onclick = function () {
+			// bookmarkList = getBookmarksList();
+			// if (bookmarkList.length) {
+			// 	bookmarkIndex -= 1;
+			// 	if (bookmarkIndex < 0) {
+			// 		bookmarkIndex = bookmarkList.length - 1;
+			// 	}
+			// 	bookmarkList[bookmarkIndex].scrollIntoView(false, { behavior: "smooth" });
+			// 	updateButtonCount(this.previousElementSibling, "Bookmarks", bookmarkList.length, bookmarkIndex + 1);
+			// } else updateButtonCount(this.previousElementSibling, "Bookmarks", bookmarkList.length);
+			bookmarkIndex = navigateTo(getBookmarksList(), "next", bookmarkIndex, "Bookmarks", this);
+		};
+
+		/* #endregion */
+	}
+
+	//make sure buttons are part of the DOM before adding event handlers
+	//TODO: use arrive.js
+	function waitUntilRenderTracerButtons() {
+		let expectedElement = document.querySelector("button#btnPDTErrors");
+		if (expectedElement) {
+			addEventHandlers();
 		} else {
-			updateErrorCount(errorList.length);
+			tries = tries + 1;
+			console.log(tries);
+			//if (tries > 10) return;
+			setTimeout(() => {
+				waitUntilRenderTracerButtons();
+			}, 500);
 		}
-	};
-	/* #endregion */
-
-	/* #region Messages buttons */
-	document.querySelector("button#btnPDTMessages").onclick = function () {
-		messagesList = getMessagesList();
-		if (messagesList.length) {
-			messagesList[messagesList.length - 1].scrollIntoView(false);
-		}
-		updateMessageCount(messagesList.length);
-		messageIndex = 0;
-	};
-
-	document.querySelector("button#btnPDTMessagesPrev").onclick = function () {
-		messagesList = getMessagesList();
-		if (messagesList.length) {
-			messageIndex += 1;
-			if (messageIndex >= messagesList.length) {
-				messageIndex = 0;
-			}
-			messagesList[messageIndex].scrollIntoView(false, { behavior: "smooth" });
-			updateMessageCount(messagesList.length, messageIndex + 1);
-		} else updateMessageCount(messagesList.length);
-	};
-
-	document.querySelector("button#btnPDTMessagesNext").onclick = function () {
-		messagesList = getMessagesList();
-		if (messagesList.length) {
-			messageIndex -= 1;
-			if (messageIndex < 0) {
-				messageIndex = messagesList.length - 1;
-			}
-			messagesList[messageIndex].scrollIntoView(false, { behavior: "smooth" });
-			updateMessageCount(messagesList.length, messageIndex + 1);
-		} else updateMessageCount(messagesList.length);
-	};
-	/* #endregion */
-}
-
-//make sure buttons are part of the DOM before adding event handlers
-//TODO: use arrive.js
-function waitUntilRenderTracerButtons() {
-	let expectedElement = document.querySelector("button#btnPDTErrors");
-	if (expectedElement) {
-		addEventHandlers();
-	} else {
-		tries = tries + 1;
-		console.log(tries);
-		//if (tries > 10) return;
-		setTimeout(() => {
-			waitUntilRenderTracerButtons();
-		}, 500);
 	}
-}
 
-var tries = 0;
+	var tries = 0;
+
+	//make sure we are in the right frame, script can be loaded with tracer page popup
+	if(document.querySelector("table.tracertop")) {
+		siteConfig(siteConfigCallback);
+	}
 
-//make sure we are in the right frame, script can be loaded with tracer page popup
-if(document.querySelector("table.tracertop")) {
-	siteConfig(siteConfigCallback);
-}
+	PDT.alterFavicon();
 
-PDT.alterFavicon();
+	window.parent.frames[1].document.body.insertAdjacentHTML('afterbegin', '<div class="PDTdropdown warnings"></div>');
+	window.parent.frames[1].document.body.insertAdjacentHTML('afterbegin', '<div class="PDTdropdown errors"></div>');
+	window.parent.frames[1].document.body.insertAdjacentHTML('afterbegin', '<div class="PDTdropdown bookmarks"></div>');
 
-//TODO:
-//displayPage = new Function('pageXML','pageName','pagePropertyName', displayPage.toString().match(/{([\s\S]*)}/)[1].replace('window.open(strURL,strForm,"status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes"  + strFeatures)', "window.open(strURL,'_blank')"));
-//TODO:  Access Deny list
-//window.parent.frames[1].document.querySelectorAll('td[title="Access Denied"]')
\ No newline at end of file
+	//TODO:
+	//displayPage = new Function('pageXML','pageName','pagePropertyName', displayPage.toString().match(/{([\s\S]*)}/)[1].replace('window.open(strURL,strForm,"status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes"  + strFeatures)', "window.open(strURL,'_blank')"));
+	//TODO:  Access Deny list
+	//window.parent.frames[1].document.querySelectorAll('td[title="Access Denied"]')
+});
\ No newline at end of file
diff --git a/tracer/tracer_options.js b/tracer/tracer_options.js
index 5f609f3f..c7aa7ef7 100644
--- a/tracer/tracer_options.js
+++ b/tracer/tracer_options.js
@@ -27,7 +27,7 @@ function getSelectedRulesets() {
 	document.querySelectorAll("div#RuleSetDisplay table table td.dataLabelStyle").forEach(function (val) { if (val.querySelector("input[type='CHECKBOX']:checked")) (rulesetArray.push(val.textContent)) });
 	return rulesetArray;
 }
-var optionSets = new Array();
+let optionSets = new Array();
 
 function addSaveOptionSet() {
 	let optionSet = new Object();
@@ -47,7 +47,7 @@ function saveOptionSets() {
 		restoreOptionSets();
 		document.getElementById("PDTConfigurationProfileNew").style.display = "none";
 		//Update status to let user know options were saved
-		var status = document.getElementById('status');
+		let status = document.getElementById('status');
 		status.textContent = 'Configuration saved';
 		setTimeout(function () {
 			status.textContent = '';
@@ -71,18 +71,18 @@ function restoreOptionSets() {
 }
 
 function fillDropdown() {
-	var select = document.getElementById("configList");
+	let select = document.getElementById("configList");
 	if (!select)
 		console.log("Could not find configList");
 	else {
 		//clear input
-		for (var o of document.querySelectorAll('#configList > option')) {
+		for (let o of document.querySelectorAll('#configList > option')) {
 			o.remove()
 		}
 
 		//fill input from current optionSets
 		optionSets.forEach(function (element) {
-			var opt = document.createElement("option");
+			let opt = document.createElement("option");
 			opt.className = "PDTTracerOption"
 			//console.log("Loaded profile " + element.name);
 			opt.value = opt.innerHTML = element.name;
@@ -152,15 +152,28 @@ function eventTypesSetAll(checkState) {
 	document.querySelectorAll("div#EventTypesDisplay table table td.dataLabelStyle input[type='CHECKBOX']").forEach(function (el) { el.checked = checkState } )
 }
 
+//FEATURE: Select/deselect all event types
 fetch(browser.runtime.getURL("tracer/tracer_eventTypeSelection.html"))
 	.then(response => response.text())
     .then( (text) => {
 	document.querySelector("div#EventTypesDisplay table table table tr").insertAdjacentHTML("afterend", text);
 });
 
-document.arrive("button#PDTDeselectAllEventTypes", {onceOnly: true}, () => 	{
+document.arrive("button#PDTDeselectAllEventTypes", {onceOnly: true, existing: true}, () => 	{
 	document.querySelector("button#PDTSelectAllEventTypes").addEventListener("click", () => document.querySelectorAll("div#EventTypesDisplay table table td.dataLabelStyle input[type='CHECKBOX']").forEach(function (el) { el.checked = true } ));
 	document.querySelector("button#PDTDeselectAllEventTypes").addEventListener("click", () => document.querySelectorAll("div#EventTypesDisplay table table td.dataLabelStyle input[type='CHECKBOX']").forEach(function (el) { el.checked = false } ));
 });
 
+//FEATURE: Select/deselect all Pega rulesets
+fetch(browser.runtime.getURL("tracer/tracer_PegaRulesetSelection.html"))
+	.then(response => response.text())
+    .then( (text) => {
+	document.querySelector("div#RuleSetDisplay table tr").insertAdjacentHTML("beforeend", text);
+});
+
+document.arrive("button#PDTDeselectPegaRulesets", {onceOnly: true, existing: true}, () => 	{
+	document.querySelector("button#PDTSelectPegaRulesets").addEventListener("click", () => document.querySelectorAll("div#RuleSetDisplay table table table td.dataLabelStyle input[type='CHECKBOX']").forEach(function (el) { if(el.nextSibling.textContent.trim().startsWith("Pega")) el.checked = true } ));
+	document.querySelector("button#PDTDeselectPegaRulesets").addEventListener("click", () => document.querySelectorAll("div#RuleSetDisplay table table table td.dataLabelStyle input[type='CHECKBOX']").forEach(function (el) { if(el.nextSibling.textContent.trim().startsWith("Pega")) el.checked = false } ));
+});
+
 siteConfig(siteConfigCallback);
\ No newline at end of file
diff --git a/tracer/tracer_page.js b/tracer/tracer_page.js
index 721f12a5..30b79f77 100644
--- a/tracer/tracer_page.js
+++ b/tracer/tracer_page.js
@@ -2,25 +2,25 @@
 
 //TODO: make page navigation float on scroll (https://stackoverflow.com/questions/31184298/how-to-float-a-div-on-scroll)
 
-var tries = 0;
+// var tries = 0;
 var mainDiv;
 
-function waitUntilRender() {
-    mainDiv = document.querySelector("div#MainDiv");
-    if (mainDiv) {
-        addPageNavigation();
-        if(PDT.isDebugEnabled())
-            addSearch();
-        return true;
-    } else {
-        tries = tries + 1;
-        console.log(tries);
-        if (tries > 10) return false;
-        setTimeout(() => {
-            waitUntilRender();
-        }, 500);
-    }
-}
+// function waitUntilRender() {
+//     mainDiv = document.querySelector("div#MainDiv");
+//     if (mainDiv) {
+//         addPageNavigation();
+//         if(PDT.isDebugEnabled())
+//             addSearch();
+//         return true;
+//     } else {
+//         tries = tries + 1;
+//         console.log(tries);
+//         if (tries > 10) return false;
+//         setTimeout(() => {
+//             waitUntilRender();
+//         }, 500);
+//     }
+// }
 
 //sorting based on https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript by Nick Grealy
 const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
@@ -72,12 +72,12 @@ function addPageNavigation() {
 
 
             //TODO: attempt at sorting the results
-            var embeddedPages = mainTable.querySelectorAll(":scope > tbody > tr.eventTable > td > table");
+            let embeddedPages = mainTable.querySelectorAll(":scope > tbody > tr.eventTable > td > table");
             Array.from(embeddedPages).sort(
                 function(a, b) {
-                    var textA = a.parentNode.parentNode.querySelector("td").innerText.trim().toUpperCase();
-                    var textB = b.parentNode.parentNode.querySelector("td").innerText.trim().toUpperCase();
-                    return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+                    let textA = a.parentNode.parentNode.querySelector("td").innerText.trim().toUpperCase();
+                    let textB = b.parentNode.parentNode.querySelector("td").innerText.trim().toUpperCase();
+                    return (textA < textB) ? -1 : ((textA > textB) ? 1 : 0);
                 }
             ).forEach(elem => {
                 let pelem = elem.parentNode.parentNode.querySelector("td");
@@ -102,18 +102,27 @@ function addSearch() {
 }
 
 //TODO: convert to PDT settings
-function siteConfigCallback(siteConfig, globalConfig) {
+function siteConfigCallback(_siteConfig, globalConfig) {
 	if (! PDT.isTracerEnabled()) {
 		console.log('PDT tracer disabled');
 	} else {
-		if (!waitUntilRender()) {
-            console.log("PDT tracer_page: No div#MainDiv");
-        }
-        
-        //FEATURE: Sort properties alphabetically in page view
-		else if (globalConfig.settings.tracer.pagesort) {
-			sortTopLevel();
-		}
+		// if (!waitUntilRender()) {
+        //     console.log("PDT tracer_page: No div#MainDiv");
+        // }
+        document.arrive("div#MainDiv", { onceOnly: true, existing: true}, () => {
+            mainDiv = document.querySelector("div#MainDiv");
+            addPageNavigation();
+
+            //FEATURE: Sort properties alphabetically in page view
+		    if (globalConfig.settings.tracer.pagesort) {
+			    sortTopLevel();
+		    }
+
+            if(PDT.isDebugEnabled())
+                addSearch();
+
+            PDT.alterFavicon();
+        });
 	}
 }
 

From 7f89179e4f38c84a3e777a546a2f2ae6af716f16 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Tue, 20 Dec 2022 22:07:22 +0100
Subject: [PATCH 02/12] settings, tracer events

---
 manifest.json                           |  1 -
 settings.html                           | 72 ++++++++++++++-----------
 tracer/tracer_PegaRulesetSelection.html |  5 +-
 tracer/tracer_button.html               |  4 +-
 tracer/tracer_event.js                  |  8 ++-
 tracer/tracer_pegaRulesetSelection.html |  1 -
 6 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/manifest.json b/manifest.json
index 416b7f15..4ced8c15 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,7 +22,6 @@
 		"page": "settings.html",
 		"open_in_tab": true
 	},
-
 	"icons": {
 		"128": "icon.png"
 	},
diff --git a/settings.html b/settings.html
index 3a0f35b2..80f481ac 100644
--- a/settings.html
+++ b/settings.html
@@ -156,15 +156,24 @@ <h3>
 			<br />							
 			</span>
 			<span data-pdt-setting="devstudio">
+				<div><b>Tabs:</b></div>
 				<input type="checkbox" id="devstudioCloseTabMiddleClick" data-pdt-setting-name="closeTabMiddleClick" />
-				<label for="devstudioCloseTabMiddleClick" class="tooltip">Close tabs with middle click
+				<label for="devstudioCloseTabMiddleClick" class="tooltip">Close with middle click
 					<span class="tooltipText">
 						Known issue: might not work for already opened tabs when you reload the browser window.
 					</span>
 				</label>
-				<br /> 
+				<br />
+				<input type="checkbox" id="devstudioHideCloseButton" data-pdt-setting-name="hideCloseButton" />
+				<label for="devstudioHideCloseButton" class="tooltip">Hide close button
+					<span class="tooltipText">
+						Allows to fit more tabs on the screen at once. Close button is not needed when "Close tabs with
+						middle click" feature is enabled when using a mouse.
+					</span>
+				</label>
+				<br />				
 				<input type="checkbox" id="devstudioLongerRuleNames" data-pdt-setting-name="longerRuleNames" />
-				<label for="devstudioLongerRuleNames" class="tooltip">Allow longer rule names in tabs
+				<label for="devstudioLongerRuleNames" class="tooltip">Allow longer rule names
 					<span class="tooltipText">By default rule names in
 						tabs are trimmed to 14 characters,
 						making it sometimes difficult to know which rule is open. <br />This option increases length to
@@ -172,14 +181,6 @@ <h3>
 					</span>
 				</label>				
 				<br />				
-				<input type="checkbox" id="devstudioHideCloseButton" data-pdt-setting-name="hideCloseButton" />
-				<label for="devstudioHideCloseButton" class="tooltip">Hide tab close button
-					<span class="tooltipText">
-						Allows to fit more tabs on the screen at once. Close button is not needed when "Close tabs with
-						middle click" feature is enabled.
-					</span>
-				</label>
-				<br />
 				<input type="checkbox" id="devstudioMouseScrollTabs" data-pdt-setting-name="mouseScrollTabs" />
 				<label for="devstudioMouseScrollTabs" class="tooltip">Scrollable tab list
 					<span class="tooltipText">
@@ -188,19 +189,12 @@ <h3>
 				</label>
 				<br />	
 				<input type="checkbox" id="devstudioUseTabMenu" data-pdt-setting-name="useTabMenu" />
-				<label for="devstudioUseTabMenu" class="tooltip">Use tab menu
+				<label for="devstudioUseTabMenu" class="tooltip">Tab menu
 					<span class="tooltipText">
 						Tab menu allows you to rearrange and mark tabs
 					</span>
 				</label>
-				<br />	
-				<input type="checkbox" id="devstudioTabColorCoding" data-pdt-setting-name="tabColorCoding" />
-				<label for="devstudioTabColorCoding" class="tooltip">Tab color coding
-					<span class="tooltipText">
-						Color tabs based on rule type
-					</span>
-				</label>				
-				<br />								
+				<br />							
 				<input type="checkbox" id="devstudioExpandTabOnHover" data-pdt-setting-name="expandTabOnHover" />
 				<label for="devstudioExpandTabOnHover" class="tooltip">Expand rule names in tab on hover (BETA)
 					<span class="tooltipText">
@@ -215,6 +209,13 @@ <h3>
 						stage</span>
 				</label>
 				<br />
+				<input type="checkbox" id="devstudioTabColorCoding" data-pdt-setting-name="tabColorCoding" />
+				<label for="devstudioTabColorCoding" class="tooltip">Color coding (IN DEVELOPMENT)
+					<span class="tooltipText">
+						Color tabs based on rule type
+					</span>
+				</label>				
+				<br />		
 			</span>
 
 			<h3>
@@ -236,24 +237,25 @@ <h3>
 				<hr />
 			</h3>
 			<span data-pdt-setting="tracer">
-				<input type="checkbox" id="tracerPageSort" data-pdt-setting-name="pagesort" />
-				<label for="tracerPageSort" class="tooltip">Sort properties alphabetically in page view
-					<span class="tooltipText">When viewing a page or parameters top-level properties and pages will be
-						sorted alphabetically in descending order. OOTB order appears to be random.</span>
-				</label>
-				<br />
-
+				<div><b>Settings:</b></div>
 				<input type="checkbox" id="tracerSettingsFullscreen" data-pdt-setting-name="settingsFullscreen" />
-				<label for="tracerSettingsFullscreen" class="tooltip">Display settings in fullscreen
+				<label for="tracerSettingsFullscreen" class="tooltip">Display fullscreen
 					<span class="tooltipText">Resizes settings</span>
 				</label>
-				<br />
-
+				<br />				
+				<div><b>Step Page popup:</b></div>
+				
 				<input type="checkbox" id="tracerPageMessagesExpand" data-pdt-setting-name="pageMessagesExpand" />
-				<label for="tracerPageMessagesExpand" class="tooltip">Expand messages on load of Step Page view
+				<label for="tracerPageMessagesExpand" class="tooltip">Expand messages on load
 					<span class="tooltipText">Always expand page messages</span>
 				</label>
-				<br />				
+				<br />
+				<input type="checkbox" id="tracerPageSort" data-pdt-setting-name="pagesort" />
+				<label for="tracerPageSort" class="tooltip">Sort properties alphabetically
+					<span class="tooltipText">When viewing a page or parameters top-level properties and pages will be
+						sorted alphabetically in descending order. OOTB order appears to be random.</span>
+				</label>
+				<br />		
 				
 				<!-- 
 					Open:
@@ -349,6 +351,12 @@ <h2>About this extension</h2>
 					<span class="tooltipText"></span>
 				</label>
 			</div>
+			<div>
+				<p>please consider supporting development of the extension</p>
+				<a href='https://ko-fi.com/X8X0H5EOT' target='_blank' rel="noopener noreferrer">
+					<img height='36' style='border:0px;height:48px;' src='https://storage.ko-fi.com/cdn/brandasset/kofi_s_tag_dark.png' border='0' alt='Buy Me a Beer at ko-fi.com' />
+				</a>
+			</div>
 		</div>
 	</div>
 	<script src="shared.js"></script>
diff --git a/tracer/tracer_PegaRulesetSelection.html b/tracer/tracer_PegaRulesetSelection.html
index ca89d18a..92aa9922 100644
--- a/tracer/tracer_PegaRulesetSelection.html
+++ b/tracer/tracer_PegaRulesetSelection.html
@@ -1,5 +1,4 @@
-
-<td class="dataLabelStyle"align="left">
+<td class="dataLabelStyle" align="left">
     <button type="button" title="Select Pega* rulesets" id="PDTSelectPegaRulesets">
         <span class="buttonLeft"></span>
         <span class="buttonMiddle">
@@ -10,7 +9,7 @@
         <span class="buttonRight"></span>
     </button>
 </td>
-<td class="dataLabelStyle"align="left">
+<td class="dataLabelStyle" align="left">
     <button type="button" title="Deselect Pega* rulesets" id="PDTDeselectPegaRulesets">
         <span class="buttonLeft"></span>
         <span class="buttonMiddle">
diff --git a/tracer/tracer_button.html b/tracer/tracer_button.html
index 0b59dfaa..0e0ce165 100644
--- a/tracer/tracer_button.html
+++ b/tracer/tracer_button.html
@@ -1,12 +1,12 @@
 <div class="btnPDTGroup greyPDT initiallyHidden" data-count="1">
     <button class="btnPDT leftPill" id="btnPDTBookmarksPrev" title="Previous">
-        <span class="arrow down"></span>
+        <span class="arrow transformDown"></span>
     </button>
 
     <button class="btnPDT" id="btnPDTBookmarks">Bookmarks</button>
 
     <button class="btnPDT rightPill" id="btnPDTBookmarksNext" title="Next">
-        <span class="arrow up"></span>
+        <span class="arrow transformUp"></span>
     </button>
 </div>
 
diff --git a/tracer/tracer_event.js b/tracer/tracer_event.js
index a8416968..731018b8 100644
--- a/tracer/tracer_event.js
+++ b/tracer/tracer_event.js
@@ -1,10 +1,9 @@
+//TODO: remove jQuery
 console.log("PDT: tracer/tracer_event.js");
 PDT.setScriptsApplied();
 
-//TODO: remove jQuery
-
-//FEATURE: Mark row on right-click
-$("div#traceEvent-CONTAINER").on("contextmenu", "td#eventLineNumber", function (evt) { evt.preventDefault(); $(this).parent().toggleClass("PegaDevToolsTextRed"); });
+// //FEATURE: Mark row on right-click
+// $("div#traceEvent-CONTAINER").on("contextmenu", "td#eventLineNumber", function (evt) { evt.preventDefault(); $(this).parent().toggleClass("PegaDevToolsTextRed"); });
 
 //FEATURE: Remove columns
 const removeThreadNameButton = $('<span title="Remove column" class="removeColumn">x</span>');
@@ -64,7 +63,6 @@ const menuLineNumberStructure = [
                     newTextContent += "" + document.querySelectorAll("td[data-PDTbookmark]").length;
                 }
             bookmarksButton.querySelector("button#btnPDTBookmarks").textContent = newTextContent;
-
         }
     },    
     { isDivider: true },
diff --git a/tracer/tracer_pegaRulesetSelection.html b/tracer/tracer_pegaRulesetSelection.html
index 4f269969..92aa9922 100644
--- a/tracer/tracer_pegaRulesetSelection.html
+++ b/tracer/tracer_pegaRulesetSelection.html
@@ -1,4 +1,3 @@
-
 <td class="dataLabelStyle" align="left">
     <button type="button" title="Select Pega* rulesets" id="PDTSelectPegaRulesets">
         <span class="buttonLeft"></span>

From b37b5e2d479d9ee4af73cecc54a585077e9ec84c Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Tue, 20 Dec 2022 22:32:19 +0100
Subject: [PATCH 03/12] Update devstudio_rule.js

---
 devstudio/devstudio_rule.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/devstudio/devstudio_rule.js b/devstudio/devstudio_rule.js
index fffc9211..d147eb47 100644
--- a/devstudio/devstudio_rule.js
+++ b/devstudio/devstudio_rule.js
@@ -43,9 +43,13 @@ function siteConfigCallback(siteConfig, globalConfig) {
         
         //FEATURE: show button to copy pzInskey to clipboard
         document.querySelectorAll('div[node_name="pzRuleFormKeysAndDescription"] span.workarea_header_titles')[0].insertAdjacentHTML('beforebegin', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopypzInsKey()" title="Copy pzInsKey"><i  class="icons pi pi-copy" style="color: white" id="CopypzInsKey"></i></a>')
+
+        //FEATURE: extra refresh button
+        document.querySelector("div.layout-noheader-workarea_header div.item-2.float-right").insertAdjacentHTML("afterend", '<div class="float-right content-item"><button onclick="pd(event);" class="Simple pzhc pzbutton" tabindex="0" role="menuitem" data-ctl="" data-click="[[&quot;refresh&quot;,[&quot;currentharness&quot;,&quot;&quot;,&quot;pxLPRefreshActivity&quot;,&quot;{\&quot;sp\&quot;:\&quot;=\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;&quot;,&quot;pxLPRefreshTransform,{\&quot;sp\&quot;:\&quot;\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;:event&quot;,&quot;&quot;,&quot;pyLanding&quot;]]]">Refresh</button></div>')
     }
 }
 
+//TODO: use arrive.js
 function waitUntilRenderRS() {
     mainDiv =  document.querySelector("a[name^='RuleFormHeader']") || document.querySelector('a.custom_RuleOpener') || document.querySelector('div[node_name="pzRuleFormKeysAndDescription"]');
     if (mainDiv) {

From 3e892f001b71f54a433a1a119c8ec4dc26874d8a Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 21 Dec 2022 00:40:03 +0100
Subject: [PATCH 04/12] prevent console errors

---
 js/expandTracerMessagesOnLoad.js |  7 ++++---
 settings.js                      | 15 ++++++---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/js/expandTracerMessagesOnLoad.js b/js/expandTracerMessagesOnLoad.js
index ff823e7a..fa9cddf5 100644
--- a/js/expandTracerMessagesOnLoad.js
+++ b/js/expandTracerMessagesOnLoad.js
@@ -1,5 +1,6 @@
-if (document.getElementById("messageContent").style.display == "none") {
+let messageContent = document.getElementById("messageContent");
+
+if (messageContent && messageContent.style.display == "none") {
 	toggleMessages();
     console.log("PDT: expandTracerMessagesOnLoad.js executed");
-}
-
+}
\ No newline at end of file
diff --git a/settings.js b/settings.js
index e533d527..d9c5dd68 100644
--- a/settings.js
+++ b/settings.js
@@ -1,4 +1,4 @@
-browser = (window.browser)? window.browser : window.chrome;
+browser = (window.browser) ? window.browser : window.chrome;
 
 // Saves options to browser.storage
 function saveSiteConfig() {
@@ -78,7 +78,7 @@ function saveSettings() {
 }
 
 // Restores select box and checkbox state using the preferences stored in browser.storage
-function restore_options() {
+function restoreOptions() {
   browser.storage.sync.get(["siteConfig", "settings"], function (data) {
     console.log(data);
     $(data.siteConfig).each(function (index, element) {
@@ -115,20 +115,14 @@ function restore_options() {
     document.querySelector("input#devstudioMouseScrollTabs").checked = (data.settings.devstudio.mouseScrollTabs)?data.settings.devstudio.mouseScrollTabs:"";
     document.querySelector("input#devstudioUseTabMenu").checked = (data.settings.devstudio.useTabMenu)?data.settings.devstudio.useTabMenu:"";
     document.querySelector("input#devstudioTabColorCoding").checked = (data.settings.devstudio.tabColorCoding)?data.settings.devstudio.tabColorCoding:"";
-    devstudioTabColorCoding
-    
+
     if(typeof data.settings.agilestudio === "undefined") data.settings.agilestudio = {};
     document.querySelector("input#enableAgilestudio").checked = (data.settings.agilestudio.enabled)?data.settings.agilestudio.enabled:"";
 
     if(typeof data.settings.deploymentmanager === "undefined") data.settings.deploymentmanager = {};
     document.querySelector("input#enableDeploymentManager").checked = (data.settings.deploymentmanager.enabled)?data.settings.deploymentmanager.enabled:"";
-
   });
 }
-document.addEventListener('DOMContentLoaded', restore_options);
-document.getElementById('saveSiteConfig').addEventListener('click', saveSiteConfig);
-document.getElementById('saveSettings').addEventListener('click', saveSettings);
-
 
 function addSite() {
   let newOptionsHtml = '<div id="siteRow">'
@@ -145,6 +139,9 @@ function addSite() {
   });
 }
 
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.getElementById('saveSiteConfig').addEventListener('click', saveSiteConfig);
+document.getElementById('saveSettings').addEventListener('click', saveSettings);
 document.getElementById('addSite').addEventListener('click', addSite);
 
 //event delegation

From 5e0ee327a1b3b5f3c120b7a86914b86ff375989b Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 21 Dec 2022 01:11:24 +0100
Subject: [PATCH 05/12] cleanup

---
 background.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/background.js b/background.js
index a702da35..f205ba19 100644
--- a/background.js
+++ b/background.js
@@ -1,8 +1,4 @@
-if (typeof browser === "undefined") {
-    var browser = chrome;
-}
-
-
+var browser = (browser) ? browser : chrome;
 
 //TODO: modularize
 // try {
@@ -10,11 +6,6 @@ if (typeof browser === "undefined") {
 //   } catch (e) {
 // 	console.error(e);
 //}
-// chrome.webNavigation.onCompleted.addListener(info => {
-// 	if (changeInfo.status === "complete") {
-// 	  // ...
-// 	}
-//   });
 
 function injectScript(injectedScript, tabId, frameId) {
 	browser.scripting.executeScript({
@@ -45,10 +36,6 @@ browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
 	}	
 	else if (request.purpose == "getFrameId")
 		sendResponse({ frameId: sender.frameId });
-	// else if (request.purpose == "paragraphRule") {
-	// 	injectScriptsToIframe(sender.tab.id, sender.frameId, paragraphScriptList);
-	// 	sendResponse("ok ");
-	//} 
 	else if (request.purpose == "appendScript") {
 		appendScript(request.appendedScript, sender.tab.id, sender.frameId);
 		sendResponse("appending to tab " + sender.tab.id + " frame " + sender.frameId);		
@@ -223,7 +210,6 @@ function reloadContentScripts(tabId, frameId, url) {
 
 }
 
-
 function pingFrame(tabId, frameId) {
 	browser.tabs.sendMessage(
 		tabId,

From 51ba52e0dd8ad363a0f52da29235b743f7b0a7f7 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 21 Dec 2022 01:12:58 +0100
Subject: [PATCH 06/12] "dark" mode

---
 settings.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/settings.html b/settings.html
index 80f481ac..17b16e87 100644
--- a/settings.html
+++ b/settings.html
@@ -9,8 +9,8 @@
 	<script src="resources\jquery-3.4.1.min.js"></script>
 	<style>
 		body {
-			color: #181818;
-			background-color: #FEFCFE;
+			color: #eee;
+			background-color: #3e4b55;
 			font-family: OpenSans, Arial;
 		}
 
@@ -43,7 +43,7 @@
 		.tooltip {
 			position: relative;
 			display: inline-block;
-			border-bottom: 1px dotted black;
+			border-bottom: 1px dotted #fff;
 		}
 
 		.helper {
@@ -359,7 +359,7 @@ <h2>About this extension</h2>
 			</div>
 		</div>
 	</div>
-	<script src="shared.js"></script>
+	<!-- <script src="shared.js"></script> -->
 	<script src="settings.js"></script>
 </body>
 

From fc7afe934b27ac7f9263bc205b0d9daed595df44 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 21 Dec 2022 13:27:38 +0100
Subject: [PATCH 07/12] use arrive.js

---
 devstudio/devstudio_rule.js | 46 +++++++++++++------------------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/devstudio/devstudio_rule.js b/devstudio/devstudio_rule.js
index d147eb47..8e6f7368 100644
--- a/devstudio/devstudio_rule.js
+++ b/devstudio/devstudio_rule.js
@@ -2,9 +2,6 @@ console.log("PDT: devstudio/devstudio_rule.js");
 
 PDT.setScriptsApplied();
 
-var tries = 0;
-var mainDiv;
-
 //TODO: open rule class in app explorer
 // function openRuleClassInAppExplorer() {
 //     showRuleInAppExplorer("Rule-HTML-Section", "RULE-OBJ-CLASS");
@@ -28,43 +25,32 @@ function siteConfigCallback(siteConfig, globalConfig) {
         injectScript("/js/", "copyNameClass.js");
 
         //FEATURE: copy rule info (name, class, ruleset) in a format to be pasted into a table
-        if($('a.custom_RuleOpener').eq(0)) {
+        document.arrive("a.custom_RuleOpener", {onceOnly: true, existing: true}, function() {
             $('a.custom_RuleOpener').eq(0).after('<a class="rule-details" style="margin-top:0; margin-bottom:0;padding-left: 4px;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyNameAndClass()" title="Copy name, class and ruleset"><i  class="icons pi pi-copy" id="CopyNameAndClass"></i></a>');
-        }
+        });
         
         //FEATURE: copy class name
-        let classElem = document.querySelector("a[name^='RuleFormHeader']") || (document.querySelector("span[tile='Class Name']"));
-        if(classElem) {
-            classElem.insertAdjacentHTML('afterend', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyClassName()" title="Copy class name"><i  class="icons pi pi-copy" id="CopyClassName"></i></a>');
-        } else {
+        document.arrive("a[name^='RuleFormHeader'], span[tile='Class Name']", {onceOnly: true, existing: true}, function() {
+            this.insertAdjacentHTML('afterend', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyClassName()" title="Copy class name"><i  class="icons pi pi-copy" id="CopyClassName"></i></a>');
+        //} else {
             //TODO: show class name
             //document.querySelector('div#PEGA_HARNESS').getAttribute('classname');
-        }
+        //}
+        });
         
         //FEATURE: show button to copy pzInskey to clipboard
-        document.querySelectorAll('div[node_name="pzRuleFormKeysAndDescription"] span.workarea_header_titles')[0].insertAdjacentHTML('beforebegin', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopypzInsKey()" title="Copy pzInsKey"><i  class="icons pi pi-copy" style="color: white" id="CopypzInsKey"></i></a>')
-
-        //FEATURE: extra refresh button
-        document.querySelector("div.layout-noheader-workarea_header div.item-2.float-right").insertAdjacentHTML("afterend", '<div class="float-right content-item"><button onclick="pd(event);" class="Simple pzhc pzbutton" tabindex="0" role="menuitem" data-ctl="" data-click="[[&quot;refresh&quot;,[&quot;currentharness&quot;,&quot;&quot;,&quot;pxLPRefreshActivity&quot;,&quot;{\&quot;sp\&quot;:\&quot;=\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;&quot;,&quot;pxLPRefreshTransform,{\&quot;sp\&quot;:\&quot;\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;:event&quot;,&quot;&quot;,&quot;pyLanding&quot;]]]">Refresh</button></div>')
-    }
-}
-
-//TODO: use arrive.js
-function waitUntilRenderRS() {
-    mainDiv =  document.querySelector("a[name^='RuleFormHeader']") || document.querySelector('a.custom_RuleOpener') || document.querySelector('div[node_name="pzRuleFormKeysAndDescription"]');
-    if (mainDiv) {
-        siteConfig(siteConfigCallback);
-    } else {
-        tries = tries + 1;
-        console.log(tries);
-        if (tries > 10) return;
-        setTimeout(() => {
-            waitUntilRenderRS();
-        }, 500);
+        document.arrive('div[node_name="pzRuleFormKeysAndDescription"] span.workarea_header_titles', {onceOnly: true, existing: true}, function() {
+            document.querySelectorAll('div[node_name="pzRuleFormKeysAndDescription"] span.workarea_header_titles')[0].insertAdjacentHTML('beforebegin', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopypzInsKey()" title="Copy pzInsKey"><i  class="icons pi pi-copy" style="color: white" id="CopypzInsKey"></i></a>')
+        });    
+
+        // //TODO: extra refresh button
+        // document.arrive('div[node_name="RuleFormHeader"] > div', {onceOnly: true, existing: true}, function() {
+        //     this.insertAdjacentHTML("afterend", '<div class="float-right content-item"><button onclick="pd(event);" class="Simple pzhc pzbutton" tabindex="0" role="menuitem" data-ctl="" data-click="[[&quot;refresh&quot;,[&quot;currentharness&quot;,&quot;&quot;,&quot;pxLPRefreshActivity&quot;,&quot;{\&quot;sp\&quot;:\&quot;=\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;&quot;,&quot;pxLPRefreshTransform,{\&quot;sp\&quot;:\&quot;\&quot;,\&quot;dp\&quot;:\&quot;\&quot;}&quot;,&quot;:event&quot;,&quot;&quot;,&quot;pyLanding&quot;]]]">Refresh</button></div>')
+        // });
     }
 }
 
-waitUntilRenderRS();
+siteConfig(siteConfigCallback);
 injectSidebarToggle();
 injectCloseShortcut();
 

From 00ca6b4de123390accf225f4290706f9eafa098a Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 8 Feb 2023 01:07:25 +0100
Subject: [PATCH 08/12] Fullscreen clipboard

---
 clipboard/clipboard.js | 5 +++++
 settings.html          | 6 ++++++
 settings.js            | 2 ++
 tracer/tracer_page.js  | 5 +++--
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/clipboard/clipboard.js b/clipboard/clipboard.js
index c7d0fd61..41c2edab 100644
--- a/clipboard/clipboard.js
+++ b/clipboard/clipboard.js
@@ -75,6 +75,11 @@ function siteConfigCallback(siteConfig, globalConfig) {
 		injectScript("/resources/", "jquery-3.4.1.min.js");
 		injectScript("/resources/", "jquery.filtertable.min.js");
 
+		//FEATURE: Display in fullscreen
+		if (globalConfig.settings.clipboard.fullscreen) {
+			PDT.makeFullscreen();
+		}
+
 		addpyWorkPageLink();
 		addnewAssignPage();
 		injectScript("/clipboard/", "inject_clipboard.js");
diff --git a/settings.html b/settings.html
index 17b16e87..4bb0c469 100644
--- a/settings.html
+++ b/settings.html
@@ -229,6 +229,11 @@ <h3>
 					<span class="tooltipText">Makes navigation easier on bigger monitors.</span>
 				</label>
 				<br />
+				<input type="checkbox" id="clipboardFullscreen" data-pdt-setting-name="clipboardFullscreen" />
+				<label for="clipboardFullscreen" class="tooltip">Display fullscreen
+					<span class="tooltipText">Resizes Clipboard popup</span>
+				</label>
+				<br />				
 			</span>
 
 			<h3>
@@ -302,6 +307,7 @@ <h3>
 					Deployment Manager
 					<hr />
 				</h3>
+			</span>
 				<span>
 					<p class="margin-top-0 margin-bottom-small">
 						Changes favicon
diff --git a/settings.js b/settings.js
index d9c5dd68..0fefc458 100644
--- a/settings.js
+++ b/settings.js
@@ -37,6 +37,7 @@ function saveSettings() {
   settings.favicon = document.querySelector("select#favicon").value;
   settings.clipboard = new Object();
   settings.clipboard.split5050 = document.querySelector("input#clipboardSplit5050").checked;
+  settings.clipboard.fullscreen = document.querySelector("input#clipboardFullscreen").checked;
   settings.clipboard.disabled = document.querySelector("input#disableClipboard").checked;
   settings.tracer = new Object();
   settings.tracer.disabled = document.querySelector("input#disableTracer").checked;
@@ -97,6 +98,7 @@ function restoreOptions() {
     document.querySelector("select#favicon").value = (data.settings.favicon)?data.settings.favicon:"small";
     if(typeof data.settings.clipboard === "undefined") data.settings.clipboard = {};
     document.querySelector("input#clipboardSplit5050").checked = (data.settings.clipboard.split5050)?data.settings.clipboard.split5050:"";
+    document.querySelector("input#clipboardFullscreen").checked = (data.settings.clipboard.fullscreen)?data.settings.clipboard.fullscreen:"";
     document.querySelector("input#disableClipboard").checked = (data.settings.clipboard.disabled)?data.settings.clipboard.disabled:"";
     if(typeof data.settings.tracer === "undefined") data.settings.tracer = {};
     document.querySelector("input#disableTracer").checked = (data.settings.tracer.disabled)?data.settings.tracer.disabled:"";
diff --git a/tracer/tracer_page.js b/tracer/tracer_page.js
index fd2e7efc..15f30574 100644
--- a/tracer/tracer_page.js
+++ b/tracer/tracer_page.js
@@ -119,7 +119,7 @@ function addSearch() {
         searchBox.type = 'text';
         searchBox.placeholder = 'properties and values';
         searchBox.onkeyup = function() {
-          let searchText = searchBox.value.toLowerCase();
+          let searchText = searchBox.value.toLowerCase().trim();
           let rows = table.getElementsByTagName('tr');
           for (let i = 1; i < rows.length; i++) {
             let row = rows[i];
@@ -141,7 +141,8 @@ function addSearch() {
         };
 
         return searchBox;
-      }
+    }
+    
     let mainTable = getMainTable();
     if (mainTable) {
         let searchBox = createSearchBox(mainTable);

From f0db864594c92afd2d85a7dd2bd1781fc95d4de0 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 8 Feb 2023 18:33:06 +0100
Subject: [PATCH 09/12] split view initial

---
 devstudio/devstudio_tabs.js | 49 +++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/devstudio/devstudio_tabs.js b/devstudio/devstudio_tabs.js
index 067eb046..08bd9191 100644
--- a/devstudio/devstudio_tabs.js
+++ b/devstudio/devstudio_tabs.js
@@ -31,11 +31,46 @@ function applyTabMenu() {
             }
         },
         { isDivider: true },
+        {
+            text: "ŀ Move to split view",
+            action: () => {
+                let tabId = document.querySelector("div[data-node-id='pzStudioContainerTabs'] div.tStrCntr ul li[aria-selected='true']").id;
+                let tabDynamicContainer = document.querySelector(`div.dynamicContainer[aria-labelledby='${tabId}']`)
+                if(tabDynamicContainer) {
+                    tabDynamicContainer.style.width = "50%";
+                    tabDynamicContainer.style.display = "block";
+                }
+
+                tabId = tabClicked.id;
+                tabDynamicContainer = document.querySelector(`div.dynamicContainer[aria-labelledby='${tabId}']`)
+                if(tabDynamicContainer) {
+                    tabDynamicContainer.style.width = "50%";
+                    tabDynamicContainer.style.right = "0";
+                    tabDynamicContainer.style.display = "block";
+                }
+                else {
+                    alert('Oops, something went wrong');
+                }                
+            }
+        },
+        {
+            text: "ŀ Exit split view",
+            action: () => {
+                let tabId = document.querySelector("div[data-node-id='pzStudioContainerTabs'] div.tStrCntr ul li[aria-selected='true']").id;
+                let tabDynamicContainer = document.querySelector(`div.dynamicContainer[aria-labelledby='${tabId}']`)
+                if(tabDynamicContainer) {
+                    tabDynamicContainer.style.width = "100%";
+                    tabDynamicContainer.style.display = "block";
+                }
+
+                document.querySelector('div.dynamicContainer[style*="width: 50%"]').style = "display: hidden";               
+            }
+        },          
+        { isDivider: true },
         {
             text: "⦻ Close tab",
             action: () => { if(tabClicked.querySelector('#close')) tabClicked.querySelector('#close').click(); }
         },    
-        { isDivider: true },
         {
             text: "☓ Close this menu",
             action: () => { /* empty action just closes menu */  }        
@@ -49,7 +84,17 @@ function applyTabMenu() {
         function (evt) { 
             evt.preventDefault();
             tabClicked = this;
-            ctxmenu.show(menuDefinition, evt);
+            let menuDefinitionEditable = menuDefinition.slice();;
+            //let menuDefinitionEditable = structuredClone(menuDefinition);
+            //let menuDefinitionEditable = JSON.parse(JSON.stringify(menuDefinition));
+
+            if(evt.currentTarget.classList.contains("selected")) {
+                //remove split view
+                menuDefinitionEditable.splice(5, 1);
+            } else {
+                menuDefinitionEditable.splice(6, 1);
+            }
+            ctxmenu.show(menuDefinitionEditable, evt);
     });
 }
 

From fe6c7958f0f68a1a1202cb5ee2289a78911780d8 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Wed, 31 May 2023 15:04:20 +0200
Subject: [PATCH 10/12] Tracer options reliability

---
 manifest.json            |  3 +--
 tracer/tracer_options.js | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/manifest.json b/manifest.json
index 4ced8c15..57a6f2eb 100644
--- a/manifest.json
+++ b/manifest.json
@@ -261,8 +261,7 @@
 				"tracer/tracer_options.js"
 			],
 			"all_frames": true,
-			"match_about_blank": true,
-			"run_at": "document_end"
+			"match_about_blank": true
 		},
 		{
 			"matches": [
diff --git a/tracer/tracer_options.js b/tracer/tracer_options.js
index 517d679c..71dc5b8b 100644
--- a/tracer/tracer_options.js
+++ b/tracer/tracer_options.js
@@ -24,7 +24,10 @@ function getSelectedEventTypes() {
 
 function getSelectedRulesets() {
 	let rulesetArray = new Array();
-	document.querySelectorAll("div#RuleSetDisplay table table td.dataLabelStyle").forEach(function (val) { if (val.querySelector("input[type='CHECKBOX']:checked")) (rulesetArray.push(val.textContent)) });
+	if(document.querySelector("input[type='CHECKBOX']#pzTraceAllRulesets").checked != true)
+		document.querySelectorAll("div#RuleSetDisplay table table td.dataLabelStyle").forEach(function (val) { if (val.querySelector("input[type='CHECKBOX']:checked")) (rulesetArray.push(val.textContent)) });
+	else
+		rulesetArray.push("ENABLE_ALL");
 	return rulesetArray;
 }
 let optionSets = new Array();
@@ -107,6 +110,12 @@ function loadOptionSet() {
 		loadEventTypes(selectedOptionSet.eventTypes);
 		loadRulesets(selectedOptionSet.rulesets);
 	}
+	//Update status to let user know options were loaded
+	let status = document.getElementById('status');
+	status.textContent = 'Configuration loaded';
+	setTimeout(function () {
+		status.textContent = '';
+	}, 750);
 }
 
 function loadEventTypes(eventTypes) {
@@ -119,6 +128,20 @@ function loadEventTypes(eventTypes) {
 }
 
 function loadRulesets(rulesets) {
+	let allRulesetsCheckbox = document.querySelector("input[type='CHECKBOX']#pzTraceAllRulesets");
+
+	if(rulesets[0] === "ENABLE_ALL" && allRulesetsCheckbox.checked != true) {
+		allRulesetsCheckbox.click();
+		allRulesetsCheckbox.checked = true;
+		return;
+	}
+
+	if(rulesets[0] !== "ENABLE_ALL" && allRulesetsCheckbox.checked == true) {
+		allRulesetsCheckbox.click();
+		allRulesetsCheckbox.checked = false;
+		//sleep(100);
+	}
+
 	document.querySelectorAll("div#RuleSetDisplay table table td.dataLabelStyle").forEach(function (val) { 
 		let checkBox = val.querySelector("input[type='CHECKBOX']");
 		if(checkBox) {

From 93e25034d508f1f72c321ed28a9659d46920396e Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Tue, 10 Oct 2023 00:57:15 +0200
Subject: [PATCH 11/12] sync with Dev branch

---
 .github/FUNDING.yml               |   2 +
 PegaDevTools.code-workspace       |   3 +
 README.md                         |   7 +-
 README.md.bak                     |  64 +++++
 clipboard/clipboard.js            |   9 +-
 devstudio/datapage.js             |   2 +-
 devstudio/devstudio_activity.js   |   3 +-
 devstudio/devstudio_flow.js       |   2 +-
 devstudio/devstudio_rule.js       |   4 +-
 js/copyDPcall.js                  |   2 +-
 js/copyNameClass.js               |   5 +-
 js/makeRuleNamesLonger.js         |   2 +-
 js/tracerMarkNavigatedPage.js     |  19 +-
 js/tracerMarkNavigatedPage.js.bak |   8 +
 manifest.json                     |   7 +-
 resources/shared.js               |   2 +-
 resources/shared.js.bak           | 458 ++++++++++++++++++++++++++++++
 17 files changed, 579 insertions(+), 20 deletions(-)
 create mode 100644 .github/FUNDING.yml
 create mode 100644 README.md.bak
 create mode 100644 js/tracerMarkNavigatedPage.js.bak
 create mode 100644 resources/shared.js.bak

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..e7b1c401
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+ko_fi: pegadevguy
+patreon: pegadevguy
\ No newline at end of file
diff --git a/PegaDevTools.code-workspace b/PegaDevTools.code-workspace
index 8828d036..3418ebcc 100644
--- a/PegaDevTools.code-workspace
+++ b/PegaDevTools.code-workspace
@@ -34,11 +34,14 @@
 			"Marcin",
 			"matchtags",
 			"nocopy",
+			"noopener",
+			"noreferrer",
 			"ootb",
 			"OOTB",
 			"pagesort",
 			"Pega",
 			"pegacloud",
+			"portalharnessinsname",
 			"prweb",
 			"pzInskey",
 			"PRXML",
diff --git a/README.md b/README.md
index 5d218b28..99cbf734 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# **PegaDevTools**
+# **PegaDevTools (PDT)**
 
-PDT is browser-only (i.e. no ruleset deployment is required) Pega 8 developer productivity tool.
+PDT is a browser-based developer productivity tool for Pega 8, designed to enhance your development experience without the need for ruleset deployment. The extension primarily targets Chromium-based browsers (Chrome, Edge, Opera, etc.).
 
 **Check out available features in the [PDT Wiki](https://github.com/marcin-l/PegaDevTools/wiki)**
 
@@ -35,8 +35,9 @@ If you found a bug or have a new idea/feature for the extension, [you can report
 ### Post-installation steps
 - Go to [Extension Options](https://github.com/marcin-l/PegaDevTools/wiki/Configuration). In the **Site config** section add your environment by domain name (e.g. *client-dt1.pegacloud.net*, without *https://*) and click **Save site configuration**. Turn on features in the **Settings** section and click **Save settings**.
 - Reload your Pega tabs if needed
+<br>Some features will not work if this step is skipped
 
-### Updating
+## Updating to a New Version
 - Overwrite extension with new download, your settings will be left intact
 - Go to Chrome/Edge settings
 - Click **Extensions**
diff --git a/README.md.bak b/README.md.bak
new file mode 100644
index 00000000..5d218b28
--- /dev/null
+++ b/README.md.bak
@@ -0,0 +1,64 @@
+# **PegaDevTools**
+
+PDT is browser-only (i.e. no ruleset deployment is required) Pega 8 developer productivity tool.
+
+**Check out available features in the [PDT Wiki](https://github.com/marcin-l/PegaDevTools/wiki)**
+
+Extension development is mostly targeting chromium-based browsers, but it should for the most part work in Firefox.
+
+## Issues and feature requests
+Check the [Issues](https://github.com/marcin-l/PegaDevTools/issues) page to see things to be fixed and features to be implemented.
+
+If you found a bug or have a new idea/feature for the extension, [you can report them](https://github.com/marcin-l/PegaDevTools/issues/new).
+
+## How to use
+- Download (or clone) the extension using green button on the top of this page
+**Code -> Download ZIP**
+- Unpack downloaded zip file
+
+<img src="https://raw.githubusercontent.com/wiki/marcin-l/PegaDevTools/images/installation.png" />
+
+### Chrome and Edge
+- Go to Chrome/Edge settings
+- Click **Extensions**
+- Enable **Developer mode**
+- Click on **Load Unpacked** and select your unpacked zip file directory
+
+### Firefox
+- go to **about:debugging** URL
+- click on **This Firefox** button on the left
+- click on **Load Temporary Add-on...** button
+- navigate your unpacked zip file directory
+- select any file in the directory and click **Open**
+- Please note that this method is not persistent. Extension needs to be loaded for each Firefox session.
+
+### Post-installation steps
+- Go to [Extension Options](https://github.com/marcin-l/PegaDevTools/wiki/Configuration). In the **Site config** section add your environment by domain name (e.g. *client-dt1.pegacloud.net*, without *https://*) and click **Save site configuration**. Turn on features in the **Settings** section and click **Save settings**.
+- Reload your Pega tabs if needed
+
+### Updating
+- Overwrite extension with new download, your settings will be left intact
+- Go to Chrome/Edge settings
+- Click **Extensions**
+- Reload PegaDevTools
+- Check the PDT Options to see if there are any new features to be enabled
+
+## Known issues and limitations
+- System rules customizations in Dev studio will stop working when a rule is refreshed (to be addressed in the future). Reopening the rule will restore customizations.
+- Some features will not work when Dev Studio is language other than English. I recommend to use the "ignore locale" option in user preferences.
+- Not all customizations will load if you open your application in App or Admin Studio. As a workaround set _Developer_ portal as default one for your Access Group.
+
+## Credits
+Tracer feature to navigate to first Error and Message is based on Piotr Olejniczak's idea.
+
+### Contributors
+* [Mariusz Woźnica](https://github.com/woznica1970)
+
+### Third-party libraries (MIT license)
+- [arrive.js](https://github.com/uzairfarooq/arrive)
+- [CodeMirror](https://codemirror.net/)
+- [ctxmenu.js](https://github.com/nkappler/ctxmenu)
+- [Huebee](https://huebee.buzz)
+- [jQuery](https://jquery.com/)
+- [jQuery.FilterTable](https://github.com/sunnywalker/jQuery.FilterTable)
+- [Tinycon](https://github.com/tommoor/tinycon)
\ No newline at end of file
diff --git a/clipboard/clipboard.js b/clipboard/clipboard.js
index 41c2edab..bc82d4af 100644
--- a/clipboard/clipboard.js
+++ b/clipboard/clipboard.js
@@ -12,6 +12,7 @@ function addpyWorkPageLink() {
 		let clsNameFull = extractClassName(title, true);
 		if (clsName)
 			jQuery("header").append(' <i class="dark_background_label_dataLabelForRead" title="' + clsNameFull + '">(' + clsName + ')</i> ');
+		pyWorkPage.style.fontWeight = "bold";
 		console.log('PDT pyWorkPage found');
 	}
 
@@ -25,6 +26,7 @@ function addpyWorkPageLink() {
 		let clsNameFull = extractClassName(title, true);
 		if (clsName)
 			jQuery("header").append(' <i class="dark_background_label_dataLabelForRead" title="' + clsNameFull + '">(' + clsName + ')</i> ');
+		pyWorkPage.style.fontWeight = "bold";
 		console.log('PDT RH_1 found');
 	}
 		// else {
@@ -38,11 +40,12 @@ function addnewAssignPage() {
 
 	let newAssignPage = jQuery("#gridNode li.gridRow ul li").has("span[title^='newAssignPage']")[0];
 	if (newAssignPage) {
-		jQuery("header").append(" <a id='devToolsGoToAssignPage' class='Explorer_action'>newAssignPage</a>");
-		jQuery("#devToolsGoToAssignPage").click(function () { jQuery("#gridNode li.gridRow ul li").has("span[title^='newAssignPage']").first().trigger("click"); });
 		let clsName = extractClassName(jQuery("#gridNode li.gridRow ul li span[title^='newAssignPage']")[0].title);
-		if (clsName) {
+		if (clsName && clsName !== "Assign-") {
+			jQuery("header").append(" <a id='devToolsGoToAssignPage' class='Explorer_action'>newAssignPage</a>");
+			jQuery("#devToolsGoToAssignPage").click(function () { jQuery("#gridNode li.gridRow ul li").has("span[title^='newAssignPage']").first().trigger("click"); });
 			jQuery("header").append(' <i class="dark_background_label_dataLabelForRead" title="' + clsName + '">(' + clsName + ')</i>');
+			newAssignPage.style.fontWeight = "bold";
 		}
 	}
 }
diff --git a/devstudio/datapage.js b/devstudio/datapage.js
index 8c5f4f87..ed59f09a 100644
--- a/devstudio/datapage.js
+++ b/devstudio/datapage.js
@@ -19,4 +19,4 @@ document.arrive("div[node_name='pzRuleFormParameters'] h2", {onceOnly: true, exi
 		'<div>' + dpCallString + ' <a href="#" onclick="return CopyDPCall()"><i class="icons pi pi-copy" id="CopyName" title="Copy to clipboard"></i></a></div><div id="status"></div>'
 	);
 
-});
+});
\ No newline at end of file
diff --git a/devstudio/devstudio_activity.js b/devstudio/devstudio_activity.js
index 94363720..8c996b88 100644
--- a/devstudio/devstudio_activity.js
+++ b/devstudio/devstudio_activity.js
@@ -1,5 +1,4 @@
 // console.log("PDT: devstudio/devstudio_activity.js");
 //PDT.setScriptsApplied();
 //document.querySelectorAll("table ul.gridNode li.gridRow[pl_index]")
-// //injectRuleExport();
-
+// //injectRuleExport();
\ No newline at end of file
diff --git a/devstudio/devstudio_flow.js b/devstudio/devstudio_flow.js
index 1e67f1b5..ca32dd53 100644
--- a/devstudio/devstudio_flow.js
+++ b/devstudio/devstudio_flow.js
@@ -6,4 +6,4 @@ injectCloseShortcut();
 
 document.arrive("div.gfw-breadcrumbs ul li", {onceOnly: true, existing: true}, () => {
     injectScript("/js/", "injectFlowType.js"); 
-});
+});
\ No newline at end of file
diff --git a/devstudio/devstudio_rule.js b/devstudio/devstudio_rule.js
index 8e6f7368..34fb1ed0 100644
--- a/devstudio/devstudio_rule.js
+++ b/devstudio/devstudio_rule.js
@@ -30,8 +30,8 @@ function siteConfigCallback(siteConfig, globalConfig) {
         });
         
         //FEATURE: copy class name
-        document.arrive("a[name^='RuleFormHeader'], span[tile='Class Name']", {onceOnly: true, existing: true}, function() {
-            this.insertAdjacentHTML('afterend', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyClassName()" title="Copy class name"><i  class="icons pi pi-copy" id="CopyClassName"></i></a>');
+        document.arrive("a[name^='RuleFormHeader'], span[title='Class Name']", {onceOnly: true, existing: true}, function() {
+            this.insertAdjacentHTML('afterend', '<a style="margin-top:0; margin-bottom:0;padding-bottom: 3px;padding-top: 0;" href="#" onclick="return CopyClassName()" title="Copy class name"><i class="icons pi pi-copy" id="CopyClassName"></i></a>');
         //} else {
             //TODO: show class name
             //document.querySelector('div#PEGA_HARNESS').getAttribute('classname');
diff --git a/js/copyDPcall.js b/js/copyDPcall.js
index 5db4a6db..9860bcf7 100644
--- a/js/copyDPcall.js
+++ b/js/copyDPcall.js
@@ -1,5 +1,5 @@
 function CopyDPCall(noCopy) {
-	dpCallString = document.querySelector("span[title='Page Name']").innerText + "[";
+	let dpCallString = document.querySelector("span[title='Page Name']").innerText + "[";
 	document.querySelectorAll("div[node_name='pzRuleFormParameters'] div#gridBody_right table.gridTable  tr.cellCont").forEach(function (row) {
 		if (row.querySelector("input") && row.querySelector("input").value) {
 			dpCallString += row.querySelector("input").value + ": \"" + "\", "
diff --git a/js/copyNameClass.js b/js/copyNameClass.js
index bc3625aa..917505e0 100644
--- a/js/copyNameClass.js
+++ b/js/copyNameClass.js
@@ -17,7 +17,10 @@ function CopyClassName() {
 	if(xml && xml.val()) {
 		xml = xml.val().replace('<?xml version="1.0" ?>', '').replace("<?xml version='1.0' ?>", "");
     	$xml = $($.parseXML(xml));
-    	copyText = $xml.find("pyClassName")[0].textContent;
+		if($xml.find("pyClassName").length>0)
+	    	copyText = $xml.find("pyClassName")[0].textContent;
+		else
+			copyText = document.querySelector("span[title='Class Name'").innerText;
 	} else if(document.querySelector("a[name^='pzDataTypeKeysAndDescription'")){
 		copyText = document.querySelector("a[name^='pzDataTypeKeysAndDescription'").innerText;
 	}
diff --git a/js/makeRuleNamesLonger.js b/js/makeRuleNamesLonger.js
index 7f4bc082..7347d238 100644
--- a/js/makeRuleNamesLonger.js
+++ b/js/makeRuleNamesLonger.js
@@ -27,4 +27,4 @@ if(containerTabListNames) {
     );
 }
 
-console.log("PDT: makeRuleNamesLonger.js loaded"); 
+console.log("PDT: makeRuleNamesLonger.js loaded"); 
\ No newline at end of file
diff --git a/js/tracerMarkNavigatedPage.js b/js/tracerMarkNavigatedPage.js
index 1d4df66a..c819d3d1 100644
--- a/js/tracerMarkNavigatedPage.js
+++ b/js/tracerMarkNavigatedPage.js
@@ -1,8 +1,25 @@
 function markNavigatedPage(e) {
+	function animateCell(cell) {
+		cell.style.border = "solid black";
+		cell.style.borderWidth = "6px 0 6px";
+		let animate = function() {
+			let borderWidth = parseInt(cell.style.borderWidth);
+			if (borderWidth > 0) {
+				borderWidth--;
+				cell.style.borderWidth = borderWidth + "px 0 " + borderWidth + "px";
+				setTimeout(animate, 64);
+		  	}
+		};
+		animate();
+	}
+
 	document
 		.querySelectorAll("tr.eventTable")
 		.forEach((el) => (el.style.backgroundColor = "#EFEFEF")); //revert highlight
 	let eid = e.getAttribute("href");
 	eid = eid.replaceAll("(", "\\(").replaceAll(")", "\\)"); //escape chars which querySelector doesn't like
-	document.querySelector(eid).parentNode.style.backgroundColor = "LightYellow";
+	let elem = document.querySelector(eid);
+	animateCell(elem);
+	animateCell(elem.nextSibling);
+	elem.parentNode.style.backgroundColor = "LightYellow";
 }
\ No newline at end of file
diff --git a/js/tracerMarkNavigatedPage.js.bak b/js/tracerMarkNavigatedPage.js.bak
new file mode 100644
index 00000000..1d4df66a
--- /dev/null
+++ b/js/tracerMarkNavigatedPage.js.bak
@@ -0,0 +1,8 @@
+function markNavigatedPage(e) {
+	document
+		.querySelectorAll("tr.eventTable")
+		.forEach((el) => (el.style.backgroundColor = "#EFEFEF")); //revert highlight
+	let eid = e.getAttribute("href");
+	eid = eid.replaceAll("(", "\\(").replaceAll(")", "\\)"); //escape chars which querySelector doesn't like
+	document.querySelector(eid).parentNode.style.backgroundColor = "LightYellow";
+}
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 4ced8c15..6fd29021 100644
--- a/manifest.json
+++ b/manifest.json
@@ -38,7 +38,7 @@
 			],
 			"js": [
 				"resources/jquery-3.4.1.min.js",
-				"resources/arrive.min.js",				
+				"resources/arrive.min.js",
 				"resources/shared.js",
 				"resources/tinycon.min.js"
 		
@@ -95,7 +95,8 @@
 				"*://*/prweb/*action=openRuleSpecific*portalName=Developer*",
 				"*://*/prweb/*action=createNewWork*portalName=Developer*",
 				"*://*/prweb/*/*eventSrcSection=Embed-PropertyValidation*",
-				"*://*/prweb/*/*action=openRuleByClassAndName*"
+				"*://*/prweb/*/*action=openRuleByClassAndName*",
+				"*://*/prweb/*/*action=openRuleByKeys*"
 			],
 			"all_frames": true,
 			"js": [
@@ -262,7 +263,7 @@
 			],
 			"all_frames": true,
 			"match_about_blank": true,
-			"run_at": "document_end"
+			"run_at": "document_idle"
 		},
 		{
 			"matches": [
diff --git a/resources/shared.js b/resources/shared.js
index db9bbbc9..737d30d3 100644
--- a/resources/shared.js
+++ b/resources/shared.js
@@ -425,7 +425,7 @@ function isInDevStudio() {
 function injectRuleExport() {
 	let selection = document.querySelector("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links");
 	if(selection) {
-		selection.insertAdjacentHTML("beforeend", "<a onclick='copyRuleTableContent()'>Export</a>");
+		selection.insertAdjacentHTML("beforeend", "<a onclick='copyRuleTableContent()' title='Copy to clipboard'>Export</a>");
 		injectScript("/js/", "copyRuleTableContent.js");
 	}
 }
diff --git a/resources/shared.js.bak b/resources/shared.js.bak
new file mode 100644
index 00000000..db9bbbc9
--- /dev/null
+++ b/resources/shared.js.bak
@@ -0,0 +1,458 @@
+console.log("PDT: resources/shared.js");
+
+browser = window.browser || window.chrome;
+
+// //TODO: deprecated?
+// window.browser = (function () {
+// 	return window.msBrowser || window.browser || window.browser;
+// })();
+
+class PDT {
+	static {
+	}
+
+	static init() {
+		this.settings = {};
+		
+		browser.storage.sync.get(["settings", "siteConfig"], (data) => {
+			//this.settings = await getObjectFromLocalStorage("settings");
+
+			this.settings = data.settings;
+			if(typeof this.settings === "undefined") this.settings = {};
+			if(typeof this.settings.tracer === "undefined") this.settings.tracer = {};
+			if(typeof this.settings.clipboard === "undefined") this.settings.clipboard = {};
+			if(typeof this.settings.devstudio === "undefined") this.settings.devstudio = {};
+			PDT.debug("storage settings load");
+
+			//var siteConfigs = await getObjectFromLocalStorage("siteConfig");
+
+			this.hasConfigForSite = false;
+			if (data.siteConfig) {
+				for (let i = 0; i < data.siteConfig.length; i++) {
+					if (window.location.href.includes(data.siteConfig[i].site)) {
+						this.siteConfig = data.siteConfig[i];
+						this.hasConfigForSite = true;
+						if(this.siteConfig.color) {
+							this.siteConfig.color = this.siteConfig.color.replace("#", '');
+							if (this.siteConfig.color.length === 3) {
+								this.siteConfig.color = this.siteConfig.color.split('').map((hex) => {
+									return hex + hex;
+								}).join('');
+							}
+							if(this.siteConfig.color[0] != "#") 
+								this.siteConfig.color = "#" + this.siteConfig.color;
+						}
+						break;
+					}
+				}
+			}
+
+			document.arrive("body", { onceOnly: true, existing: true}, (elem) => {
+				let skip = PDT.shouldSkipContentForDocument(elem);
+				if(!skip)
+					elem.setAttribute("data-PDTSettings", "loaded");
+				else
+					PDT.debug("skipped data-PDTSettings");
+			});
+
+			PDT.debug("storage settings load");
+
+		});
+	}
+
+	save() {
+		browser.storage.sync.set({ settings: this.settings });
+	}
+
+	get(key) {
+		return this.settings[key];
+	}
+
+	static isTracerEnabled() {
+		return !(this.settings.tracer.disabled);
+	}
+
+	static isClipboardEnabled() {
+		return !(this.settings.clipboard.disabled);
+	}
+
+	static isDevstudioEnabled() {
+		return !(this.settings.devstudio && this.settings.devstudio.disabled);
+	}
+
+	static isAgilestudioEnabled() {
+		return (this.settings.agilestudio && this.settings.agilestudio.enabled);
+	}
+
+	static isDeploymentManagerEnabled() {
+		return (this.settings.deploymentmanager && this.settings.deploymentmanager.enabled);
+	}
+
+	static isDebugEnabled() {
+		return this.settings.debug;
+	}
+
+	static isInTracer() {
+		return (window.location.href.includes("Tracer"));
+	}
+	
+	static hasConfigForSite;
+
+	static debug(msg) {
+		if(this.isDebugEnabled()) console.log(msg);
+	}
+
+	static log(msg) {
+		console.log(msg);
+	}
+
+	static isDigit(n) {
+		return !!([!0, !0, !0, !0, !0, !0, !0, !0, !0, !0][n]);
+	}
+
+	static contrastTextColor(backgroundColor) {
+		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+		const getColorLuminance = function(clr) {
+			clr = clr / 255;
+			if(clr <= 0.03928) 
+				return clr / 12.92;
+			else
+				return ((clr + 0.055) / 1.055) ** 2.4;
+		}
+
+		backgroundColor = backgroundColor.replace("#", "");
+		let r = parseInt(backgroundColor.substring(0, 2), 16);
+		let g = parseInt(backgroundColor.substring(2, 4), 16);
+		let b = parseInt(backgroundColor.substring(4, 6), 16);
+		let rs = getColorLuminance(r);
+		let gs = getColorLuminance(g);
+		let bs = getColorLuminance(b);
+	  
+		let L =  (0.2126 * rs) + (0.7152 * gs) + (0.0722 * bs);
+
+		//https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+		//const contrastThreshold = 0.0525; 	// 0.0525 is contrast ratio between white and black 
+		const contrastThreshold = 0.3; 		// favor more lighter text	 
+
+		return (L > contrastThreshold) ? "#000000" : "#FFFFFF";
+	}
+
+	static tabColorCoding = new Map([
+		['RULE-HTML-SECTION', 'green'],
+		['RULE-OBJ-ACTIVITY', 'red'],
+		['RULE-OBJ-MODEL', 'blue'],
+	  ]);
+
+
+	static alterFavicon(forceSmall = false, forceLargeLabel = "", forceColor = "") {
+		//favicon fallback
+		let favicon = document.querySelector("link[rel~='icon']");
+		if (!favicon) {
+			favicon = document.createElement('link');
+			favicon.rel = 'icon';
+			favicon.href = "images/pzPegaIcon.ico";
+			favicon.name = "faviconFallback"
+			document.getElementsByTagName('head')[0].appendChild(favicon);
+		}
+
+		if(this.hasConfigForSite || forceColor) {
+			if(forceLargeLabel || (this.settings.favicon == "large" && this.siteConfig.label && !forceSmall)) {
+				Tinycon.setOptions({
+					width: 16,
+					height: 16,
+					background: (forceColor || this.siteConfig.color),
+					color: this.contrastTextColor(forceColor || this.siteConfig.color),
+					fallback: true
+				});
+				let faviconLabel = forceLargeLabel;
+				if(!faviconLabel) {
+					faviconLabel = this.siteConfig.label[0];
+					if(this.siteConfig.label.length>1) {
+						if(PDT.isDigit(this.siteConfig.label.slice(-1)))
+							faviconLabel += this.siteConfig.label.slice(-1);
+					}
+					if(faviconLabel.length == 1)
+						faviconLabel += " ";
+				}
+				Tinycon.setBubble(faviconLabel);
+			} else {
+				Tinycon.setOptions({
+					width: 16,
+					height: 3,
+					background: this.siteConfig.color,          
+					fallback: true
+				});
+				Tinycon.setBubble(" ");
+			}
+		}
+	}
+
+	static setScriptsApplied() {
+		if(!document.querySelector("input#PDTContent"))
+			document.querySelector("div[data-node-id='RuleFormHeader'], body").insertAdjacentHTML("beforeend",'<input type="hidden" id="PDTContent" value="loaded" />');
+	}
+
+	//TODO: not really working, probably CKE starts with empty body
+	static shouldSkipContentForDocument(document){ 
+		//CKE editor loads a body element which causes hidden input to be appended to paragraph source
+		let skip = false;
+		document.classList.forEach((className) => { if(className.includes("cke")) skip = true; });
+		if(skip) {
+			if(document.querySelector("body"))
+				document.querySelector("body").setAttribute("data-PDTskipContent", true);
+			else
+				PDT.debug("could not set data-PDTskipContent");
+		}
+		return skip;
+	}
+}
+if(typeof PDT.settings ===  "undefined")
+	PDT.init();
+
+function getFrameId() {
+	browser.runtime.sendMessage({ purpose: "getFrameId" }, function (response) {
+		console.log("FrameId: " + response.frameId);
+		return response.frameId;
+	});
+}
+
+// function applyContentScripts(purpose) {
+// 	browser.runtime.sendMessage(
+// 		{ purpose: purpose, tabId: getCurrentTabId() },
+// 		function (response) {
+// 			console.log(response);
+// 		}
+// 	);
+// }
+
+const injectScriptsToIframe = (tabId, frameId, scriptList) => {
+	scriptList.forEach((script) => {
+		console.log(
+			"PDT executeScript tabId: " + tabId +
+			", frameId: " + frameId +
+			": " + `${script}`
+		);
+		browser.tabs.executeScript(
+			tabId,
+			{
+				file: `${script}`,
+				runAt: "document_end",
+				frameId: frameId,
+				//If the script injection fails (without the tab permission and so on) and is not checked in the callback` runtime.lastError `，
+				//It's a mistake. There is no other complicated logic in this example. You don't need to record the tab of successful injection. You can fool it like this.
+			},
+			() => void browser.runtime.lastError
+		);
+	});
+};
+
+const DEBUG = false;
+
+if ($('body[class^="channels-express"] div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle').length) {
+	//change order to match Dev Studio
+	let tracerRef = $(
+		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-tracer)'
+	);
+	$(
+		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-clipboard)'
+	).before(tracerRef);
+
+	//add text
+	$(
+		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-tracer) button'
+	).append("Tracer");
+	$(
+		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-clipboard) button'
+	).append("Clipboard");
+	$(
+		'div[data-node-id="pzRuntimeToolsTopBar"] div.layout-content-pz-inline-middle div:has(i.pi-inspect) button'
+	).append("Live UI");
+}
+
+var copyToClipboard = function copyToClipboard(textContent) {
+	// create hidden text element, if it doesn't already exist
+	let targetId = "_hiddenCopyText_";
+	let target = document.createElement("textarea");
+	target.style.position = "absolute";
+	target.style.left = "-9999px";
+	target.style.top = "0";
+	target.id = targetId;
+	document.body.appendChild(target);
+	target.textContent = textContent;
+
+	// select the content
+	let currentFocus = document.activeElement;
+	target.focus();
+	target.setSelectionRange(0, target.value.length);
+
+	// copy the selection
+	let succeed;
+	try {
+		succeed = document.execCommand("copy");
+	} catch (e) {
+		succeed = false;
+	}
+	// restore original focus
+	if (currentFocus && typeof currentFocus.focus === "function") {
+		currentFocus.focus();
+	}
+
+	target.textContent = "";
+	return succeed;
+};
+
+function messageServiceWorker(purpose) {
+	browser.runtime.sendMessage(
+		{ purpose: purpose }
+	); 
+}
+
+//TODO: not working as of v3, use injectScript with separate files in js folder instead
+function appendScript(appendedScript) {
+	if(PDT.isDebugEnabled)
+		console.log("PDT: appendScript: " + appendedScript);
+	browser.runtime.sendMessage(
+		{ purpose: "appendScript", appendedScript: appendedScript },
+		function (response) {
+			console.log(response);
+		}
+	); 
+}
+
+function injectScript(aBasePath, aScriptURL) {
+	browser.runtime.sendMessage(
+		{ purpose: "injectScript", injectedScript: aBasePath+aScriptURL },
+		function (response) {
+			console.log(response);
+		}
+	); 
+}
+//inject script to toggle sidebar using keyboard shortcut
+function injectSidebarToggle() {
+	injectScript("/js/", "sidebarToggle.js");
+}
+
+//inject script to close tab using keyboard shortcut
+function injectCloseShortcut() {
+	injectScript("/js/", "closeShortcut.js");
+}
+
+//TODO: deprecated?
+function executeScript(injectedCode) {
+	let scriptEl = document.createElement("script");
+	scriptEl.appendChild(document.createTextNode("(" + injectedCode + ")();"));
+	(document.body || document.head || document.documentElement).appendChild(
+		scriptEl
+	);
+}
+
+function extractClassName(sInput, getFull) {
+	if (sInput) {
+		let idx = sInput.indexOf("(");
+		sInput = sInput.substring(idx != -1 ? idx + 1 : 0);
+		if (sInput[sInput.length - 1] === ")")
+			sInput = sInput.substring(0, sInput.length - 1);
+		if (getFull) return sInput;
+		if (sInput.includes("Work-")) sInput = sInput.split("Work-")[1];
+		else if (sInput.includes("Assign-")) sInput = sInput.split("Assign-")[1];
+		else if (sInput.includes("-")) {
+			let sInputLength = sInput.split("-").length;
+			sInput = (sInputLength>3)? sInput.split("-")[sInputLength - 2] + "-" + sInput.split("-")[sInputLength - 1] : sInput.split("-")[sInputLength - 1];
+		}
+		return sInput;
+	}
+}
+
+function injectStyles(rule) {
+	$("<div />", {
+		//html: '&shy;<style>' + rule + '</style>'
+		html: "<style>" + rule + "</style>",
+	}).appendTo("body");
+}
+
+function replaceInnerHTML(elem, html) {
+	const parser = new DOMParser();
+	const parsed = parser.parseFromString(html, `text/html`);
+	elem.appendChild(parsed);
+}
+
+function siteConfig(callback) {
+	//get label and color config
+	browser.storage.sync.get(["siteConfig", "settings"], (data) => {
+		console.log(data);
+		//find config for current url
+		let configForSiteFound = false;
+		if (data.siteConfig) {
+			for (let i = 0; i < data.siteConfig.length; i++) {
+				if (window.location.href.includes(data.siteConfig[i].site)) {
+					callback(data.siteConfig[i], data);
+					configForSiteFound = true;
+					break;
+				}
+			}
+		}
+		if (!configForSiteFound) callback(null, data);
+		// $(data.siteConfig).each(function (index, site) {
+		//     if (window.location.href.includes(site.site)) {
+		//         callback(site, data);
+		//     }
+		// });
+	});
+}
+
+//TODO: ugly, try not to use it
+function sleep(milliseconds) {
+	let start = new Date().getTime();
+	while (new Date() < start + milliseconds) {}
+	return 0;
+}
+
+function isInDevStudio() {
+	//NOTE: ugly but works
+	return (
+		document.querySelector(
+			"span#TABANCHOR span.textIn, span#TABANCHOR[tabtitle='Home']"
+		) &&
+		document.querySelector(
+			"span#TABANCHOR span.textIn, span#TABANCHOR[tabtitle='Home']"
+		).innerText.startsWith("Home")
+	);
+	//TODO: get Pega api object
+	// if(pega.desktop.support.isInDesignerDesktop)
+	//     return pega.desktop.support.isInDesignerDesktop();
+}
+
+function injectRuleExport() {
+	let selection = document.querySelector("div[data-node-id='pzRuleFormRuleset'] div.primary-navigation-links");
+	if(selection) {
+		selection.insertAdjacentHTML("beforeend", "<a onclick='copyRuleTableContent()'>Export</a>");
+		injectScript("/js/", "copyRuleTableContent.js");
+	}
+}
+
+const getObjectFromStorage = async function (key) {
+	return new Promise((resolve, reject) => {
+		try {
+			browser.storage.sync.get(key, function (value) {
+				resolve(value[key]);
+			});
+		} catch (ex) {
+			reject(ex);
+		}
+	});
+};
+
+browser.runtime.onMessage.addListener(function(msg) {
+	if(msg.purpose == "PingContent") {
+		if (document.querySelector("input#PDTContent")) {
+			//messageServiceWorker('OK');
+		}
+		else if(document.querySelector("body") && document.querySelector("body").hasAttribute("data-PDTskipContent")) {
+			//messageServiceWorker('OK');
+		}
+		else {
+			console.log("PDT requesting content script reload");
+			messageServiceWorker('reloadContentScripts');
+		}
+	}
+})

From 72d829ca6725585e8058954e18a0015e13aa5e39 Mon Sep 17 00:00:00 2001
From: marcin-l <marcinx@gmail.com>
Date: Thu, 11 Jul 2024 01:21:53 +0200
Subject: [PATCH 12/12] Update .gitignore

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 709dad01..4444e30e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ resources/codemirror/htmlmixed.html
 resources/codemirror/javascript.html
 resources/codemirror/jsxjava.html
 clipboard.experimental.js
+*.bak
+devstudio/devstudio_notes.js