Revert the activeTab change and fix locale issues in Firefox

chrome/config/manifest.json

@@ -5,11 +5,12 @@
 	"default_locale": "en_US",
   "description": "__MSG_extensionDescription__",
   "homepage_url":	"@url@",
+  "host_permissions": ["<all_urls>"],
   "icons": { "16": "/img/logos/color/16.png", "32":  "/img/logos/color/32.png", "48":  "/img/logos/color/48.png", "64":  "/img/logos/color/64.png", "128": "/img/logos/color/128.png", "256": "/img/logos/color/256.png" },
   "manifest_version": 3,
   "name": "__MSG_extensionName__",
   "options_page":	"/options/options.html",
-  "permissions": ["activeTab", "browsingData", "contentSettings", "cookies", "history", "scripting", "storage", "tabs"],
+  "permissions": ["browsingData", "contentSettings", "cookies", "history", "scripting", "storage", "tabs"],
   "version": "@version@",
   "web_accessible_resources": [{ "matches": ["<all_urls>"], "resources": ["/embedded/css/*.css", "/embedded/js/dashboard/dashboard.js", "/features/css/*.css", "/img/transparent.png", "/lib/bootstrap/bootstrap.css", "/lib/bootstrap/bootstrap.js", "/lib/reset.css", "/svg/logos/color/logo.svg"], "use_dynamic_url": true }]
 }

common/gulp/build.js

