Version 2.1.0 released (#17)

README.md

@@ -11,6 +11,11 @@ It works on Mozilla Firefox 57 (Quantum) or superior. Compatible with private Gi
 
 ### Changelog
 
+**2.1.0**
+- Added toggle button on the Firefox toolbar, so that Wide GitHub can now be enabled or disabled on specific pages. ([Issue #7](https://github.com/fabiocchetti/wide-github/issues/7) and [Issue #15](https://github.com/fabiocchetti/wide-github/issues/15).
+- Fixed an issue that caused the comment dialog box on pull requests to be wider than the screen in some circumstances ([Issue #16](https://github.com/fabiocchetti/wide-github/issues/16).
+- Improved support for dark mode.
+
 **2.0.0**
 - Add-on CSS code complete refactoring.
 - Support for the new GitHub design released in 2020 ([Issue #8](https://github.com/fabiocchetti/wide-github/issues/8), [Issue #10](https://github.com/fabiocchetti/wide-github/issues/10) and [Issue #11](https://github.com/fabiocchetti/wide-github/issues/11)).

background.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var toggle = true;
+
+function onError(error) {
+    console.error(`Error: ${error}`);
+}
+
+function handleTabs(tabs) {
+    toggle = !toggle;
+    browser.browserAction.setIcon({
+        path: (toggle ? "icons/wide-github-96.png" : "icons/wide-github-disabled.png")
+    });
+    browser.browserAction.setTitle({
+        title: (toggle ? "Enable Wide GitHub" : "Disable Wide GitHub")
+    });
+    for (let tab of tabs) {
+        browser.tabs.sendMessage(
+            tab.id, {
+                activateWideGitHub: toggle
+            }
+        ).catch(onError);
+    }
+}
+
+browser.browserAction.onClicked.addListener(() => {
+    browser.tabs.query({
+        currentWindow: true,
+        active: true
+    }).then(handleTabs).catch(onError);
+});

manifest.json

@@ -1,23 +1,34 @@
 {
 
-  "description": "Makes GitHub layout wide on Mozilla Firefox.",
   "manifest_version": 2,
   "name": "Wide GitHub",
-  "version": "2.0.0",
+  "version": "2.1.0",
+
+  "description": "Makes GitHub layout wide on Mozilla Firefox.",
+
   "homepage_url": "https://github.com/fabiocchetti/wide-github",
   "icons": {
     "48": "icons/wide-github-48.png",
     "96": "icons/wide-github-96.png"
   },
 
+  "browser_action": {
+    "default_icon": "icons/wide-github-96.png",
+    "default_title": "Disable Wide GitHub"
+  },
+
   "content_scripts": [
     {
-      "css": ["style.css"],
       "matches": ["*://github.com/*"],
       "include_globs": ["*://*github*.com/*", "*://*github*.io/*"],
       "exclude_globs": ["*://*github*.com/*/projects/*", "*://*github*.io/*/projects/*"],
+      "css": ["style.css"],
+      "js": ["wide-github-handler.js"],
       "run_at" : "document_start"
     }
-  ]
+  ],
+  "background": {
+    "scripts": ["background.js"]
+  }
 
 }

style.css

@@ -1,53 +1,58 @@
-#js-repo-pjax-container .repository-content .discussion-timeline,
-.repository-content .capped-card-content {
+body:not(.is-github-wide-disabled) #js-repo-pjax-container .repository-content .discussion-timeline,
+body:not(.is-github-wide-disabled) .repository-content .capped-card-content {
   width: 100% !important;
 }
 
-.application-main .container {
+body:not(.is-github-wide-disabled) .application-main .container {
   margin-left: 0 !important;
   min-width: 980px;
   padding-left: 16px !important;
   padding-right: 16px !important;
   width: auto !important;
 }
 
-.application-main .container-lg,
-.footer.container-lg {
-  margin-left:0!important;
-  max-width:none!important;
+body:not(.is-github-wide-disabled) .application-main .container-lg,
+body:not(.is-github-wide-disabled) .footer.container-lg {
+  margin-left: 0 !important;
+  max-width: none !important;
 }
 
-.application-main .container-xl,
-.gist-content-wrapper .container-lg {
-  max-width:none!important;
+body:not(.is-github-wide-disabled) .application-main .container-xl,
+body:not(.is-github-wide-disabled) .gist-content-wrapper .container-lg {
+  max-width: none !important;
 }
 
-.gist-content-wrapper .container {
+body:not(.is-github-wide-disabled) .gist-content-wrapper .container {
   margin-left: 20px !important;
   margin-right: 20px !important;
   min-width: 980px;
   width: auto !important;
 }
 
-.gist-content-wrapper .container-lg .h-card {
+body:not(.is-github-wide-disabled) .gist-content-wrapper .container-lg .h-card {
   width: 252px !important;
 }
 
-.pr-toolbar {
+body:not(.is-github-wide-disabled) .pr-toolbar {
   margin-left: -16px !important;
   margin-right: -16px !important;
   padding-left: 16px !important;
   padding-right: 16px !important;
 }
 
-.repository-content .inline-comments .comment-holder,
-.repository-content .inline-comments .inline-comment-form-container,
-.repository-content .inline-comments .inline-comment-form,
-.repository-content #all_commit_comments .commit-comments-heading,
-.repository-content #all_commit_comments .comment-holder {
+body:not(.is-github-wide-disabled) .repository-content .inline-comments .comment-holder,
+body:not(.is-github-wide-disabled) .repository-content .inline-comments .inline-comment-form-container,
+body:not(.is-github-wide-disabled) .repository-content #all_commit_comments .commit-comments-heading,
+body:not(.is-github-wide-disabled) .repository-content #all_commit_comments .comment-holder {
   max-width: inherit !important;
 }
 
-.repository-content .timeline-new-comment {
+body:not(.is-github-wide-disabled) .repository-content .timeline-new-comment {
   max-width: 100% !important;
 }
+
+@media screen and (min-width: 767px) {
+  body:not(.is-github-wide-disabled) .repository-content .inline-comments .inline-comment-form {
+    max-width: calc(100vw - 96px) !important;
+  }
+}

wide-github-handler.js

@@ -0,0 +1,17 @@
+"use strict";
+
+function handleWideGitHub(obj) {
+    if (obj.activateWideGitHub) {
+        document.body.classList.remove('is-github-wide-disabled');
+    } else {
+        document.body.classList.add('is-github-wide-disabled');
+    }
+}
+
+browser.runtime.onMessage.addListener(request => {
+    handleWideGitHub(request);
+});
+
+browser.runtime.sendMessage({
+    reload: true
+}, handleWideGitHub);