Merge branch 'development'

.github/ISSUE_TEMPLATE/provider-request.md

@@ -1,13 +1,13 @@
 ---
-name: Provider Request
-about: Request for a new provider to be added to Omnibug
+name: New Provider Request
+about: Request for a new marketing tool (provider) to be added to Omnibug
 title: ''
-labels: enhancement
+labels: enhancement, provider
 assignees: ''
 
 ---
 
-**What is the name of the provider (marketing tool) you're wanting to add?**
+**What is the name of the provider (marketing tool) you are wanting to add?**
 The name of the tool (e.g. Adobe Analytics)
 
 **Please provide any links to their product pages, documentation, etc.**

Gruntfile.js

@@ -14,7 +14,7 @@ module.exports = function (grunt) {
             },
             "production": {
                 "name": "Omnibug",
-                "version": "1.16.1",
+                "version": "1.17.0",
                 "storageKey": "omnibug",
                 "feedbackUrl": "https://github.com/MisterPhilip/omnibug/issues",
                 "analyticsID": "UA-114343677-2"
@@ -24,13 +24,18 @@ module.exports = function (grunt) {
             "folder": "chromium",
             "tracking": true
         },
+        "edge": {
+            "folder": "edge",
+            "tracking": true
+        },
         "firefox": {
             "gecko": "Omnibug@rosssimpson.com",
             "folder": "firefox",
             "tracking": false
         },
         "clean": {
             "chrome": ["platform/chromium", "build/chrome_*.zip"],
+            "edge": ["platform/edge", "build/edge_*.zip"],
             "firefox": ["platform/firefox", "build/firefox_*.zip"],
             "providers": ["src/providers.js"],
             "test": ["test/source/**"]
@@ -58,6 +63,18 @@ module.exports = function (grunt) {
                     "spawn": false,
                 },
             },
+            "edge": {
+                "files": ["src/**"],
+                "tasks": [
+                    "clean:edge",
+                    "build-copy:edge",
+                    "edge-manifest",
+                    "build-concat:edge"
+                ],
+                "options": {
+                    "spawn": false,
+                },
+            },
             "firefox": {
                 "files": ["src/**"],
                 "tasks": [
@@ -99,7 +116,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks("grunt-eslint");
 
     grunt.registerTask("build-beta", "Build the beta version", (browsers = "") => {
-        let allowedBrowsers = ["chrome", "firefox"];
+        let allowedBrowsers = ["chrome", "edge", "firefox"];
         if (browsers === "") {
             browsers = allowedBrowsers;
         } else {
@@ -125,7 +142,7 @@ module.exports = function (grunt) {
 
 
     grunt.registerTask("build-production", "Build the extensions", (browsers = "") => {
-        let allowedBrowsers = ["chrome", "firefox"];
+        let allowedBrowsers = ["chrome", "edge", "firefox"];
         if (browsers === "") {
             browsers = allowedBrowsers;
         } else {
@@ -167,6 +184,24 @@ module.exports = function (grunt) {
         grunt.log.write("Created Chrome's manifest.json. ").ok();
     });
 
+    grunt.registerTask("edge-manifest", "Build the Edge manifest.json file", function (version = "production") {
+        grunt.config.requires(`extension.${version}.version`);
+
+        let browserOptions = grunt.config("edge"),
+            extensionOptions = grunt.config(`extension.${version}`),
+            manifest = grunt.file.readJSON("src/manifest.json");
+
+        manifest.name = extensionOptions.name;
+        manifest.version = extensionOptions.version;
+
+        // Remove anything that will break Chrome
+        delete manifest.applications;
+        delete manifest.options_ui.browser_style;
+
+        grunt.file.write("platform/" + browserOptions.folder + "/manifest.json", JSON.stringify(manifest, null, 4));
+        grunt.log.write("Created Edge's manifest.json. ").ok();
+    });
+
     grunt.registerTask("firefox-manifest", "Build the Firefox manifest.json file", function (version = "production") {
         grunt.config.requires(`extension.${version}.version`, "firefox.gecko");
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "omnibug",
-    "version": "1.16.1",
+    "version": "1.17.0",
     "description": "Omnibug Extension",
     "main": "Gruntfile.js",
     "scripts": {

src/assets/styles/icons.scss

@@ -12,6 +12,7 @@ $icons: (
     "Bing Ads": $iconPath + "BINGADS16x16.png",
     "Comscore": $iconPath + "COMSCORE16x16.png",
     "Criteo OneTag": $iconPath + "CRITEOONETAG16x16.png",
+    "Demandbase Engagement": $iconPath + "DEMANDBASEENGAGEMENT16x16.png",
     "Ensighten Manage": $iconPath + "ENSIGHTEN16x16.png",
     "Facebook Pixel": $iconPath + "FACEBOOK16x16.png",
     "Google Ads": $iconPath + "GOOGLEADS16x16.png",
@@ -29,6 +30,7 @@ $icons: (
     "Segment": $iconPath + "SEGMENT16x16.png",
     "Snapchat": $iconPath + "SNAPCHAT16x16.png",
     "Tealium IQ": $iconPath + "TEALIUM16x16.png",
+    "TikTok": $iconPath + "TIKTOK16x16.png",
     "Twitter Conversion": $iconPath + "TWITTERPIXEL16x16.png"
 );
 

src/devtools/panel.html

@@ -151,9 +151,7 @@
             </div>
             <div class="modal-body">
                 <div class="content">
-                    <p>Omnibug is a plugin for the Google Chrome and Mozilla Firefox browsers to ease developing and
-                        debugging web metrics implementations. Each outgoing request (sent by the browser) is checked
-                        for a pattern; if a match occurs, the URL is displayed and decoded to show the details of the request.</p>
+                    <p>Omnibug is an extension for most modern browsers to ease implementing and debugging digital marketing tools.</p>
                     <p>Find a bug, feature suggestion, or just have some feedback about Omnibug? <a href="##OMNIBUG_FEEDBACK_URL##" target="_blank">Drop us a note!</a></p>
                     <p>Need help? Check out our <a href="https://omnibug.io/help?utm_source=extension&utm_medium=##BROWSER##&utm_campaign=devtools-help" target="_blank">help section</a> for guides &amp; how to reach out to us!</p>
                     <p>&copy; ##YEAR## <a href="https://misterphilip.com/?utm_source=omnibug&utm_medium=##BROWSER##&utm_campaign=devtools-help" target="_blank">Philip Lawrence</a>

src/devtools/panel.js

@@ -1,4 +1,4 @@
-/* global OmnibugSettings, OmnibugProvider, OmnibugTracker, createElement, clearStyles, clearChildren, showToast, Fuse */
+/* global OmnibugSettings, OmnibugProvider, OmnibugTracker, createElement, clearStyles, clearChildren, showToast, getAppropriateTextColor, Fuse */
 
 /*
  * Omnibug
@@ -156,17 +156,50 @@ window.Omnibug = (() => {
                     if (copyValue === "") {
                         showToast("Value is empty, nothing to copy!", "warning", 5);
                     } else {
-                        navigator.clipboard.writeText(copyValue).then(
-                            () => {
+                        let successCallback = () => {
                                 showToast("Value copied to the clipboard.", "success", 5);
                                 tracker.track(["send", "event", "context menu", "copy", "success"]);
                             },
-                            (reason) => {
+                            failureCallback = (reason) => {
                                 showToast("Unable to copy to the clipboard.", "error");
                                 tracker.track(["send", "event", "context menu", "copy", "error"]);
                                 console.error(reason);
+                            },
+                            fallback = () => {
+                                // sourced from https://gist.github.com/lgarron/d1dee380f4ed9d825ca7
+                                (new Promise((resolve, reject) => {
+                                    let success = false,
+                                        listener = (e) => {
+                                            e.clipboardData.setData("text/plain", copyValue);
+                                            e.preventDefault();
+                                            success = true;
+                                        };
+                                    document.addEventListener("copy", listener);
+                                    document.execCommand("copy");
+                                    document.removeEventListener("copy", listener);
+                                    success ? resolve() : reject();
+                                })).then(successCallback, failureCallback);
+                            };
+                        navigator.permissions.query({
+                            name: "clipboard-write"
+                        }).then(permissionStatus => {
+                            if(permissionStatus.state === "granted") {
+                                // Future versions of Firefox and/or Chrome will use this in conjunction with clipboard-write
+                                navigator.clipboard.writeText(copyValue).then(successCallback, failureCallback);
+                            } else {
+                                // Newer Chromium browsers have "clipboard-write" as a permission, but don't allow it in extensions due to Feature Policies
+                                fallback();
+                            }
+                        }).catch((e) => {
+                            try {
+                                // Firefox doesn't have the clipboard-write permission, but allows navigator.clipboard to work
+                                navigator.clipboard.writeText(copyValue).then(successCallback, failureCallback);
+                            } catch(ee) {
+                                // This shouldn't happen, but used as a fallback
+                                console.log("copy is falling back because of ", ee.message);
+                                fallback();
                             }
-                        );
+                        });
                     }
                 }
             }
@@ -880,14 +913,14 @@ window.Omnibug = (() => {
      * @param fromStorage
      */
     function loadSettings(newSettings = {}, fromStorage = false) {
-        let styleSheet = d.getElementById("settingsStyles"),
-            defaults = (new OmnibugSettings).defaults;
+        let styleSheet = d.getElementById("settingsStyles");
+        const defaults = (new OmnibugSettings).defaults;
 
-        settings = Object.assign(defaults, newSettings);
+        const settings = Object.assign({}, defaults, newSettings);
 
         let theme = settings.theme,
-            themeType = settings.theme === "auto" ? "auto" : "manual";
-        if (settings.theme === "auto") {
+            themeType = theme === "auto" ? "auto" : "manual";
+        if (themeType === "auto") {
             if (chrome.devtools.panels && chrome.devtools.panels.themeName === "dark") {
                 theme = "dark";
             } else {
@@ -939,14 +972,16 @@ window.Omnibug = (() => {
         // Highlight colors
         if (settings.highlightKeys.length) {
             let highlightPrefix = "[data-parameter-key=\"",
-                highlightKeys = highlightPrefix + settings.highlightKeys.join(`"], ${highlightPrefix}`) + "\"]",
+                highlightKeys = highlightPrefix + settings.highlightKeys.join(`" i], ${highlightPrefix}`) + "\" i]",
                 rule = "";
 
             if (defaults.color_highlight !== settings.color_highlight) {
-                rule = `${highlightKeys} { background-color: ${settings.color_highlight} !important; } `;
+                const highlightedTextColor = getAppropriateTextColor(settings.color_highlight);
+
+                rule = `${highlightKeys} { background-color: ${settings.color_highlight} !important; color: ${highlightedTextColor}; } `;
                 styleSheet.sheet.insertRule(rule, styleSheet.sheet.cssRules.length);
             } else {
-                rule = `${highlightKeys} { background-color: #ffff00 !important; } `;
+                rule = `${highlightKeys} { background-color: #ffff00 !important; color: #000; } `;
                 styleSheet.sheet.insertRule(rule, styleSheet.sheet.cssRules.length);
 
                 // Add in dark theme
@@ -955,11 +990,6 @@ window.Omnibug = (() => {
                 rule = ` ${highlightKeys} { background-color: rgba(47, 132, 218, 0.75) !important; color: #ddd; } `;
                 styleSheet.sheet.insertRule(rule, styleSheet.sheet.cssRules.length);
             }
-
-            if (defaults.color_highlight !== settings.color_highlight) {
-                rule = `${highlightKeys} { background-color: ${settings.color_highlight} !important; }`;
-                styleSheet.sheet.insertRule(rule, styleSheet.sheet.cssRules.length);
-            }
         }
 
         // Reverse the direction of the entries to show newest first
@@ -1172,4 +1202,4 @@ window.Omnibug = (() => {
             // do nothing, let the devtools.js update this method
         }
     };
-})();
+})();

src/libs/helpers.js

@@ -96,4 +96,19 @@ const showToast = (message, type = "primary", timeout = 10) => {
     window.setTimeout(() => {
         toastDiv.remove();
     }, timeout * 1000);
-};
+};
+
+/**
+ * Get the appropriate text color for a given background color
+ *
+ * @param bgColor   string  The hexadecimal background color
+ */
+// eslint-disable-next-line no-unused-vars
+const getAppropriateTextColor = (bgColor = "#FFFFFF") => {
+    bgColor = bgColor.replace("#", "");
+    const r = parseInt(bgColor.substr(0,2),16),
+        g = parseInt(bgColor.substr(2,2),16),
+        b = parseInt(bgColor.substr(4,2),16),
+        yiq = ((r*299)+(g*587)+(b*114))/1000;
+    return (yiq >= 128) ? "#000" : "#FFF";
+};

src/options/options.html

@@ -25,7 +25,9 @@ <h1>Omnibug Settings</h1>
             </div>
             <p class="help">Select parameters to highlight to easily see values. The values here should be the raw parameter names,
                 <em>not</em> the friendly names you see.<br />For example, for Adobe Analytics, to highlight <code>eVar10</code>, you should use <code>v10</code>.
-                You can find the raw parameter names by hovering over the parameter name in Omnibug and it'll appear in parenthesis.</p>
+                You can find the raw parameter names by hovering over the parameter name in Omnibug and it'll appear in parenthesis.
+                These keys are case-insensitive.
+            </p>
         </fieldset>
 
         <fieldset>
@@ -34,7 +36,7 @@ <h1>Omnibug Settings</h1>
               <div class="col">
                   <ul id="addSummary-params"></ul>
                   <span id="addSummaryStatus"></span>
-                  <input type="text" id="addSummary" placeholder="Add parameter, maximum of 3"></input>
+                  <input type="text" id="addSummary" placeholder="Add parameter, maximum of 3" />
               </div>
           </div>
           <p class="help">Specify up to 3 additional values you wish to see in the summary list view. The values here should be the parameter names as 
@@ -277,7 +279,11 @@ <h1>Omnibug Settings</h1>
                     </datalist>
                 </div>
             </div>
-            <p class="help">You can override the background color for parameters that are highlighted (see "Highlight parameters" setting above).</p>
+            <p class="help">
+                You can override the background color for parameters that are highlighted (see "Highlight parameters" setting above).
+                <em>Note:</em> for dark mode users, Omnibug will automatically switch this from the default yellow (<code>#ffff00</code>)
+                to a blue, but this can be overwritten if preferred. Simply change the color from <code>#ffff00</code> to any other value.
+            </p>
         </fieldset>
 
         <fieldset class="color">

src/options/options.js

@@ -1,4 +1,4 @@
-/* globals OmnibugSettings, OmnibugProvider, OmnibugTracker, createElement, clearStyles, clearChildren, Fuse */
+/* globals OmnibugSettings, OmnibugProvider, OmnibugTracker, createElement, clearStyles, clearChildren, getAppropriateTextColor, Fuse */
 (function() {
 
     // Setup GA tracker
@@ -228,7 +228,9 @@
         let newParam = event.target.value,
             paramList = document.getElementById("highlight-params");
 
-        if(newParam.trim() !== "" && settings.highlightKeys.indexOf(newParam) === -1) {
+        if(newParam.trim() !== "" && !settings.highlightKeys.filter((key) => {
+            return key.toLowerCase() === newParam.toLowerCase();
+        }).length) {
             paramList.appendChild(createHighlightParam(newParam));
 
             settings.highlightKeys.push(newParam);
@@ -430,6 +432,7 @@
         clearStyles(styleSheet);
 
         // Add any rules
-        styleSheet.sheet.insertRule(`#highlight-params > li { background-color: ${settings.color_highlight} !important; }`, styleSheet.sheet.cssRules.length);
+        const highlightedTextColor = getAppropriateTextColor(settings.color_highlight);
+        styleSheet.sheet.insertRule(`#highlight-params > li { background-color: ${settings.color_highlight} !important; color: ${highlightedTextColor} }`, styleSheet.sheet.cssRules.length);
     }
-}());
+}());