@@ -185,6 +185,14 @@ global.buildOptions = function(browserName)
 
 global.buildOverlay = function(browserName)
 {
+  var overlaySrc = ["common/js/overlay/*"];
+
+  // If this is Firefox or Opera do not include the disable overlay script
+  if(browserName === "firefox" || browserName === "opera")
+  {
+    overlaySrc = ["common/js/overlay/*", "!common/js/overlay/disable.js"];
+  }
+
   return merge(
     gulp.src("common/html/overlay/overlay.html")
       .pipe(global.filterProperties(browserName)())
@@ -193,7 +201,7 @@ global.buildOverlay = function(browserName)
       .pipe(plugins.concat("overlay.css"))
       .pipe(global.filterProperties(browserName)())
       .pipe(gulp.dest("build/" + browserName + "/overlay/css")),
-    gulp.src(["common/js/overlay/*"])
+    gulp.src(overlaySrc)
       .pipe(plugins.concat("overlay.js"))
       .pipe(global.filterProperties(browserName)())
       .pipe(gulp.dest("build/" + browserName + "/overlay/js"))

common/js/common/common.js

@@ -70,20 +70,12 @@ WebDeveloper.Common.adjustElementPosition = function(element, xPosition, yPositi
 };
 
 // Adjusts the position of the given element
-WebDeveloper.Common.appendHTML = function(html, element, contentDocument)
+WebDeveloper.Common.appendHTML = function(html, element)
 {
-  // If the HTML, element and content document are set
-  if(html && element && contentDocument)
+  // If the HTML and element are set
+  if(html && element)
   {
-    var htmlElement = contentDocument.createElement("div");
-
-    htmlElement.innerHTML = html;
-
-    // While there children of the HTML element
-    while(htmlElement.firstChild)
-    {
-      element.appendChild(htmlElement.firstChild);
-    }
+    element.insertAdjacentHTML("beforeend", html);
   }
 };
 
@@ -874,14 +866,16 @@ WebDeveloper.Common.isCSSURI = function(property)
 // Logs a message
 WebDeveloper.Common.log = function(message, exception)
 {
+  var consoleMessage = "WEB DEVELOPER LOG: " + message;
+
   // If an exception is set
   if(exception)
   {
-    console.warn(message, exception); // eslint-disable-line no-console
+    console.warn(consoleMessage, exception); // eslint-disable-line no-console
   }
   else
   {
-    console.warn(message); // eslint-disable-line no-console
+    console.warn(consoleMessage); // eslint-disable-line no-console
   }
 };
 

common/js/embedded/dashboard/dashboard.js

@@ -6,7 +6,7 @@ WebDeveloper.Dashboard.resizing = false;
 // Adjusts the bottom margin of the body
 WebDeveloper.Dashboard.adjustBodyBottomMargin = function(contentDocument, height)
 {
-  WebDeveloper.Common.getDocumentBodyElement(contentDocument).style.setProperty("margin-bottom", parseInt(height, 10) + 20 + "px", "important");
+  WebDeveloper.Common.getDocumentBodyElement(contentDocument).style.setProperty("padding-bottom", parseInt(height, 10) + 20 + "px", "important");
 };
 
 // Closes a dashboard tab
@@ -171,7 +171,7 @@ WebDeveloper.Dashboard.openDashboardTab = function(tabId, tabTitle, contentDocum
   WebDeveloper.Common.removeClass(tabs.querySelector(".active"), "active");
 
   tabs.insertAdjacentHTML("afterbegin", templates.tab);
-  WebDeveloper.Common.appendHTML(templates.panel, panels, dashboardDocument);
+  WebDeveloper.Common.appendHTML(templates.panel, panels);
 
   return dashboardDocument.getElementById(tabId + "-panel");
 };

common/js/embedded/dashboard/edit-css.js

@@ -6,11 +6,12 @@ WebDeveloper.EditCSS.interval        = null;
 WebDeveloper.EditCSS.updateFrequency = 500;
 
 // Adds a tab
-WebDeveloper.EditCSS.addTab = function(title, css, tabs, panels, position, contentDocument)
+WebDeveloper.EditCSS.addTab = function(title, css, tabs, panels, position)
 {
   var active    = "";
   var templates = "";
 
+  // If the position is 1
   if(position == 1)
   {
     active = "active";
@@ -19,8 +20,8 @@ WebDeveloper.EditCSS.addTab = function(title, css, tabs, panels, position, conte
   // Get the edit CSS tab templates
   templates = WebDeveloper.EditCSS.getEditCSSTabTemplates({ active: active, css: css, position: position, title: title });
 
-  WebDeveloper.Common.appendHTML(templates.panel, panels, contentDocument);
-  WebDeveloper.Common.appendHTML(templates.tab, tabs, contentDocument);
+  WebDeveloper.Common.appendHTML(templates.panel, panels);
+  WebDeveloper.Common.appendHTML(templates.tab, tabs);
 };
 
 // Applies the CSS
@@ -168,7 +169,7 @@ WebDeveloper.EditCSS.resize = function(dashboard)
   // If the edit CSS panels exist
   if(editCSSPanels)
   {
-    editCSSPanels.style.height = dashboard.offsetHeight - editCSSPanels.offsetTop - 1 + "px";
+    editCSSPanels.style.height = dashboard.offsetHeight - editCSSPanels.offsetTop - 2 + "px";
   }
 };
 
@@ -192,21 +193,21 @@ WebDeveloper.EditCSS.retrieveCSS = function(dashboardPanel, editCSSPanel, locale
     {
       styleSheet = response[i];
 
-      WebDeveloper.EditCSS.addTab(WebDeveloper.Dashboard.formatURL(styleSheet.url), styleSheet.content, tabs, panels, position, dashboardDocument);
+      WebDeveloper.EditCSS.addTab(WebDeveloper.Dashboard.formatURL(styleSheet.url), styleSheet.content, tabs, panels, position);
 
       position++;
     }
 
     // If there are embedded styles
     if(documentCSS.embedded)
     {
-      WebDeveloper.EditCSS.addTab(locale.embeddedStyles, documentCSS.embedded, tabs, panels, position, dashboardDocument);
+      WebDeveloper.EditCSS.addTab(locale.embeddedStyles, documentCSS.embedded, tabs, panels, position);
     }
 
     // If there is no CSS
     if(!documentCSS.styleSheets.length && !documentCSS.embedded)
     {
-      WebDeveloper.EditCSS.addTab(locale.editCSS, "", tabs, panels, position, dashboardDocument);
+      WebDeveloper.EditCSS.addTab(locale.editCSS, "", tabs, panels, position);
     }
 
     window.setTimeout(function() { WebDeveloper.EditCSS.resize(WebDeveloper.Dashboard.getDashboard(WebDeveloper.EditCSS.contentDocument)); }, 100);
@@ -234,3 +235,6 @@ WebDeveloper.EditCSS.update = function()
     WebDeveloper.EditCSS.interval = window.setInterval(function() { WebDeveloper.EditCSS.apply(); }, WebDeveloper.EditCSS.updateFrequency);
   }
 };
+
+// Fixes a non-structured-clonable data error in Firefox
+""; // eslint-disable-line no-unused-expressions

common/js/generated/common.js

@@ -3,6 +3,7 @@ var WebDeveloper = WebDeveloper || {}; // eslint-disable-line no-redeclare, no-u
 WebDeveloper.Generated                    = WebDeveloper.Generated || {};
 WebDeveloper.Generated.animationSpeed     = 200;
 WebDeveloper.Generated.maximumURLLength   = 100;
+WebDeveloper.Generated.storedLocale       = null;
 WebDeveloper.Generated.syntaxHighlighters = [];
 
 // Adds a document
@@ -309,15 +310,15 @@ WebDeveloper.Generated.initializeSidebar = function(locale)
 };
 
 // Initializes the syntax highlight functionality
-WebDeveloper.Generated.initializeSyntaxHighlight = function(color, locale)
+WebDeveloper.Generated.initializeSyntaxHighlight = function(color)
 {
   // If the locale is set
-  if(locale)
+  if(WebDeveloper.Generated.storedLocale)
   {
-    document.getElementById("web-developer-syntax-highlighting-dropdown").querySelector(".dropdown-toggle").append(locale.syntaxHighlighting);
-    document.getElementById("web-developer-syntax-highlighting-dark").append(locale.dark);
-    document.getElementById("web-developer-syntax-highlighting-light").append(locale.light);
-    document.getElementById("web-developer-syntax-highlighting-none").append(locale.none);
+    document.getElementById("web-developer-syntax-highlighting-dropdown").querySelector(".dropdown-toggle").append(WebDeveloper.Generated.storedLocale.syntaxHighlighting);
+    document.getElementById("web-developer-syntax-highlighting-dark").append(WebDeveloper.Generated.storedLocale.dark);
+    document.getElementById("web-developer-syntax-highlighting-light").append(WebDeveloper.Generated.storedLocale.light);
+    document.getElementById("web-developer-syntax-highlighting-none").append(WebDeveloper.Generated.storedLocale.none);
     document.getElementById("web-developer-syntax-highlighting-" + color).classList.add("active");
 
     document.getElementById("web-developer-syntax-highlighting-dark").addEventListener("click", WebDeveloper.Generated.changeSyntaxHighlightTheme);
@@ -421,6 +422,13 @@ WebDeveloper.Generated.output = function(title, url, type, outputOriginal, itemI
   return outputContainers;
 };
 
+// Stores the locale
+WebDeveloper.Generated.storeLocale = function(locale)
+{
+  // This is required to stop Firefox erroring about accessing a dead object
+  WebDeveloper.Generated.storedLocale = JSON.parse(JSON.stringify(locale));
+};
+
 // Toggles the collapsed state of an output
 WebDeveloper.Generated.toggleOutput = function(event)
 {

common/js/generated/view-cookie-information.js

@@ -1,8 +1,7 @@
 var WebDeveloper = WebDeveloper || {}; // eslint-disable-line no-redeclare, no-use-before-define
 
-WebDeveloper.Generated              = WebDeveloper.Generated || {};
-WebDeveloper.Generated.cookie       = null;
-WebDeveloper.Generated.storedLocale = null;
+WebDeveloper.Generated        = WebDeveloper.Generated || {};
+WebDeveloper.Generated.cookie = null;
 
 // Handles the cookie session setting being changed
 WebDeveloper.Generated.changeSession = function()
@@ -316,6 +315,7 @@ WebDeveloper.Generated.initialize = function(data, locale)
   var deleteDialog      = document.getElementById("delete-dialog");
   var editDialog        = document.getElementById("edit-dialog");
 
+  WebDeveloper.Generated.storeLocale(locale);
   WebDeveloper.Generated.emptyContent();
   WebDeveloper.Generated.initializeHeader(cookieInformation, data, locale);
   WebDeveloper.Generated.initializeSidebar(locale);
@@ -355,8 +355,6 @@ WebDeveloper.Generated.initialize = function(data, locale)
     }
   }
 
-  WebDeveloper.Generated.storedLocale = locale;
-
   document.getElementById("cookie-expires").setAttribute("placeholder", locale.expiresPlaceholder);
   document.getElementById("cookie-host").setAttribute("placeholder", locale.hostPlaceholder);
   document.getElementById("cookie-name").setAttribute("placeholder", locale.namePlaceholder);

common/js/generated/view-css.js

@@ -18,6 +18,7 @@ WebDeveloper.Generated.initialize = function(data, locale)
   var url                    = null;
   var urlContentRequests     = [];
 
+  WebDeveloper.Generated.storeLocale(locale);
   WebDeveloper.Generated.emptyContent();
   WebDeveloper.Generated.initializeHeader(css, data, locale);
   WebDeveloper.Generated.initializeSidebar(locale);
@@ -96,11 +97,11 @@ WebDeveloper.Generated.initialize = function(data, locale)
         }
       }
 
