v3.15 Updates

README.md

@@ -48,6 +48,17 @@ It is open source so feel free to check the source code.
 
 ## Changelog
 
+### 3.15.0
+- [Improvement] UI Bugfixes (Dark-mode Darker color for trace, Trace-inline tool editor detect mode you selected by default).
+- [Improvement] xml declaration added while prettify code is not gonna removed.
+- [Plugin] Performance stats plugin has better color for dark mode.
+- [Feature] Color mode detected a theme and applied by default (in case of dark mode)
+- [Feature] More compatibale with DARK CPI extension dark mode
+- [Feature] position of popup with state aware.
+- [Feature] Download Option for body only with proper extension.
+- [Feature] Text wrap Option and theme of editor has clear information.
+- [Feature] General UI BigFix & backend global element to organize. [read more here with snapshot notes](https://github.com/dbeck121/CPI-Helper-Chrome-Extension/pull/194). Special thanks to [Omkar](https://github.com/incpi).
+
 ### 3.14.0
 
 - [Improvement] Update to Manifest V3. This is a major and necessary under the hood update and may cause some issues. Please report any issues.
@@ -60,16 +71,16 @@ It is open source so feel free to check the source code.
 - [Plugin] "Credential Helper" Plugin to add a search help for existing Security Material aliases and Key Store entries. Special thanks to Gregor Schütz from [AGILITA AG](https://www.agilita.ch/)
 - [Plugin] "Unlock" Plugin to unlock integration flows directly from design screen. Special thanks to Gregor Schütz from [AGILITA AG](https://www.agilita.ch/).
 - [Plugin] "Timeline" Plugin now with sorting options. Again special thanks to Gregor Schütz from [AGILITA AG](https://www.agilita.ch/).
-- [Improvement] Filter to remove extra Empty Steps from Trace & Tool is now more compact.Special thanks to [Omkar Patel](https://github.com/incpi).
-- [Feature] The CPi helper extension now includes compatibility with the Dark CPI extension. For **Dark Theme Users** Special thanks to [Omkar Patel](https://github.com/incpi).
-- [Feature] New global Button for all Logging & Security Materials search with All category supported. Special thanks to [Omkar Patel](https://github.com/incpi).
+- [Improvement] Filter to remove extra Empty Steps from Trace & Tool is now more compact.Special thanks to [Omkar](https://github.com/incpi).
+- [Feature] The CPi helper extension now includes compatibility with the Dark CPI extension. For **Dark Theme Users** Special thanks to [Omkar](https://github.com/incpi).
+- [Feature] New global Button for all Logging & Security Materials search with All category supported. Special thanks to [Omkar](https://github.com/incpi).
 - [Feature] Debug Logging button UI as well as by parameters.
-- [Feature] Can select default log level at extension page. Special thanks to [Omkar Patel](https://github.com/incpi).
+- [Feature] Can select default log level at extension page. Special thanks to [Omkar](https://github.com/incpi).
 - [BugFix] Many UI and Bug fixes (adaptations to new SAP Horizon theme)
 
 ### 3.12.1
 
-- [Improvement] Better payload viewer & Update payload directly in trace Body panel. Special thanks to [Omkar Patel](https://github.com/incpi).
+- [Improvement] Better payload viewer & Update payload directly in trace Body panel. Special thanks to [Omkar](https://github.com/incpi).
 - [Improvement] Once trace expired, no popup will be shown instead warning will be given.
 - [Improvement] UI Icon are changed + UI Bugfixes
 - [Feature] Resize Body from Content modifier.
@@ -80,19 +91,19 @@ It is open source so feel free to check the source code.
 ### 3.11.0
 
 - [Feature] Plugin: New Timeline Plugin: Get overview about message flow. Thanks to Gregor Schütz from [AGILITA AG](https://www.agilita.ch/)
-- [Improvement] Create a project webpage on Github with improved structure and design. Special thanks to [Omkar Patel](https://github.com/incpi)
+- [Improvement] Create a project webpage on Github with improved structure and design. Special thanks to [Omkar](https://github.com/incpi)
 - [Bugfix] Some ui fixes
 - [Improvement] Improved stability
 
 ### 3.10.0
 
-- [Feature]Plugin: Trace Step Modifier (Beta) - Performance stats in trace. Thanks to [Omkar Patel](https://github.com/incpi)
+- [Feature]Plugin: Trace Step Modifier (Beta) - Performance stats in trace. Thanks to [Omkar](https://github.com/incpi)
 - [Bugfix] Some ui fixes
 - [Improvement] Improved stability
 
 ### 3.9.0
 
-- [Improvement] Hundreds of ui improvements. Thanks to [Omkar Patel](https://github.com/incpi) for the great contribution
+- [Improvement] Hundreds of ui improvements. Thanks to [Omkar](https://github.com/incpi) for the great contribution
 - UI 3.8.1 fix
 - New Plugin: "Trace Modifier"
   - Trace step uppper limit [Over write Global host variable with iflow variable] [read more](https://incpi.github.io/cpihelper-plugin/)
@@ -111,8 +122,8 @@ It is open source so feel free to check the source code.
 
 ### 3.8.0
 
-- [Improvement] Improved "flying error dialog". No mouse over but you need to klick now. Thanks to [Omkar Patel](https://github.com/incpi)
-- [Improvement] Many more ui improvements. Thanks to [Omkar Patel](https://github.com/incpi)
+- [Improvement] Improved "flying error dialog". No mouse over but you need to klick now. Thanks to [Omkar](https://github.com/incpi)
+- [Improvement] Many more ui improvements. Thanks to [Omkar](https://github.com/incpi)
 - [Feature] Trace survives page reload
 - [Improvement] Logs now sorted
 - [Bugfix] Many small fixes
@@ -155,7 +166,7 @@ It is open source so feel free to check the source code.
 ### 3.4.0
 
 - [Feature] New plugin "Settings Pane Resizer" and many bugfixes. Thanks to [Philippe Addor](https://github.com/fippu82) and BMT Business meets Technology AG
-- [Bugfix] Improved handling of message popup. Thanks to [Omkar Patel](https://github.com/incpi)
+- [Bugfix] Improved handling of message popup. Thanks to [Omkar](https://github.com/incpi)
 
 ### 3.3.2
 

common/logging.js

@@ -72,7 +72,7 @@ function downloadLog() {
     const a = document.createElement('a');
     a.href = url;
     a.download = filename;
-    document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
+    body().appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
     a.click();
     a.remove();
     logsarray = [];

common/tools.js

@@ -9,12 +9,12 @@ function callChromeStoragePromise(key) {
     log.debug("callChromeStoragePromise: ", key)
     var input = key ? [key] : null;
     var storage = await chrome.storage.sync.get(input)
-      if (!key) {
-        resolve(storage);
-        log.debug("callChromeStoragePromise response: ", storage)
-      }
-      resolve(storage[key]);
-  
+    if (!key) {
+      resolve(storage);
+      log.debug("callChromeStoragePromise response: ", storage)
+    }
+    resolve(storage[key]);
+
   });
 }
 
@@ -25,7 +25,7 @@ function syncChromeStoragePromise(keyName, value) {
     myobj[keyName] = value;
     await chrome.storage.sync.set(myobj)
     resolve();
-  
+
   });
 }
 
@@ -254,6 +254,21 @@ let absolutePath = function (href) {
   return (link.protocol + "//" + link.host + link.pathname + link.search + link.hash);
 }
 
+function downloadFile(fileContent, format, filename) {
+  // Create a Blob with the file content
+  const blob = new Blob([fileContent], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const link = $("<a></a>")
+    .attr({
+      href: url,
+      download: `${filename}.${format == "text" ? 'txt' : format}`,
+    })
+    .appendTo("body");
+  link[0].click();
+  link.remove();
+  URL.revokeObjectURL(url);
+}
+
 var formatTrace = function (input, id, traceId) {
   var tab_size = 2;
   var editorManager;
@@ -264,6 +279,8 @@ var formatTrace = function (input, id, traceId) {
     return String(str).replace('&amp;', "&").replace('&lt;', "<").replace('&gt;', ">").replace('&quot;', "\"").replace('&#010;', "\n").replace("&#039;", '\'');
   }
   var formatXml = function (sourceXml, tab_size) {
+    var xmlDeclarationmatch = sourceXml.match(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1\s+encoding\s*=\s*(["'])[^\2]+\2\s*\?>/)
+    var xmlDeclaration = xmlDeclarationmatch ? `${xmlDeclarationmatch[0]}\n` : "";
     //tab_size not implemented yet.
     filterflag = 0;
     var xmlDoc = new DOMParser().parseFromString(`${sourceXml}`, 'application/xml');
@@ -280,7 +297,7 @@ var formatTrace = function (input, id, traceId) {
       '  <xsl:template match="node()|@*">',
       '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
       '  </xsl:template>',
-      '  <xsl:output indent="yes"/>',
+      '  <xsl:output method="xml" indent="yes" omit-xml-declaration="no"/>',
       '</xsl:stylesheet>',
     ].join('\n'), 'application/xml');
 
@@ -289,7 +306,7 @@ var formatTrace = function (input, id, traceId) {
     var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
     var resultXml = new XMLSerializer().serializeToString(resultDoc);
     if (filterflag === 1) { resultXml = resultXml.substring(12, resultXml.length - 13).replaceAll('\n  ', '\n'); }
-    return resultXml
+    return xmlDeclaration + resultXml
   };
   var prettify_type = function (input) {
 
@@ -335,6 +352,14 @@ var formatTrace = function (input, id, traceId) {
       window.open("data:application/zip;base64," + value);
       showToast("Download complete.");
     };
+    //download body only step
+    var DownloadBodyButton = document.createElement("button");
+    DownloadBodyButton.innerText = "Download Body";
+    DownloadBodyButton.onclick = async (element) => {
+      let typeOfInput = prettify_type(input)
+      downloadFile(input, typeOfInput, `CPI_${traceId}_${id}`)
+      showToast("Download of body is complete.");
+    };
   }
 
   var copyButton = document.createElement("button");
@@ -353,8 +378,12 @@ var formatTrace = function (input, id, traceId) {
   };
 
   var themeButton = document.createElement("button");
-  themeButton.innerText = "Color Mode";
-  themeButton.onclick = (event) => editorManager.toggleTheme();
+  themeButton.innerText = `${!$('html').hasClass('sapUiTheme-sap_horizon_dark') ? "Dark" : "Light"} Editor`;
+  themeButton.onclick = (event) => { themeButton.innerText = `${editorManager.toggleTheme() ? "Dark" : "Light"} Editor`; }
+
+  var WrapButton = document.createElement("button");
+  WrapButton.innerText = "No Wrap";
+  WrapButton.onclick = (event) => { WrapButton.innerText = editorManager.toggleWrap() ? "No Wrap" : "Wrap"; }
 
   var readonlyButton = document.createElement("button");
   readonlyButton.innerText = "Edit";
@@ -370,7 +399,7 @@ var formatTrace = function (input, id, traceId) {
     $formatted.toggleClass("cpiHelper_traceText_active", isActive);
     $("#beautifyButton").text(isActive ? "Linearize" : "Beautify");
     if ($formatted.text().trim() === "") {
-      editorManager = new EditorManager("cpiHelper_traceText_formatted_" + id, prettify_type(input));
+      editorManager = new EditorManager("cpiHelper_traceText_formatted_" + id, prettify_type(input), $('html').hasClass('sapUiTheme-sap_horizon_dark') ? "github_dark" : "textmate");
       editorManager.setContent(prettify(input, tab_size))
     }
   }
@@ -385,7 +414,9 @@ var formatTrace = function (input, id, traceId) {
   result.appendChild(copyButton);
   if (traceId) {
     result.appendChild(downloadButton);
+    result.appendChild(DownloadBodyButton);
     result.appendChild(themeButton);
+    result.appendChild(WrapButton);
     result.appendChild(readonlyButton);
   }
 
@@ -583,25 +614,25 @@ function hslToHex(h, s, l) {
   l /= 100;
   let r, g, b;
   if (s === 0) {
-      r = g = b = l;
+    r = g = b = l;
   } else {
-      const hue2rgb = (p, q, t) => {
-          if (t < 0) t += 1;
-          if (t > 1) t -= 1;
-          if (t < 1 / 6) return p + (q - p) * 6 * t;
-          if (t < 1 / 2) return q;
-          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-          return p;
-      };
-      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-      const p = 2 * l - q;
-      r = hue2rgb(p, q, h + 1 / 3);
-      g = hue2rgb(p, q, h);
-      b = hue2rgb(p, q, h - 1 / 3);
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
   }
   const toHex = x => {
-      const hex = Math.round(x * 255).toString(16);
-      return hex.length === 1 ? '0' + hex : hex;
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
   };
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
@@ -616,20 +647,59 @@ function hexToHsl(hex, values = false) {
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
   if (max == min) {
-      h = s = 0; // achromatic
+    h = s = 0; // achromatic
   } else {
-      var d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-      switch (max) {
-          case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-          case g: h = (b - r) / d + 2; break;
-          case b: h = (r - g) / d + 4; break;
-      }
-      h /= 6;
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
   }
   h = Math.round(h * 360);
   s = Math.round(s * 100);
   l = Math.round(l * 100);
   cssString = values ? `${h} ${s} ${l}` : `hsl(${h}deg ${s}% ${l}%)`
   return cssString
+}
+/**
+ * Finds the nearest previous or next integer in an array relative to a target value.
+ * 
+ * used: @incpi - 
+ * findNearest(array, target); Output: { previous: 3, next: 5 }
+ * findNearest(array, target, 'next'); Output: 5
+ * findNearest(array, target, 'previous'); Output: 3
+ * @param {number[]} array - The array of numbers to search through.
+ * @param {number} target - The target value to find the nearest integers to.
+ * @param {string} [direction='both'] - The direction to search for nearest integer(s). 
+ *                                      'both' returns both previous and next, 
+ *                                      'previous' returns only the previous nearest, 
+ *                                      'next' returns only the next nearest.
+ * @returns {Object|number|null} - The nearest previous and next integers as an object 
+ *                                 if direction is 'both', or a single integer if 
+ *                                 direction is 'previous' or 'next'. Returns null if no 
+ *                                 nearest integer is found in the specified direction.
+ */
+function findNearest(array, target, direction = 'both') {
+  let prev = null;
+  let next = null;
+
+  array.forEach(num => {
+    if (num < target && (prev === null || num > prev)) {
+      prev = num;
+    }
+    if (num > target && (next === null || num < next)) {
+      next = num;
+    }
+  });
+
+  if (direction === 'previous') {
+    return prev;
+  } else if (direction === 'next') {
+    return next;
+  } else {
+    return { previous: prev, next: next };
+  }
 }