-      WebDeveloper.Generated.initializeSyntaxHighlight(data.theme, locale);
+      WebDeveloper.Generated.initializeSyntaxHighlight(data.theme);
     });
   }
   else
   {
-    WebDeveloper.Generated.initializeSyntaxHighlight(data.theme, locale);
+    WebDeveloper.Generated.initializeSyntaxHighlight(data.theme);
   }
 };

common/js/generated/view-javascript.js

@@ -65,6 +65,7 @@ WebDeveloper.Generated.initialize = function(data, locale)
   var url                    = null;
   var urlContentRequests     = [];
 
+  WebDeveloper.Generated.storeLocale(locale);
   WebDeveloper.Generated.emptyContent();
   WebDeveloper.Generated.initializeHeader(javaScriptDescription, data, locale);
   WebDeveloper.Generated.initializeSidebar(locale);
@@ -140,11 +141,11 @@ WebDeveloper.Generated.initialize = function(data, locale)
         }
       }
 
-      WebDeveloper.Generated.initializeSyntaxHighlight(data.theme, locale);
+      WebDeveloper.Generated.initializeSyntaxHighlight(data.theme);
     });
   }
   else
   {
-    WebDeveloper.Generated.initializeSyntaxHighlight(data.theme, locale);
+    WebDeveloper.Generated.initializeSyntaxHighlight(data.theme);
   }
 };

common/js/overlay/css.js

@@ -151,11 +151,9 @@ WebDeveloper.Overlay.CSS.displayPrintStyles = function()
     // If the tab is valid
     if(WebDeveloper.Overlay.isValidTab(tab))
     {
-      var storage = WebDeveloper.Storage;
-
-      storage.isFeatureOnTab(featureItem.getAttribute("id"), tab, function(displayPrintStylesEnabled)
+      WebDeveloper.Storage.isFeatureOnTab(featureItem.getAttribute("id"), tab, function(displayPrintStylesEnabled)
       {
-        storage.isFeatureOnTab("display-handheld-styles", tab, function(displayHandheldStylesEnabled)
+        WebDeveloper.Storage.isFeatureOnTab("display-handheld-styles", tab, function(displayHandheldStylesEnabled)
         {
           // If about to display print styles and handheld styles are being displayed
           if(!displayPrintStylesEnabled && displayHandheldStylesEnabled)

common/js/overlay/options.js

@@ -9,6 +9,7 @@ WebDeveloper.Overlay.Options.about = function()
   WebDeveloper.Overlay.getSelectedTab(function(tab)
   {
     chrome.tabs.create({ index: tab.index + 1, url: chrome.runtime.getURL("/about/about.html") });
+    WebDeveloper.Overlay.close();
   });
 };
 

common/js/overlay/overlay.js

@@ -61,6 +61,26 @@ WebDeveloper.Overlay.changeTab = function(event)
   }
 };
 
+// Checks that the extension has the necessary permissions (this is needed for Firefox where host_permissions are not granted by default)
+WebDeveloper.Overlay.checkPermissions = function()
+{
+  chrome.permissions.contains({ origins: ["<all_urls>"] }, function(hasPermissions)
+  {
+    // If the extension does not have the necessary permissions
+    if(!hasPermissions)
+    {
+      chrome.permissions.request({ origins: ["<all_urls>"] }, function(permissionGranted)
+      {
+        // If the permission was not granted
+        if(!permissionGranted)
+        {
+          WebDeveloper.Overlay.displayNotification(WebDeveloper.Locales.getString("permissionsRequired"), "danger");
+        }
+      });
+    }
+  });
+};
+
 // Closes the overlay
 WebDeveloper.Overlay.close = function()
 {
@@ -100,6 +120,8 @@ WebDeveloper.Overlay.displayConfirmation = function(title, message, buttonText,
   button = confirmation.querySelector(".btn-warning");
 
   button.replaceChildren();
+
+  // Cannot use DOMPurify to sanitize the HTML or it breaks the SVG icon
   button.insertAdjacentHTML("beforeend", buttonHTML);
   confirmation.querySelector("span").replaceChildren(message);
   confirmation.classList.remove("d-none");
@@ -204,6 +226,8 @@ WebDeveloper.Overlay.initialize = function()
 
   confirmationCancel.append(WebDeveloper.Locales.getString("cancel"));
 
+  WebDeveloper.Overlay.checkPermissions();
+
   confirmationCancel.addEventListener("click", WebDeveloper.Overlay.closeConfirmation);
   document.getElementById("notification-close").addEventListener("click", WebDeveloper.Overlay.closeNotification);
   document.querySelector(".container-fluid").addEventListener("click", WebDeveloper.Overlay.openURL);
@@ -312,7 +336,6 @@ WebDeveloper.Overlay.openTab = function(tabURL)
   WebDeveloper.Overlay.getSelectedTab(function(tab)
   {
     chrome.tabs.create({ index: tab.index + 1, url: tabURL });
-
     WebDeveloper.Overlay.close();
   });
 };
@@ -330,7 +353,6 @@ WebDeveloper.Overlay.openURL = function(event)
     WebDeveloper.Overlay.getSelectedTab(function(tab)
     {
       chrome.tabs.create({ index: tab.index + 1, url: href });
-
       WebDeveloper.Overlay.close();
     });