├── .eslintrc.json ├── .github └── workflows │ └── eslint.yml ├── .gitignore ├── COPYRIGHT ├── LICENSE ├── Makefile ├── README.md ├── manifest.json ├── misc ├── icon.png ├── icon.svg └── screenshots │ ├── color_default.png │ ├── color_gruvbox.png │ ├── color_whitespaces.png │ ├── options_colors.png │ └── optoins_others.png ├── options ├── common-shared.css ├── defaults.js ├── list-styles.js ├── listeners.js ├── preview.js ├── save-restore.js └── ui.html └── scripts ├── background.html ├── background.js ├── coloring.js ├── content.js └── transformations.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "standard" 8 | ], 9 | "parserOptions": { 10 | "ecmaVersion": 12, 11 | "sourceType": "module" 12 | }, 13 | "rules": { 14 | "brace-style": ["error", "1tbs", { 15 | "allowSingleLine": false 16 | }], 17 | "comma-dangle": ["error", { 18 | "arrays": "always-multiline", 19 | "objects": "always-multiline" 20 | }], 21 | "indent": ["error", 4], 22 | "no-multi-str": ["off"], 23 | "quotes": ["error", "double"], 24 | "semi": ["error", "always"] 25 | }, 26 | "globals": { 27 | "browser": "readonly", 28 | "coloring": "readonly", 29 | "hljs": "readonly", 30 | "options": "readonly", 31 | "transformations": "readonly" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/eslint.yml: -------------------------------------------------------------------------------- 1 | name: ESLint 2 | 3 | on: 4 | pull_request: {} 5 | push: 6 | branches: 7 | - master 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | - name: Install modules 15 | run: npm install --save-dev eslint standard 16 | - name: Run ESLint 17 | run: npx eslint scripts options 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .editorconfig 2 | *.xpi 3 | hljs/ 4 | -------------------------------------------------------------------------------- /COPYRIGHT: -------------------------------------------------------------------------------- 1 | Copyright 2006-2010 Vadim Atlygin 2 | Copyright 2011-2015 Jesse Glick 3 | Copyright 2016-2023 Qeole 4 | 5 | This Source Code Form is subject to the terms of the Mozilla Public 6 | License, v. 2.0. If a copy of the MPL was not distributed with this 7 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Mozilla Public License Version 2.0 2 | ================================== 3 | 4 | 1. Definitions 5 | -------------- 6 | 7 | 1.1. "Contributor" 8 | means each individual or legal entity that creates, contributes to 9 | the creation of, or owns Covered Software. 10 | 11 | 1.2. "Contributor Version" 12 | means the combination of the Contributions of others (if any) used 13 | by a Contributor and that particular Contributor's Contribution. 14 | 15 | 1.3. "Contribution" 16 | means Covered Software of a particular Contributor. 17 | 18 | 1.4. "Covered Software" 19 | means Source Code Form to which the initial Contributor has attached 20 | the notice in Exhibit A, the Executable Form of such Source Code 21 | Form, and Modifications of such Source Code Form, in each case 22 | including portions thereof. 23 | 24 | 1.5. "Incompatible With Secondary Licenses" 25 | means 26 | 27 | (a) that the initial Contributor has attached the notice described 28 | in Exhibit B to the Covered Software; or 29 | 30 | (b) that the Covered Software was made available under the terms of 31 | version 1.1 or earlier of the License, but not also under the 32 | terms of a Secondary License. 33 | 34 | 1.6. "Executable Form" 35 | means any form of the work other than Source Code Form. 36 | 37 | 1.7. "Larger Work" 38 | means a work that combines Covered Software with other material, in 39 | a separate file or files, that is not Covered Software. 40 | 41 | 1.8. "License" 42 | means this document. 43 | 44 | 1.9. "Licensable" 45 | means having the right to grant, to the maximum extent possible, 46 | whether at the time of the initial grant or subsequently, any and 47 | all of the rights conveyed by this License. 48 | 49 | 1.10. "Modifications" 50 | means any of the following: 51 | 52 | (a) any file in Source Code Form that results from an addition to, 53 | deletion from, or modification of the contents of Covered 54 | Software; or 55 | 56 | (b) any new file in Source Code Form that contains any Covered 57 | Software. 58 | 59 | 1.11. "Patent Claims" of a Contributor 60 | means any patent claim(s), including without limitation, method, 61 | process, and apparatus claims, in any patent Licensable by such 62 | Contributor that would be infringed, but for the grant of the 63 | License, by the making, using, selling, offering for sale, having 64 | made, import, or transfer of either its Contributions or its 65 | Contributor Version. 66 | 67 | 1.12. "Secondary License" 68 | means either the GNU General Public License, Version 2.0, the GNU 69 | Lesser General Public License, Version 2.1, the GNU Affero General 70 | Public License, Version 3.0, or any later versions of those 71 | licenses. 72 | 73 | 1.13. "Source Code Form" 74 | means the form of the work preferred for making modifications. 75 | 76 | 1.14. "You" (or "Your") 77 | means an individual or a legal entity exercising rights under this 78 | License. For legal entities, "You" includes any entity that 79 | controls, is controlled by, or is under common control with You. For 80 | purposes of this definition, "control" means (a) the power, direct 81 | or indirect, to cause the direction or management of such entity, 82 | whether by contract or otherwise, or (b) ownership of more than 83 | fifty percent (50%) of the outstanding shares or beneficial 84 | ownership of such entity. 85 | 86 | 2. License Grants and Conditions 87 | -------------------------------- 88 | 89 | 2.1. Grants 90 | 91 | Each Contributor hereby grants You a world-wide, royalty-free, 92 | non-exclusive license: 93 | 94 | (a) under intellectual property rights (other than patent or trademark) 95 | Licensable by such Contributor to use, reproduce, make available, 96 | modify, display, perform, distribute, and otherwise exploit its 97 | Contributions, either on an unmodified basis, with Modifications, or 98 | as part of a Larger Work; and 99 | 100 | (b) under Patent Claims of such Contributor to make, use, sell, offer 101 | for sale, have made, import, and otherwise transfer either its 102 | Contributions or its Contributor Version. 103 | 104 | 2.2. Effective Date 105 | 106 | The licenses granted in Section 2.1 with respect to any Contribution 107 | become effective for each Contribution on the date the Contributor first 108 | distributes such Contribution. 109 | 110 | 2.3. Limitations on Grant Scope 111 | 112 | The licenses granted in this Section 2 are the only rights granted under 113 | this License. No additional rights or licenses will be implied from the 114 | distribution or licensing of Covered Software under this License. 115 | Notwithstanding Section 2.1(b) above, no patent license is granted by a 116 | Contributor: 117 | 118 | (a) for any code that a Contributor has removed from Covered Software; 119 | or 120 | 121 | (b) for infringements caused by: (i) Your and any other third party's 122 | modifications of Covered Software, or (ii) the combination of its 123 | Contributions with other software (except as part of its Contributor 124 | Version); or 125 | 126 | (c) under Patent Claims infringed by Covered Software in the absence of 127 | its Contributions. 128 | 129 | This License does not grant any rights in the trademarks, service marks, 130 | or logos of any Contributor (except as may be necessary to comply with 131 | the notice requirements in Section 3.4). 132 | 133 | 2.4. Subsequent Licenses 134 | 135 | No Contributor makes additional grants as a result of Your choice to 136 | distribute the Covered Software under a subsequent version of this 137 | License (see Section 10.2) or under the terms of a Secondary License (if 138 | permitted under the terms of Section 3.3). 139 | 140 | 2.5. Representation 141 | 142 | Each Contributor represents that the Contributor believes its 143 | Contributions are its original creation(s) or it has sufficient rights 144 | to grant the rights to its Contributions conveyed by this License. 145 | 146 | 2.6. Fair Use 147 | 148 | This License is not intended to limit any rights You have under 149 | applicable copyright doctrines of fair use, fair dealing, or other 150 | equivalents. 151 | 152 | 2.7. Conditions 153 | 154 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted 155 | in Section 2.1. 156 | 157 | 3. Responsibilities 158 | ------------------- 159 | 160 | 3.1. Distribution of Source Form 161 | 162 | All distribution of Covered Software in Source Code Form, including any 163 | Modifications that You create or to which You contribute, must be under 164 | the terms of this License. You must inform recipients that the Source 165 | Code Form of the Covered Software is governed by the terms of this 166 | License, and how they can obtain a copy of this License. You may not 167 | attempt to alter or restrict the recipients' rights in the Source Code 168 | Form. 169 | 170 | 3.2. Distribution of Executable Form 171 | 172 | If You distribute Covered Software in Executable Form then: 173 | 174 | (a) such Covered Software must also be made available in Source Code 175 | Form, as described in Section 3.1, and You must inform recipients of 176 | the Executable Form how they can obtain a copy of such Source Code 177 | Form by reasonable means in a timely manner, at a charge no more 178 | than the cost of distribution to the recipient; and 179 | 180 | (b) You may distribute such Executable Form under the terms of this 181 | License, or sublicense it under different terms, provided that the 182 | license for the Executable Form does not attempt to limit or alter 183 | the recipients' rights in the Source Code Form under this License. 184 | 185 | 3.3. Distribution of a Larger Work 186 | 187 | You may create and distribute a Larger Work under terms of Your choice, 188 | provided that You also comply with the requirements of this License for 189 | the Covered Software. If the Larger Work is a combination of Covered 190 | Software with a work governed by one or more Secondary Licenses, and the 191 | Covered Software is not Incompatible With Secondary Licenses, this 192 | License permits You to additionally distribute such Covered Software 193 | under the terms of such Secondary License(s), so that the recipient of 194 | the Larger Work may, at their option, further distribute the Covered 195 | Software under the terms of either this License or such Secondary 196 | License(s). 197 | 198 | 3.4. Notices 199 | 200 | You may not remove or alter the substance of any license notices 201 | (including copyright notices, patent notices, disclaimers of warranty, 202 | or limitations of liability) contained within the Source Code Form of 203 | the Covered Software, except that You may alter any license notices to 204 | the extent required to remedy known factual inaccuracies. 205 | 206 | 3.5. Application of Additional Terms 207 | 208 | You may choose to offer, and to charge a fee for, warranty, support, 209 | indemnity or liability obligations to one or more recipients of Covered 210 | Software. However, You may do so only on Your own behalf, and not on 211 | behalf of any Contributor. You must make it absolutely clear that any 212 | such warranty, support, indemnity, or liability obligation is offered by 213 | You alone, and You hereby agree to indemnify every Contributor for any 214 | liability incurred by such Contributor as a result of warranty, support, 215 | indemnity or liability terms You offer. You may include additional 216 | disclaimers of warranty and limitations of liability specific to any 217 | jurisdiction. 218 | 219 | 4. Inability to Comply Due to Statute or Regulation 220 | --------------------------------------------------- 221 | 222 | If it is impossible for You to comply with any of the terms of this 223 | License with respect to some or all of the Covered Software due to 224 | statute, judicial order, or regulation then You must: (a) comply with 225 | the terms of this License to the maximum extent possible; and (b) 226 | describe the limitations and the code they affect. Such description must 227 | be placed in a text file included with all distributions of the Covered 228 | Software under this License. Except to the extent prohibited by statute 229 | or regulation, such description must be sufficiently detailed for a 230 | recipient of ordinary skill to be able to understand it. 231 | 232 | 5. Termination 233 | -------------- 234 | 235 | 5.1. The rights granted under this License will terminate automatically 236 | if You fail to comply with any of its terms. However, if You become 237 | compliant, then the rights granted under this License from a particular 238 | Contributor are reinstated (a) provisionally, unless and until such 239 | Contributor explicitly and finally terminates Your grants, and (b) on an 240 | ongoing basis, if such Contributor fails to notify You of the 241 | non-compliance by some reasonable means prior to 60 days after You have 242 | come back into compliance. Moreover, Your grants from a particular 243 | Contributor are reinstated on an ongoing basis if such Contributor 244 | notifies You of the non-compliance by some reasonable means, this is the 245 | first time You have received notice of non-compliance with this License 246 | from such Contributor, and You become compliant prior to 30 days after 247 | Your receipt of the notice. 248 | 249 | 5.2. If You initiate litigation against any entity by asserting a patent 250 | infringement claim (excluding declaratory judgment actions, 251 | counter-claims, and cross-claims) alleging that a Contributor Version 252 | directly or indirectly infringes any patent, then the rights granted to 253 | You by any and all Contributors for the Covered Software under Section 254 | 2.1 of this License shall terminate. 255 | 256 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all 257 | end user license agreements (excluding distributors and resellers) which 258 | have been validly granted by You or Your distributors under this License 259 | prior to termination shall survive termination. 260 | 261 | ************************************************************************ 262 | * * 263 | * 6. Disclaimer of Warranty * 264 | * ------------------------- * 265 | * * 266 | * Covered Software is provided under this License on an "as is" * 267 | * basis, without warranty of any kind, either expressed, implied, or * 268 | * statutory, including, without limitation, warranties that the * 269 | * Covered Software is free of defects, merchantable, fit for a * 270 | * particular purpose or non-infringing. The entire risk as to the * 271 | * quality and performance of the Covered Software is with You. * 272 | * Should any Covered Software prove defective in any respect, You * 273 | * (not any Contributor) assume the cost of any necessary servicing, * 274 | * repair, or correction. This disclaimer of warranty constitutes an * 275 | * essential part of this License. No use of any Covered Software is * 276 | * authorized under this License except under this disclaimer. * 277 | * * 278 | ************************************************************************ 279 | 280 | ************************************************************************ 281 | * * 282 | * 7. Limitation of Liability * 283 | * -------------------------- * 284 | * * 285 | * Under no circumstances and under no legal theory, whether tort * 286 | * (including negligence), contract, or otherwise, shall any * 287 | * Contributor, or anyone who distributes Covered Software as * 288 | * permitted above, be liable to You for any direct, indirect, * 289 | * special, incidental, or consequential damages of any character * 290 | * including, without limitation, damages for lost profits, loss of * 291 | * goodwill, work stoppage, computer failure or malfunction, or any * 292 | * and all other commercial damages or losses, even if such party * 293 | * shall have been informed of the possibility of such damages. This * 294 | * limitation of liability shall not apply to liability for death or * 295 | * personal injury resulting from such party's negligence to the * 296 | * extent applicable law prohibits such limitation. Some * 297 | * jurisdictions do not allow the exclusion or limitation of * 298 | * incidental or consequential damages, so this exclusion and * 299 | * limitation may not apply to You. * 300 | * * 301 | ************************************************************************ 302 | 303 | 8. Litigation 304 | ------------- 305 | 306 | Any litigation relating to this License may be brought only in the 307 | courts of a jurisdiction where the defendant maintains its principal 308 | place of business and such litigation shall be governed by laws of that 309 | jurisdiction, without reference to its conflict-of-law provisions. 310 | Nothing in this Section shall prevent a party's ability to bring 311 | cross-claims or counter-claims. 312 | 313 | 9. Miscellaneous 314 | ---------------- 315 | 316 | This License represents the complete agreement concerning the subject 317 | matter hereof. If any provision of this License is held to be 318 | unenforceable, such provision shall be reformed only to the extent 319 | necessary to make it enforceable. Any law or regulation which provides 320 | that the language of a contract shall be construed against the drafter 321 | shall not be used to construe this License against a Contributor. 322 | 323 | 10. Versions of the License 324 | --------------------------- 325 | 326 | 10.1. New Versions 327 | 328 | Mozilla Foundation is the license steward. Except as provided in Section 329 | 10.3, no one other than the license steward has the right to modify or 330 | publish new versions of this License. Each version will be given a 331 | distinguishing version number. 332 | 333 | 10.2. Effect of New Versions 334 | 335 | You may distribute the Covered Software under the terms of the version 336 | of the License under which You originally received the Covered Software, 337 | or under the terms of any subsequent version published by the license 338 | steward. 339 | 340 | 10.3. Modified Versions 341 | 342 | If you create software not governed by this License, and you want to 343 | create a new license for such software, you may create and use a 344 | modified version of this License if you rename the license and remove 345 | any references to the name of the license steward (except to note that 346 | such modified license differs from this License). 347 | 348 | 10.4. Distributing Source Code Form that is Incompatible With Secondary 349 | Licenses 350 | 351 | If You choose to distribute Source Code Form that is Incompatible With 352 | Secondary Licenses under the terms of this version of the License, the 353 | notice described in Exhibit B of this License must be attached. 354 | 355 | Exhibit A - Source Code Form License Notice 356 | ------------------------------------------- 357 | 358 | This Source Code Form is subject to the terms of the Mozilla Public 359 | License, v. 2.0. If a copy of the MPL was not distributed with this 360 | file, You can obtain one at http://mozilla.org/MPL/2.0/. 361 | 362 | If it is not possible or desirable to put the notice in a particular 363 | file, then You may include the notice in a location (such as a LICENSE 364 | file in a relevant directory) where a recipient would be likely to look 365 | for such a notice. 366 | 367 | You may add additional accurate notices of copyright ownership. 368 | 369 | Exhibit B - "Incompatible With Secondary Licenses" Notice 370 | --------------------------------------------------------- 371 | 372 | This Source Code Form is "Incompatible With Secondary Licenses", as 373 | defined by the Mozilla Public License, v. 2.0. 374 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # SPDX-License-Identifier: MPL-2.0 2 | 3 | VERSION=$(shell sed -n '/"version"/ s/.*: "\(.*\)",/\1/p' manifest.json) 4 | ADDON=colorediffs-$(VERSION).xpi 5 | 6 | JAR=/tmp/colorediffs.cookie 7 | HLJS_DL='https://highlightjs.org/download/' 8 | HLJS_ZIP=/tmp/highlight.zip 9 | HLJS_SCRIPT=hljs/highlight.min.js 10 | HLJS_STYLES=hljs/styles/ 11 | 12 | addon: checks xpi addons-linter 13 | 14 | checks: check_css eslint 15 | 16 | xpi: $(ADDON) 17 | 18 | %.xpi: \ 19 | manifest.json \ 20 | README.md LICENSE COPYRIGHT \ 21 | misc/icon.png \ 22 | options/ \ 23 | scripts/ \ 24 | hljs/README.md hljs/LICENSE \ 25 | $(HLJS_SCRIPT) \ 26 | hljs/styles/ 27 | zip -q -r $@ $^ 28 | 29 | $(HLJS_SCRIPT): 30 | TOKEN=$$(curl -sL --cookie-jar "$(JAR)" $(HLJS_DL) | sed -n '/csrfmiddlewaretoken/ s/.*value="\([^"]\+\)".*/\1/p') && \ 31 | curl -sL --referer $(HLJS_DL) --cookie "$(JAR)" --request POST --data-urlencode "csrfmiddlewaretoken=$$TOKEN" --data-urlencode 'diff.js=on' $(HLJS_DL) --output "$(HLJS_ZIP)" 32 | unzip -q -o "$(HLJS_ZIP)" -d hljs 33 | rm -- "$(JAR)" "$(HLJS_ZIP)" 34 | @VERSION=$$(jq .version hljs/package.json) && printf "\e[;32m[NOTE] Successfully downloaded highlight.js version $$VERSION.\e[0m\n" 35 | 36 | $(HLJS_STYLES) hljs/README.md hljs/LICENSE: $(HLJS_SCRIPT) 37 | 38 | check_css_list: $(HLJS_STYLES) 39 | @printf 'Checking that all CSS styles from highlight.js are listed in the add-on...\t' 40 | @error=0; for stylepath in $(HLJS_STYLES)*.min.css $(HLJS_STYLES)/base16/*.min.css; do \ 41 | stylesheet=$$(basename $$stylepath); \ 42 | stylename=$${stylesheet%.min.css}; \ 43 | if ! grep -q $$stylename options/list-styles.js; then \ 44 | [ $$error = 0 ] && printf '\n'; \ 45 | printf '\e[1;31m[WARNING] Found missing CSS style: "%s".\e[0m\n' $$stylename; \ 46 | error=1; \ 47 | fi; \ 48 | done; [ $$error = 0 ] && printf 'All good.\n' || false 49 | 50 | check_css_files: $(HLJS_STYLES) 51 | @printf 'Checking that all CSS styles listed in the add-on are present in hljs/...\t' 52 | @error=0; for style in $$(sed -n 's/ *{ "file": "\([^"]*\)",.*/\1/p' options/list-styles.js); do \ 53 | if ! [ -f $(HLJS_STYLES)/$${style}.min.css ]; then \ 54 | [ $$error = 0 ] && printf '\n'; \ 55 | printf '\e[1;31m[WARNING] Found missing CSS file: "%s".\e[0m\n' $$style; \ 56 | error=1; \ 57 | fi; \ 58 | done; [ $$error = 0 ] && printf 'All good.\n' || false 59 | 60 | check_css: check_css_list check_css_files 61 | 62 | .PHONY: check_css check_css_list check_css_files 63 | 64 | # https://github.com/mozilla/addons-linter 65 | ADDONS_LINTER ?= ./node_modules/addons-linter/bin/addons-linter 66 | addons-linter: 67 | $(ADDONS_LINTER) $(ADDON) 68 | 69 | # https://eslint.org/ 70 | eslint: 71 | npx eslint $(FIX) scripts options 72 | 73 | .PHONY: eslint addons-linter 74 | 75 | clean-hljs: 76 | rm -rf -- hljs 77 | 78 | clean: clean-hljs 79 | rm -f -- $(ADDON) 80 | 81 | .PHONY: addon checks xpi clean clean-hljs 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ![Add-on icon](misc/icon.png) Colorediffs 2 | 3 | Color diffs in the emails you receive. This is typically helpful for reviewing 4 | patches formatted with Git or other version control systems. 5 | 6 | ## Installation 7 | 8 | ### Get it from Thunderbird's Add-Ons Platform… 9 | 10 | [Available here](https://addons.thunderbird.net/en-US/thunderbird/addon/colored-diffs/) 11 | 12 | ### … Or Install it Manually 13 | 14 | Pack the add-on as an .xpi file and install it from the “gear” menu in 15 | Thunderbird's add-on manager. 16 | 17 | On UNIX-like systems, you can create the .xpi file by simply running: 18 | 19 | $ cd /path/to/colorediffs/ 20 | $ make xpi 21 | 22 | Note that this will download (with curl) the latest version of the highlight.js 23 | library, which is not included in this repository. 24 | 25 | ## Usage 26 | 27 | Once installed, the add-on should automatically detect diffs in your plain-text 28 | messages and color them with the selected theme. Some options are available in 29 | the add-on preference page: 30 | 31 | - You can select the color scheme amongst all the styles supported by 32 | highlight.js. 33 | - You can have tabs and white space characters replaced by visible characters. 34 | - You can set the length for tab characters (defaults to 8). 35 | - You can choose to color all plain-text messages (even with no diffs), which is 36 | mostly useful to avoid visual discomfort when using a style with a dark 37 | background and browsing a mailing list. 38 | 39 | ## Versions 40 | 41 | Thunderbird 91 and higher require version 2.2.0 or newer. 42 | 43 | **Version 2+ of the add-on is compatible with Thunderbird stable version 78.4 44 | and onward.** It uses the `messageDisplayScripts` API which was added in 45 | Thunderbird 82, and backported to 78.4. 46 | 47 | Older versions of the add-on work with Thunderbird 48 | [up to the version 68](https://github.com/Qeole/colorediffs/tree/e51d1aab6390d11a5ee2ec84e1cf42fd08564a41#version-notes). 49 | 50 | The distinction is due to Thunderbird's move to MailExtensions. As a 51 | consequence of this change, version 2.0.0 of the add-on is a complete rewrite 52 | (by Qeole) and works differently from the previous versions. Instead of parsing 53 | the diffs and rebuilding the messages itself, the add-on embeds and injects the 54 | [highlight.js library](https://highlightjs.org/) which takes care of the 55 | colors, without reformatting the content of the message. 56 | 57 | ## Status 58 | 59 | The project was originally authored by Vadim Atlygin. For a time it has 60 | been maintained by Jesse Glick (jglick), and it has now passed to Qeole. 61 | 62 | This add-on is mostly in maintenance mode, do not expect new features. Several 63 | people are using it to review patches for their daily jobs, so the objective is 64 | essentially to keep something basic, but that works. 65 | 66 | Nonetheless, you are welcome to report issues or to submit pull requests. 67 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "applications": { 4 | "gecko": { 5 | "id": "{282C3C7A-15A8-4037-A30D-BBEB17FFC76B}", 6 | "strict_min_version": "91.0" 7 | } 8 | }, 9 | "name": "Colored Diffs", 10 | "version": "2.3.1", 11 | "description": "Color diffs in messages formatted by Git or other version control systems", 12 | "author": "Vadim Atlygin", 13 | "homepage_url": "https://github.com/Qeole/colorediffs", 14 | "developer": { 15 | "name": "Qeole" 16 | }, 17 | "icons": { 18 | "64": "misc/icon.png" 19 | }, 20 | "permissions": [ 21 | "storage", 22 | "messagesModify" 23 | ], 24 | "background": { 25 | "page": "scripts/background.html" 26 | }, 27 | "options_ui": { 28 | "browser_style": true, 29 | "page": "options/ui.html" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /misc/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/icon.png -------------------------------------------------------------------------------- /misc/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 40 | 42 | 43 | 45 | image/svg+xml 46 | 48 | 49 | 50 | 51 | 52 | 57 | 60 | --Colored++Diffs 87 | @@ -1 +1 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /misc/screenshots/color_default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/screenshots/color_default.png -------------------------------------------------------------------------------- /misc/screenshots/color_gruvbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/screenshots/color_gruvbox.png -------------------------------------------------------------------------------- /misc/screenshots/color_whitespaces.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/screenshots/color_whitespaces.png -------------------------------------------------------------------------------- /misc/screenshots/options_colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/screenshots/options_colors.png -------------------------------------------------------------------------------- /misc/screenshots/optoins_others.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Qeole/colorediffs/55d70c8e0ee05c86905353117c9c61bce20b7df7/misc/screenshots/optoins_others.png -------------------------------------------------------------------------------- /options/common-shared.css: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | /* 4 | * Derived from mozilla-central/toolkit/themes/shared/in-content/common-shared.css 5 | * 6 | * Changes: 7 | * - trimmed down (removed XUL and other non-relevant rules) 8 | * - :root replaced by body 9 | */ 10 | 11 | @namespace html "http://www.w3.org/1999/xhtml"; 12 | 13 | body { 14 | --in-content-page-color: rgb(21, 20, 26); 15 | --in-content-page-background: #fff; 16 | --in-content-text-color: var(--in-content-page-color); 17 | --in-content-deemphasized-text: rgb(91, 91, 102); 18 | --in-content-box-background: #fff; 19 | --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */ 20 | --in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent); 21 | --in-content-box-info-background: #f0f0f4; 22 | --in-content-item-hover: color-mix(in srgb, var(--in-content-primary-button-background) 20%, transparent); 23 | --in-content-item-hover-text: var(--in-content-page-color); 24 | --in-content-item-selected: var(--in-content-primary-button-background); 25 | --in-content-item-selected-text: var(--in-content-primary-button-text-color); 26 | --in-content-icon-color: rgb(91,91,102); 27 | --in-content-accent-color: var(--in-content-primary-button-background); 28 | --in-content-accent-color-active: var(--in-content-primary-button-background-hover); 29 | --in-content-border-hover: var(--grey-90-a50); 30 | --in-content-border-invalid: var(--red-50); 31 | --in-content-border-color: #d7d7db; 32 | --in-content-error-text-color: #c50042; 33 | --in-content-link-color: var(--blue-60); 34 | --in-content-link-color-hover: var(--blue-70); 35 | --in-content-link-color-active: var(--blue-80); 36 | --in-content-link-color-visited: var(--blue-60); 37 | /* button background states are also used for checkboxes and radiobuttons */ 38 | --in-content-button-text-color: var(--in-content-text-color); 39 | --in-content-button-text-color-hover: var(--in-content-text-color); 40 | --in-content-button-text-color-active: var(--in-content-button-text-color-hover); 41 | --in-content-button-background: rgba(207,207,216,.33); 42 | --in-content-button-background-hover: rgba(207,207,216,.66); 43 | --in-content-button-background-active: rgb(207,207,216); 44 | --in-content-button-border-color: transparent; 45 | --in-content-button-border-color-hover: transparent; 46 | --in-content-button-border-color-active: var(--in-content-button-border-color-hover); 47 | --in-content-primary-button-text-color: rgb(251,251,254); 48 | --in-content-primary-button-text-color-hover: var(--in-content-primary-button-text-color); 49 | --in-content-primary-button-text-color-active: var(--in-content-primary-button-text-color); 50 | --in-content-primary-button-background: #0061e0; 51 | --in-content-primary-button-background-hover: #0250bb; 52 | --in-content-primary-button-background-active: #053e94; 53 | --in-content-primary-button-border-color: transparent; 54 | --in-content-primary-button-border-hover: transparent; 55 | --in-content-primary-button-border-active: transparent; 56 | --in-content-danger-button-background: #e22850; 57 | --in-content-danger-button-background-hover: #c50042; 58 | --in-content-danger-button-background-active: #810220; 59 | --in-content-focus-outline-color: var(--in-content-primary-button-background); 60 | --in-content-focus-outline-width: 2px; 61 | --in-content-focus-outline-offset: 2px; 62 | --in-content-focus-outline-inset: calc(-1 * var(--in-content-focus-outline-width)); 63 | --in-content-focus-outline: var(--in-content-focus-outline-width) solid var(--in-content-focus-outline-color); 64 | 65 | --in-content-table-background: #f8f8fa; 66 | --in-content-table-border-color: var(--in-content-box-border-color); 67 | --in-content-table-header-background: var(--in-content-primary-button-background); 68 | --in-content-table-header-color: var(--in-content-primary-button-text-color); 69 | --in-content-sidebar-width: 240px; 70 | 71 | --dialog-warning-text-color: var(--red-60); 72 | 73 | --checkbox-border-color: var(--in-content-box-border-color); 74 | --checkbox-unchecked-bgcolor: var(--in-content-button-background); 75 | --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover); 76 | --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active); 77 | --checkbox-checked-bgcolor: var(--in-content-primary-button-background); 78 | --checkbox-checked-color: var(--in-content-primary-button-text-color); 79 | --checkbox-checked-border-color: transparent; 80 | --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover); 81 | --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active); 82 | 83 | --blue-40: #45a1ff; 84 | --blue-50: #0a84ff; 85 | --blue-60: #0060df; 86 | --blue-70: #003eaa; 87 | --blue-80: #002275; 88 | --grey-30: #d7d7db; 89 | --grey-60: #4a4a4f; 90 | --grey-90-a10: rgba(12, 12, 13, 0.1); 91 | --grey-90-a20: rgba(12, 12, 13, 0.2); 92 | --grey-90-a30: rgba(12, 12, 13, 0.3); 93 | --grey-90-a50: rgba(12, 12, 13, 0.5); 94 | --grey-90-a60: rgba(12, 12, 13, 0.6); 95 | --green-50: #30e60b; 96 | --green-60: #12bc00; 97 | --green-70: #058b00; 98 | --green-80: #006504; 99 | --green-90: #003706; 100 | --orange-50: #ff9400; 101 | --red-40: #ff4f5e; 102 | --red-50: #ff0039; 103 | --red-60: #d70022; 104 | --red-70: #a4000f; 105 | --red-80: #5a0002; 106 | --red-90: #3e0200; 107 | --yellow-50: #ffe900; 108 | --yellow-60: #d7b600; 109 | --yellow-60-a30: rgba(215, 182, 0, 0.3); 110 | --yellow-70: #a47f00; 111 | --yellow-80: #715100; 112 | --yellow-90: #3e2800; 113 | 114 | --shadow-10: 0 1px 4px var(--grey-90-a10); 115 | --shadow-30: 0 4px 16px var(--grey-90-a10); 116 | 117 | --card-padding: 16px; 118 | --card-shadow: var(--shadow-10); 119 | --card-outline-color: var(--grey-30); 120 | --card-shadow-hover: var(--card-shadow), 0 0 0 5px var(--card-outline-color); 121 | 122 | accent-color: var(--in-content-accent-color); 123 | color-scheme: light dark; 124 | } 125 | 126 | @media (prefers-color-scheme: dark) { 127 | body { 128 | /* Keep these in sync with: 129 | * 130 | * * nsXPLookAndFeel::GenericDarkColor 131 | * * The default value of browser.display.foreground_color.dark and 132 | * browser.display.background_color.dark 133 | * 134 | * TODO (emilio): Once color-scheme support is complete, perhaps we can 135 | * just replace most of these for system colors and remove all this 136 | * duplication (assuming we honor the preferred color scheme for 137 | * in-content privileged pages and plain-text documents). */ 138 | --in-content-page-background: rgb(28,27,34); 139 | --in-content-page-color: rgb(251,251,254); 140 | --in-content-deemphasized-text: rgb(191,191,201); 141 | 142 | --in-content-box-background: rgb(35, 34, 43); 143 | --in-content-box-background-odd: rgba(249,249,250,0.05); 144 | --in-content-box-info-background: rgba(249,249,250,0.15); 145 | 146 | --in-content-border-color: rgba(249,249,250,0.2); 147 | --in-content-border-hover: rgba(249,249,250,0.3); 148 | --in-content-border-invalid: rgb(255,132,139); 149 | 150 | --in-content-error-text-color: #FF9AA2; 151 | 152 | --in-content-button-background: rgb(43,42,51); 153 | --in-content-button-background-hover: rgb(82,82,94); 154 | --in-content-button-background-active: rgb(91,91,102); 155 | --in-content-icon-color: rgb(251,251,254); 156 | 157 | --in-content-primary-button-text-color: rgb(43,42,51); 158 | --in-content-primary-button-background: rgb(0,221,255); 159 | --in-content-primary-button-background-hover: rgb(128,235,255); 160 | --in-content-primary-button-background-active: rgb(170,242,255); 161 | 162 | --in-content-danger-button-background: #ff848b; 163 | --in-content-danger-button-background-hover: #ffbdc5; 164 | --in-content-danger-button-background-active: #ffdfe7; 165 | 166 | --in-content-table-background: rgb(35, 34, 43); 167 | 168 | --in-content-link-color: var(--in-content-primary-button-background); 169 | --in-content-link-color-hover: var(--in-content-primary-button-background-hover); 170 | --in-content-link-color-active: var(--in-content-primary-button-background-active); 171 | --in-content-link-color-visited: var(--in-content-link-color); 172 | 173 | --card-outline-color: var(--grey-60); 174 | 175 | --dialog-warning-text-color: var(--red-40); 176 | 177 | scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); 178 | } 179 | 180 | /* For dialogs, use a different background colour. We don't do 181 | * this in High Contrast mode, as we should be using system colours then. 182 | */ 183 | @media not (prefers-contrast) { 184 | body[dialogroot], 185 | /* Also need this on dialog :hosts, or the rule above will override the 186 | * value for this custom property again in the shadow DOM. */ 187 | :host(dialog) { 188 | --in-content-page-background: #42414d; 189 | } 190 | } 191 | } 192 | 193 | @media (prefers-contrast) { 194 | body { 195 | --in-content-page-color: CanvasText; 196 | --in-content-page-background: Canvas; 197 | --in-content-deemphasized-text: GrayText; 198 | 199 | --in-content-box-background: -moz-Dialog; 200 | --in-content-box-background-odd: -moz-Dialog; 201 | --in-content-box-border-color: -moz-DialogText; 202 | --in-content-box-info-background: -moz-Dialog; 203 | 204 | --in-content-item-hover: SelectedItem; 205 | --in-content-item-hover-text: SelectedItemText; 206 | --in-content-item-selected: SelectedItem; 207 | --in-content-item-selected-text: SelectedItemText; 208 | --in-content-icon-color: -moz-DialogText; 209 | 210 | --in-content-accent-color: SelectedItem; 211 | --in-content-accent-color-active: SelectedItem; 212 | 213 | --in-content-border-hover: ThreeDShadow; 214 | /* This is not great, but there is no suitable keyword for this. 215 | * In theory, we shouldn't be conveying invalid state just with a colour 216 | * change... */ 217 | --in-content-border-invalid: ThreeDShadow; 218 | --in-content-border-color: ThreeDShadow; 219 | 220 | --in-content-link-color: -moz-nativehyperlinktext; 221 | --in-content-link-color-hover: -moz-nativehyperlinktext; 222 | --in-content-link-color-active: -moz-nativehyperlinktext; 223 | --in-content-link-color-visited: -moz-nativehyperlinktext; 224 | 225 | --in-content-button-text-color: ButtonText; 226 | --in-content-button-text-color-hover: SelectedItemText; 227 | --in-content-button-text-color-active: SelectedItem; 228 | --in-content-button-background: ButtonFace; 229 | --in-content-button-background-hover: SelectedItem; 230 | --in-content-button-background-active: SelectedItemText; 231 | --in-content-button-border-color: ButtonText; 232 | --in-content-button-border-color-hover: SelectedItemText; 233 | --in-content-button-border-color-active: SelectedItem; 234 | 235 | --in-content-primary-button-text-color: ButtonFace; 236 | --in-content-primary-button-text-color-hover: SelectedItemText; 237 | --in-content-primary-button-text-color-active: SelectedItem; 238 | --in-content-primary-button-background: ButtonText; 239 | --in-content-primary-button-background-hover: SelectedItem; 240 | --in-content-primary-button-background-active: SelectedItemText; 241 | --in-content-primary-button-border-color: ButtonFace; 242 | --in-content-primary-button-border-hover: SelectedItemText; 243 | --in-content-primary-button-border-active: SelectedItem; 244 | 245 | --in-content-danger-button-background: var(--in-content-primary-button-background); 246 | --in-content-danger-button-background-hover: var(--in-content-primary-button-background-hover); 247 | --in-content-danger-button-background-active: var(--in-content-primary-button-background-active); 248 | 249 | --in-content-focus-outline-color: -moz-DialogText; 250 | 251 | --in-content-table-border-color: ThreeDDarkShadow; 252 | --in-content-table-background: -moz-Dialog; 253 | --in-content-table-header-background: -moz-Dialog; 254 | --in-content-table-header-color: -moz-DialogText; 255 | 256 | --dialog-warning-text-color: -moz-FieldText; 257 | 258 | --checkbox-border-color: ThreeDShadow; 259 | --checkbox-unchecked-bgcolor: -moz-Field; 260 | --checkbox-unchecked-hover-bgcolor: -moz-Field; 261 | --checkbox-unchecked-active-bgcolor: -moz-Field; 262 | --checkbox-checked-bgcolor: SelectedItem; 263 | --checkbox-checked-color: SelectedItemText; 264 | --checkbox-checked-border-color: SelectedItem; 265 | --checkbox-checked-hover-bgcolor: -moz-Field; 266 | --checkbox-checked-active-bgcolor: -moz-Field; 267 | } 268 | } 269 | 270 | body { 271 | font: message-box; 272 | appearance: none; 273 | background-color: var(--in-content-page-background); 274 | color: var(--in-content-page-color); 275 | } 276 | 277 | body:not(.system-font-size) { 278 | font-size: 15px; 279 | } 280 | 281 | html|body { 282 | margin: 0; 283 | } 284 | 285 | html|h1 { 286 | font-size: 2.5em; 287 | font-weight: lighter; 288 | line-height: 1.2; 289 | color: var(--in-content-text-color); 290 | margin: 0; 291 | margin-bottom: .5em; 292 | } 293 | 294 | html|hr { 295 | border-style: solid none none none; 296 | border-color: var(--in-content-border-color); 297 | } 298 | 299 | html|h2 { 300 | font-weight: 600; 301 | line-height: 1.4em; 302 | } 303 | 304 | .main-content { 305 | padding: 40px 28px; 306 | overflow: auto; 307 | } 308 | 309 | /* html buttons */ 310 | 311 | html|button { 312 | font: inherit; 313 | } 314 | 315 | /* xul buttons and menulists */ 316 | 317 | button, 318 | html|select, 319 | html|input[type="color"] { 320 | appearance: none; 321 | min-height: 32px; 322 | color: var(--in-content-button-text-color); 323 | border: 1px solid var(--in-content-button-border-color); 324 | border-radius: 4px; 325 | background-color: var(--in-content-button-background); 326 | font-weight: 400; 327 | padding: 7px 15px; 328 | text-decoration: none; 329 | margin: 4px 8px; 330 | /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */ 331 | font-size: 1em; 332 | } 333 | 334 | button { 335 | font-weight: 600; 336 | } 337 | 338 | /* Small buttons get sized to 6/12px padding (when adding the 1px border) */ 339 | button.small-button { 340 | padding: 5px 11px; 341 | min-height: 24px; 342 | font-size: 0.9em; 343 | } 344 | 345 | html|button { 346 | /* Use the same margin of other elements for the alignment */ 347 | margin-inline: 4px; 348 | } 349 | 350 | ::-moz-focus-inner { 351 | border: none; 352 | } 353 | 354 | button:focus-visible, 355 | html|select:focus-visible, 356 | html|input:is([type="checkbox"], [type="color"], [type="radio"]):focus-visible { 357 | box-shadow: none; 358 | /* Don't set `var(--in-content-focus-outline)` here to allow more complicated UIs 359 | to use a different color when needed */ 360 | outline: var(--in-content-focus-outline-width) solid var(--in-content-focus-outline-color); 361 | outline-offset: var(--in-content-focus-outline-offset); 362 | } 363 | 364 | html|select:not([size], [multiple]) { 365 | background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); 366 | background-position: right 3px center; 367 | background-repeat: no-repeat; 368 | background-size: auto 12px; 369 | -moz-context-properties: fill; 370 | fill: currentColor; 371 | font-size: inherit; 372 | line-height: 2.1; 373 | padding-inline: 5px 24px; 374 | text-overflow: ellipsis; 375 | } 376 | 377 | html|select:not([size], [multiple]):dir(rtl) { 378 | background-position-x: left 3px; 379 | } 380 | 381 | html|select:not([size], [multiple]) > html|option { 382 | background-color: var(--in-content-box-background); 383 | color: var(--in-content-text-color); 384 | } 385 | 386 | html|button:enabled:hover, 387 | html|select:not([size], [multiple]):enabled:hover, 388 | html|input[type="color"]:hover { 389 | background-color: var(--in-content-button-background-hover); 390 | color: var(--in-content-button-text-color-hover); 391 | border-color: var(--in-content-button-border-color-hover); 392 | } 393 | 394 | html|button:enabled:hover:active, 395 | html|select:not([size], [multiple]):enabled:hover:active, 396 | html|input[type="color"]:enabled:hover:active { 397 | background-color: var(--in-content-button-background-active); 398 | color: var(--in-content-button-text-color-active); 399 | border-color: var(--in-content-button-border-color-active); 400 | } 401 | 402 | html|button:disabled, 403 | html|select:disabled, 404 | html|input[type="color"]:disabled { 405 | opacity: 0.4; 406 | } 407 | 408 | html|button[autofocus], 409 | html|button[type="submit"], 410 | button.primary { 411 | background-color: var(--in-content-primary-button-background); 412 | color: var(--in-content-primary-button-text-color); 413 | border-color: var(--in-content-primary-button-border-color); 414 | } 415 | 416 | html|button[autofocus]:enabled:hover, 417 | html|button[type="submit"]:enabled:hover, 418 | html|button.primary:enabled:hover { 419 | background-color: var(--in-content-primary-button-background-hover); 420 | color: var(--in-content-primary-button-text-color-hover); 421 | border-color: var(--in-content-primary-button-border-hover); 422 | } 423 | 424 | html|button[autofocus]:enabled:hover:active, 425 | html|button[type="submit"]:enabled:hover:active, 426 | html|button.primary:enabled:hover:active { 427 | background-color: var(--in-content-primary-button-background-active); 428 | color: var(--in-content-primary-button-text-color-active); 429 | border-color: var(--in-content-primary-button-border-active); 430 | } 431 | 432 | @media not (prefers-contrast) { 433 | html|button.semi-transparent:not(.ghost-button, .primary):enabled { 434 | background-color: color-mix(in srgb, currentColor 10%, transparent); 435 | } 436 | 437 | html|button.semi-transparent:not(.primary):enabled:hover { 438 | background-color: color-mix(in srgb, currentColor 20%, transparent); 439 | } 440 | 441 | html|button.semi-transparent:not(.primary):enabled:hover:active { 442 | background-color: color-mix(in srgb, currentColor 30%, transparent); 443 | } 444 | } 445 | 446 | .danger-button { 447 | --in-content-primary-button-background: var(--in-content-danger-button-background); 448 | --in-content-primary-button-background-hover: var(--in-content-danger-button-background-hover); 449 | --in-content-primary-button-background-active: var(--in-content-danger-button-background-active); 450 | --in-content-focus-outline-color: var(--in-content-danger-button-background); 451 | } 452 | 453 | @media not (prefers-contrast) { 454 | html|button.ghost-button { 455 | background-color: transparent; 456 | } 457 | } 458 | 459 | html|button.ghost-button:not(.semi-transparent):enabled:hover { 460 | background-color: var(--in-content-button-background-hover); 461 | color: var(--in-content-button-text-color-hover); 462 | } 463 | 464 | html|button.ghost-button:not(.semi-transparent):enabled:hover:active { 465 | background-color: var(--in-content-button-background-active); 466 | color: var(--in-content-button-text-color-active); 467 | } 468 | 469 | html|button.ghost-button.icon-button { 470 | height: 16px; 471 | width: 16px; 472 | min-width: auto; 473 | background-repeat: no-repeat; 474 | background-size: 16px; 475 | background-position: center; 476 | fill: currentColor; 477 | -moz-context-properties: fill; 478 | } 479 | 480 | html|input[type="color"] { 481 | padding: 6px; 482 | width: 50px; 483 | } 484 | 485 | /* textboxes */ 486 | 487 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), 488 | html|textarea { 489 | appearance: none; 490 | border: 1px solid var(--in-content-box-border-color); 491 | border-radius: 4px; 492 | color: inherit; 493 | background-color: var(--in-content-box-background); 494 | } 495 | 496 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]), 497 | html|textarea { 498 | font-family: inherit; 499 | font-size: inherit; 500 | padding: 8px; 501 | margin: 2px 4px; 502 | } 503 | 504 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus, 505 | html|textarea:focus { 506 | border-color: transparent; 507 | outline: var(--in-content-focus-outline); 508 | outline-offset: -1px; /* Prevents antialising around the corners */ 509 | } 510 | 511 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):-moz-ui-invalid, 512 | html|textarea:-moz-ui-invalid { 513 | border-color: transparent; 514 | outline: 2px solid var(--in-content-border-invalid); 515 | outline-offset: -1px; /* Prevents antialising around the corners */ 516 | } 517 | 518 | html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):disabled, 519 | html|textarea:disabled { 520 | opacity: 0.4; 521 | } 522 | 523 | /* Links */ 524 | 525 | html|a, 526 | .text-link { 527 | color: var(--in-content-link-color); 528 | text-decoration: none; 529 | } 530 | 531 | html|a:hover, 532 | .text-link:hover, 533 | button.text-link:is(:not([disabled="true"]), :enabled):hover { 534 | color: var(--in-content-link-color-hover); 535 | text-decoration: underline; 536 | } 537 | 538 | html|a:visited { 539 | color: var(--in-content-link-color-visited); 540 | } 541 | 542 | html|a:hover:active, 543 | .text-link:hover:active, 544 | button.text-link:is(:not([disabled="true"]), :enabled):hover:active { 545 | color: var(--in-content-link-color-active); 546 | text-decoration: none; 547 | } 548 | 549 | html|a:focus-visible, 550 | .text-link:focus-visible { 551 | outline: var(--in-content-focus-outline); 552 | outline-offset: 1px; 553 | border-radius: 4px; 554 | } 555 | 556 | button.text-link { 557 | background-color: transparent !important; /* override hover related background changes */ 558 | padding: 0; 559 | border: 0; 560 | font-weight: normal; 561 | min-height: 0; 562 | min-width: 0; 563 | } 564 | 565 | /* Checkboxes and radio buttons */ 566 | 567 | /* Add invisible vertical click-target */ 568 | html|input[type="checkbox"] { 569 | margin-block: 2px; 570 | } 571 | 572 | html|input[type="checkbox"] { 573 | appearance: none; 574 | height: 16px; 575 | width: 16px; 576 | border: 1px solid var(--checkbox-border-color); 577 | background-color: var(--checkbox-unchecked-bgcolor); 578 | border-radius: 2px; 579 | margin-inline: 0 6px; 580 | flex-shrink: 0; /* avoid shrinking inside flex container */ 581 | } 582 | 583 | html|input[type="checkbox"]:enabled:hover { 584 | background-color: var(--checkbox-unchecked-hover-bgcolor); 585 | } 586 | 587 | html|input[type="checkbox"]:enabled:hover:active { 588 | background-color: var(--checkbox-unchecked-active-bgcolor); 589 | } 590 | 591 | html|input[type="checkbox"]:checked { 592 | border-color: var(--checkbox-checked-border-color); 593 | background-color: var(--checkbox-checked-bgcolor); 594 | background-image: url("chrome://global/skin/icons/check.svg"); 595 | background-position: center; 596 | background-repeat: no-repeat; 597 | -moz-context-properties: fill; 598 | fill: currentColor; 599 | color: var(--checkbox-checked-color); 600 | /* Style the button also when printing with "Print Backgrounds" unchecked */ 601 | color-adjust: exact; 602 | } 603 | 604 | html|input[type="checkbox"]:enabled:checked:hover { 605 | background-color: var(--checkbox-checked-hover-bgcolor); 606 | } 607 | 608 | html|input[type="checkbox"]:enabled:checked:hover:active { 609 | background-color: var(--checkbox-checked-active-bgcolor); 610 | } 611 | 612 | @media (prefers-contrast) { 613 | html|input[type="checkbox"] { 614 | /* Normalize the border-color to the in-content version following color */ 615 | border-color: currentColor; 616 | color: var(--checkbox-border-color); 617 | } 618 | 619 | html|input[type="checkbox"]:not(:checked):enabled:hover { 620 | /* color sets the border color in HCM in-content */ 621 | color: var(--checkbox-checked-border-color); 622 | } 623 | 624 | html|input[type="checkbox"]:checked:enabled { 625 | /* color sets the border color in HCM in-content */ 626 | color: var(--checkbox-checked-bgcolor); 627 | fill: var(--checkbox-checked-color); 628 | } 629 | 630 | html|input[type="checkbox"]:checked:enabled:hover { 631 | fill: var(--checkbox-checked-bgcolor); 632 | } 633 | } 634 | 635 | html|*.radio-container-with-text, 636 | html|*.toggle-container-with-text { 637 | display: flex; 638 | align-items: center; 639 | } 640 | 641 | html|input[type="radio"] { 642 | appearance: none; 643 | width: 16px; 644 | height: 16px; 645 | padding: 0; 646 | border: 1px solid var(--in-content-box-border-color); 647 | border-radius: 100%; 648 | margin-block: 2px; /* extend the vertical clicktarget */ 649 | margin-inline: 0 6px; 650 | background-color: var(--in-content-button-background); 651 | background-position: center; 652 | flex-shrink: 0; /* avoid shrinking inside flex container */ 653 | } 654 | 655 | @media (prefers-contrast) { 656 | html|input[type="radio"] { 657 | border-color: var(--in-content-button-border-color); 658 | } 659 | 660 | html|input[type="radio"]:enabled:hover { 661 | border-color: var(--in-content-button-border-color-hover); 662 | } 663 | 664 | html|input[type="radio"]:enabled:hover:active { 665 | border-color: var(--in-content-button-border-color-active); 666 | } 667 | } 668 | 669 | html|input[type="radio"]:enabled:hover { 670 | background-color: var(--in-content-button-background-hover); 671 | color: var(--in-content-button-text-color-hover); 672 | } 673 | 674 | html|input[type="radio"]:enabled:hover:active { 675 | background-color: var(--in-content-button-background-active); 676 | color: var(--in-content-button-text-color-active); 677 | } 678 | 679 | html|input[type="radio"]:checked { 680 | -moz-context-properties: fill; 681 | fill: currentColor; 682 | color: var(--in-content-primary-button-text-color); 683 | background-color: var(--in-content-primary-button-background); 684 | background-image: url("chrome://global/skin/icons/radio.svg"); 685 | border-color: var(--in-content-primary-button-border-color); 686 | 687 | /* Style the button also when printing with "Print Backgrounds" unchecked */ 688 | color-adjust: exact; 689 | } 690 | 691 | html|input[type="radio"]:enabled:checked:hover { 692 | background-color: var(--in-content-primary-button-background-hover); 693 | color: var(--in-content-primary-button-text-color-hover); 694 | border-color: var(--in-content-primary-button-border-hover); 695 | } 696 | 697 | html|input[type="radio"]:enabled:checked:hover:active { 698 | background-color: var(--in-content-primary-button-background-active); 699 | color: var(--in-content-primary-button-text-color-active); 700 | border-color: var(--in-content-primary-button-border-active); 701 | } 702 | 703 | /* Disabled checkboxes, radios and labels */ 704 | 705 | html|input[type="checkbox"]:disabled, 706 | html|input[type="radio"]:disabled { 707 | opacity: 0.5; 708 | } 709 | 710 | /* List boxes */ 711 | 712 | html|select[size][multiple] { 713 | appearance: none; 714 | margin-inline: 0; 715 | background-color: var(--in-content-box-background); 716 | border: 1px solid var(--in-content-box-border-color); 717 | border-radius: 4px; 718 | color: var(--in-content-text-color); 719 | } 720 | 721 | html|select[size][multiple] > html|option { 722 | padding: 0.3em; 723 | margin: 0; 724 | border: none; 725 | border-radius: 0; 726 | background-image: none; 727 | } 728 | 729 | html|select[size][multiple] > html|option:hover { 730 | background-color: var(--in-content-item-hover); 731 | color: var(--in-content-item-hover-text); 732 | } 733 | -------------------------------------------------------------------------------- /options/defaults.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | const DefaultOptions = { 4 | style: "idea", 5 | tabsize: 8, 6 | spaces: false, 7 | colorall: false, 8 | }; 9 | 10 | const OptionsList = Object.keys(DefaultOptions); 11 | 12 | function defaultError (error) { 13 | console.error("[colorediffs]: Error:", error); 14 | } 15 | 16 | export { DefaultOptions }; 17 | export { OptionsList }; 18 | export { defaultError }; 19 | -------------------------------------------------------------------------------- /options/list-styles.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | /* eslint-disable no-multi-spaces */ 4 | const FullStyleList = [ 5 | { file: "base16/3024", name: "3024" }, 6 | { file: "a11y-dark", name: "A11y Dark" }, 7 | { file: "a11y-light", name: "A11y Light" }, 8 | { file: "agate", name: "Agate" }, 9 | { file: "an-old-hope", name: "An Old Hope" }, 10 | { file: "androidstudio", name: "Android Studio" }, 11 | { file: "base16/apathy", name: "Apathy" }, 12 | { file: "base16/apprentice", name: "Apprentice" }, 13 | { file: "arduino-light", name: "Arduino Light" }, 14 | { file: "arta", name: "Arta" }, 15 | { file: "ascetic", name: "Ascetic" }, 16 | { file: "base16/ashes", name: "Ashes" }, 17 | { file: "base16/atelier-cave", name: "Atelier Cave" }, 18 | { file: "base16/atelier-cave-light", name: "Atelier Cave Light" }, 19 | { file: "base16/atelier-dune", name: "Atelier Dune" }, 20 | { file: "base16/atelier-dune-light", name: "Atelier Dune Light" }, 21 | { file: "base16/atelier-estuary", name: "Atelier Estuary" }, 22 | { file: "base16/atelier-estuary-light", name: "Atelier Estuary Light" }, 23 | { file: "base16/atelier-forest", name: "Atelier Forest" }, 24 | { file: "base16/atelier-forest-light", name: "Atelier Forest Light" }, 25 | { file: "base16/atelier-heath", name: "Atelier Heath" }, 26 | { file: "base16/atelier-heath-light", name: "Atelier Heath Light" }, 27 | { file: "base16/atelier-lakeside", name: "Atelier Lakeside" }, 28 | { file: "base16/atelier-lakeside-light", name: "Atelier Lakeside Light" }, 29 | { file: "base16/atelier-plateau", name: "Atelier Plateau" }, 30 | { file: "base16/atelier-plateau-light", name: "Atelier Plateau Light" }, 31 | { file: "base16/atelier-savanna", name: "Atelier Savanna" }, 32 | { file: "base16/atelier-savanna-light", name: "Atelier Savanna Light" }, 33 | { file: "base16/atelier-seaside", name: "Atelier Seaside" }, 34 | { file: "base16/atelier-seaside-light", name: "Atelier Seaside Light" }, 35 | { file: "base16/atelier-sulphurpool", name: "Atelier Sulphurpool" }, 36 | { file: "base16/atelier-sulphurpool-light", name: "Atelier Sulphurpool Light" }, 37 | { file: "base16/atlas", name: "Atlas" }, 38 | { file: "atom-one-dark", name: "Atom One Dark" }, 39 | { file: "atom-one-dark-reasonable", name: "Atom One Dark Reasonable" }, 40 | { file: "atom-one-light", name: "Atom One Light" }, 41 | { file: "base16/bespin", name: "Bespin" }, 42 | { file: "base16/black-metal", name: "Black Metal" }, 43 | { file: "base16/black-metal-bathory", name: "Black Metal Bathory" }, 44 | { file: "base16/black-metal-burzum", name: "Black Metal Burzum" }, 45 | { file: "base16/black-metal-dark-funeral", name: "Black Metal Dark Funeral" }, 46 | { file: "base16/black-metal-gorgoroth", name: "Black Metal Gorgoroth" }, 47 | { file: "base16/black-metal-immortal", name: "Black Metal Immortal" }, 48 | { file: "base16/black-metal-khold", name: "Black Metal Khold" }, 49 | { file: "base16/black-metal-marduk", name: "Black Metal Marduk" }, 50 | { file: "base16/black-metal-mayhem", name: "Black Metal Mayhem" }, 51 | { file: "base16/black-metal-nile", name: "Black Metal Nile" }, 52 | { file: "base16/black-metal-venom", name: "Black Metal Venom" }, 53 | { file: "base16/brewer", name: "Brewer" }, 54 | { file: "base16/bright", name: "Bright" }, 55 | { file: "base16/brogrammer", name: "Brogrammer" }, 56 | { file: "brown-paper", name: "Brown Paper" }, 57 | { file: "base16/brush-trees", name: "Brush Trees" }, 58 | { file: "base16/brush-trees-dark", name: "Brush Trees Dark" }, 59 | { file: "base16/chalk", name: "Chalk" }, 60 | { file: "base16/circus", name: "Circus" }, 61 | { file: "base16/classic-dark", name: "Classic Dark" }, 62 | { file: "base16/classic-light", name: "Classic Light" }, 63 | { file: "codepen-embed", name: "Codepen Embed" }, 64 | { file: "base16/codeschool", name: "Codeschool" }, 65 | { file: "color-brewer", name: "Color Brewer" }, 66 | { file: "base16/colors", name: "Colors" }, 67 | { file: "base16/cupcake", name: "Cupcake" }, 68 | { file: "base16/cupertino", name: "Cupertino" }, 69 | { file: "base16/danqing", name: "Danqing" }, 70 | { file: "base16/darcula", name: "Darcula" }, 71 | { file: "dark", name: "Dark" }, 72 | { file: "base16/dark-violet", name: "Dark Violet" }, 73 | { file: "base16/darkmoss", name: "Darkmoss" }, 74 | { file: "base16/darktooth", name: "Darktooth" }, 75 | { file: "base16/decaf", name: "Decaf" }, 76 | { file: "default", name: "Default" }, 77 | { file: "base16/default-dark", name: "Default Dark" }, 78 | { file: "base16/default-light", name: "Default Light" }, 79 | { file: "devibeans", name: "Devibeans" }, 80 | { file: "base16/dirtysea", name: "Dirtysea" }, 81 | { file: "docco", name: "Docco" }, 82 | { file: "base16/dracula", name: "Dracula" }, 83 | { file: "base16/edge-dark", name: "Edge Dark" }, 84 | { file: "base16/edge-light", name: "Edge Light" }, 85 | { file: "base16/eighties", name: "Eighties" }, 86 | { file: "base16/embers", name: "Embers" }, 87 | { file: "base16/equilibrium-dark", name: "Equilibrium Dark" }, 88 | { file: "base16/equilibrium-gray-dark", name: "Equilibrium Gray Dark" }, 89 | { file: "base16/equilibrium-gray-light", name: "Equilibrium Gray Light" }, 90 | { file: "base16/equilibrium-light", name: "Equilibrium Light" }, 91 | { file: "base16/espresso", name: "Espresso" }, 92 | { file: "base16/eva", name: "Eva" }, 93 | { file: "base16/eva-dim", name: "Eva Dim" }, 94 | { file: "far", name: "Far" }, 95 | { file: "felipec", name: "FelipeC" }, 96 | { file: "base16/flat", name: "Flat" }, 97 | { file: "foundation", name: "Foundation" }, 98 | { file: "base16/framer", name: "Framer" }, 99 | { file: "base16/fruit-soda", name: "Fruit Soda" }, 100 | { file: "gml", name: "GML" }, 101 | { file: "base16/gigavolt", name: "Gigavolt" }, 102 | { file: "github", name: "GitHub" }, 103 | { file: "base16/github", name: "GitHub (Base16)" }, 104 | { file: "github-dark", name: "GitHub Dark" }, 105 | { file: "github-dark-dimmed", name: "GitHub Dark Dimmed" }, 106 | { file: "base16/google-dark", name: "Google Dark (Base16)" }, 107 | { file: "base16/google-light", name: "Google Light" }, 108 | { file: "googlecode", name: "Google Code" }, 109 | { file: "gradient-dark", name: "Gradient Dark" }, 110 | { file: "gradient-light", name: "Gradient Light" }, 111 | { file: "grayscale", name: "Grayscale" }, 112 | { file: "base16/grayscale-dark", name: "Grayscale Dark" }, 113 | { file: "base16/grayscale-light", name: "Grayscale Light" }, 114 | { file: "base16/green-screen", name: "Green Screen" }, 115 | { file: "base16/gruvbox-dark-hard", name: "Gruvbox Dark Hard" }, 116 | { file: "base16/gruvbox-dark-pale", name: "Gruvbox Dark Pale" }, 117 | { file: "base16/gruvbox-dark-medium", name: "Gruvbox Dark Medium" }, 118 | { file: "base16/gruvbox-dark-soft", name: "Gruvbox Dark Soft" }, 119 | { file: "base16/gruvbox-light-hard", name: "Gruvbox Light Hard" }, 120 | { file: "base16/gruvbox-light-medium", name: "Gruvbox Light Medium" }, 121 | { file: "base16/gruvbox-light-soft", name: "Gruvbox Light Soft" }, 122 | { file: "base16/hardcore", name: "Hardcore" }, 123 | { file: "base16/harmonic16-dark", name: "Harmonic16 Dark" }, 124 | { file: "base16/harmonic16-light", name: "Harmonic16 Light" }, 125 | { file: "base16/heetch-dark", name: "Heetch Dark" }, 126 | { file: "base16/heetch-light", name: "Heetch Light" }, 127 | { file: "base16/helios", name: "Helios" }, 128 | { file: "base16/hopscotch", name: "Hopscotch" }, 129 | { file: "base16/horizon-dark", name: "Horizon Dark" }, 130 | { file: "base16/horizon-light", name: "Horizon Light" }, 131 | { file: "base16/humanoid-dark", name: "Humanoid Dark" }, 132 | { file: "base16/humanoid-light", name: "Humanoid Light" }, 133 | { file: "hybrid", name: "Hybrid" }, 134 | { file: "base16/ia-dark", name: "iA Dark" }, 135 | { file: "base16/ia-light", name: "iA Light" }, 136 | { file: "ir-black", name: "IR Black" }, 137 | { file: "base16/ir-black", name: "IR Black (Base16)" }, 138 | { file: "base16/icy-dark", name: "Icy Dark" }, 139 | { file: "idea", name: "Idea" }, 140 | { file: "intellij-light", name: "IntelliJ Light" }, 141 | { file: "isbl-editor-dark", name: "ISBL Editor Dark" }, 142 | { file: "isbl-editor-light", name: "ISBL Editor Light" }, 143 | { file: "base16/isotope", name: "Isotope" }, 144 | { file: "base16/kimber", name: "Kimber" }, 145 | { file: "kimbie-dark", name: "Kimbie Dark" }, 146 | { file: "kimbie-light", name: "Kimbie Light" }, 147 | { file: "lightfair", name: "Lightfair" }, 148 | { file: "lioshi", name: "Lioshi" }, 149 | { file: "base16/london-tube", name: "London Tube" }, 150 | { file: "base16/macintosh", name: "Macintosh" }, 151 | { file: "magula", name: "Magula" }, 152 | { file: "base16/marrakesh", name: "Marrakesh" }, 153 | { file: "base16/materia", name: "Materia" }, 154 | { file: "base16/material", name: "Material" }, 155 | { file: "base16/material-darker", name: "Material Darker" }, 156 | { file: "base16/material-lighter", name: "Material Lighter" }, 157 | { file: "base16/material-palenight", name: "Material Palenight" }, 158 | { file: "base16/material-vivid", name: "Material Vivid" }, 159 | { file: "base16/mellow-purple", name: "Mellow Purple" }, 160 | { file: "base16/mexico-light", name: "Mexico Light" }, 161 | { file: "base16/mocha", name: "Mocha" }, 162 | { file: "mono-blue", name: "Mono Blue" }, 163 | { file: "monokai", name: "Monokai" }, 164 | { file: "monokai-sublime", name: "Monokai Sublime" }, 165 | { file: "base16/monokai", name: "Monokai (Base16)" }, 166 | { file: "nnfx-dark", name: "NNFX Dark" }, 167 | { file: "nnfx-light", name: "NNFX Light" }, 168 | { file: "base16/nebula", name: "Nebula" }, 169 | { file: "night-owl", name: "Night Owl" }, 170 | { file: "nord", name: "Nord" }, 171 | { file: "base16/nord", name: "Nord (Base16)" }, 172 | { file: "base16/nova", name: "Nova" }, 173 | { file: "obsidian", name: "Obsidian" }, 174 | { file: "base16/ocean", name: "Ocean" }, 175 | { file: "base16/oceanicnext", name: "OceanicNext" }, 176 | { file: "base16/one-light", name: "One Light" }, 177 | { file: "base16/onedark", name: "OneDark" }, 178 | { file: "base16/outrun-dark", name: "Outrun Dark" }, 179 | { file: "panda-syntax-dark", name: "Panda Syntax Dark" }, 180 | { file: "panda-syntax-light", name: "Panda Syntax Light" }, 181 | { file: "base16/papercolor-dark", name: "Papercolor Dark" }, 182 | { file: "base16/papercolor-light", name: "Papercolor Light" }, 183 | { file: "base16/paraiso", name: "Paraiso" }, 184 | { file: "paraiso-dark", name: "Paraiso Dark" }, 185 | { file: "paraiso-light", name: "Paraiso Light" }, 186 | { file: "base16/pasque", name: "Pasque" }, 187 | { file: "base16/phd", name: "PhD" }, 188 | { file: "base16/pico", name: "Pico" }, 189 | { file: "pojoaque", name: "Pojoaque" }, 190 | { file: "base16/pop", name: "Pop" }, 191 | { file: "base16/porple", name: "Porple" }, 192 | { file: "purebasic", name: "PureBASIC" }, 193 | { file: "qtcreator-dark", name: "Qt Creator Dark" }, 194 | { file: "qtcreator-light", name: "Qt Creator Light" }, 195 | { file: "base16/qualia", name: "Qualia" }, 196 | { file: "base16/railscasts", name: "Railscasts" }, 197 | { file: "rainbow", name: "Rainbow" }, 198 | { file: "base16/rebecca", name: "Rebecca" }, 199 | { file: "base16/ros-pine", name: "Rosé Pine" }, 200 | { file: "base16/ros-pine-dawn", name: "Rosé Pine Dawn" }, 201 | { file: "base16/ros-pine-moon", name: "Rosé Pine Moon" }, 202 | { file: "routeros", name: "RouterOS (MikroTik)" }, 203 | { file: "base16/sagelight", name: "Sagelight" }, 204 | { file: "base16/sandcastle", name: "Sandcastle" }, 205 | { file: "school-book", name: "School Book" }, 206 | { file: "base16/seti-ui", name: "Seti UI" }, 207 | { file: "shades-of-purple", name: "Shades of Purple" }, 208 | { file: "base16/shapeshifter", name: "Shapeshifter" }, 209 | { file: "base16/silk-dark", name: "Silk Dark" }, 210 | { file: "base16/silk-light", name: "Silk Light" }, 211 | { file: "base16/snazzy", name: "Snazzy" }, 212 | { file: "base16/solar-flare", name: "Solar Flare" }, 213 | { file: "base16/solar-flare-light", name: "Solar Flare Light" }, 214 | { file: "base16/solarized-dark", name: "Solarized Dark" }, 215 | { file: "base16/solarized-light", name: "Solarized Light" }, 216 | { file: "base16/spacemacs", name: "Spacemacs" }, 217 | { file: "srcery", name: "Srcery" }, 218 | { file: "stackoverflow-dark", name: "Stack Overflow Dark" }, 219 | { file: "stackoverflow-light", name: "Stack Overflow Light" }, 220 | { file: "base16/summercamp", name: "Summercamp" }, 221 | { file: "base16/summerfruit-dark", name: "Summerfruit Dark" }, 222 | { file: "base16/summerfruit-light", name: "Summerfruit Light" }, 223 | { file: "sunburst", name: "Sunburst" }, 224 | { file: "base16/synth-midnight-terminal-dark", name: "Synth Midnight Terminal Dark" }, 225 | { file: "base16/synth-midnight-terminal-light", name: "Synth Midnight Terminal Light" }, 226 | { file: "base16/tango", name: "Tango" }, 227 | { file: "base16/tender", name: "Tender" }, 228 | { file: "tokyo-night-dark", name: "Tokyo Night Dark" }, 229 | { file: "tokyo-night-light", name: "Tokyo Night Light" }, 230 | { file: "base16/tomorrow", name: "Tomorrow" }, 231 | { file: "base16/tomorrow-night", name: "Tomorrow Night" }, 232 | { file: "tomorrow-night-blue", name: "Tomorrow Night Blue" }, 233 | { file: "tomorrow-night-bright", name: "Tomorrow Night Bright" }, 234 | { file: "base16/twilight", name: "Twilight" }, 235 | { file: "base16/unikitty-dark", name: "Unikitty Dark" }, 236 | { file: "base16/unikitty-light", name: "Unikitty Light" }, 237 | { file: "vs", name: "VisualStudio" }, 238 | { file: "vs2015", name: "VisualStudio 2015 Dark" }, 239 | { file: "base16/vulcan", name: "Vulcan" }, 240 | { file: "base16/windows-10", name: "Windows 10" }, 241 | { file: "base16/windows-10-light", name: "Windows 10 Light" }, 242 | { file: "base16/windows-95", name: "Windows 95" }, 243 | { file: "base16/windows-95-light", name: "Windows 95 Light" }, 244 | { file: "base16/windows-high-contrast", name: "Windows High Contrast" }, 245 | { file: "base16/windows-high-contrast-light", name: "Windows High Contrast Light" }, 246 | { file: "base16/windows-nt", name: "Windows NT" }, 247 | { file: "base16/windows-nt-light", name: "Windows NT Light" }, 248 | { file: "base16/woodland", name: "Woodland" }, 249 | { file: "xcode", name: "XCode" }, 250 | { file: "base16/xcode-dusk", name: "XCode Dusk" }, 251 | { file: "xt256", name: "xt256" }, 252 | { file: "base16/zenburn", name: "Zenburn" }, 253 | ]; 254 | /* eslint-enable no-multi-spaces */ 255 | 256 | export { FullStyleList }; 257 | -------------------------------------------------------------------------------- /options/listeners.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | import { OptionsList } from "./defaults.js"; 4 | import { FullStyleList } from "./list-styles.js"; 5 | import { changeStyle, createPreview, updateStyle, waitAndUpdateStyle } from "./preview.js"; 6 | import { resetAllOptions, restoreAllOptions, saveOptions } from "./save-restore.js"; 7 | 8 | /* Populate list of styles */ 9 | const list = document.getElementById("style"); 10 | for (const s of FullStyleList) { 11 | const item = document.createElement("option"); 12 | item.value = s.file; 13 | item.textContent = s.name; 14 | list.appendChild(item); 15 | } 16 | 17 | document.addEventListener("DOMContentLoaded", () => { 18 | restoreAllOptions().then(() => { 19 | createPreview(); 20 | }); 21 | }); 22 | 23 | OptionsList.forEach((option) => { 24 | document.getElementById(option).addEventListener("change", (e) => { 25 | saveOptions(e).then(() => { 26 | updateStyle(e); 27 | }); 28 | }); 29 | }); 30 | 31 | document.getElementById("reset").addEventListener("click", () => { 32 | resetAllOptions().then(() => { 33 | waitAndUpdateStyle(); 34 | }); 35 | }); 36 | 37 | document.getElementById("preview-prev").addEventListener("click", () => { 38 | changeStyle(-1); 39 | }); 40 | document.getElementById("preview-next").addEventListener("click", () => { 41 | changeStyle(1); 42 | }); 43 | -------------------------------------------------------------------------------- /options/preview.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | import { FullStyleList } from "./list-styles.js"; 4 | 5 | /* eslint-disable no-tabs */ 6 | const PreviewContent = 7 | `diff --git a/foo b/foo 8 | index 968a86582cb3..c8b42ebfcbb9 100644 9 | --- a/foo 10 | +++ b/foo 11 | @@ -1337,8 +1337,9 @@ my_function() 12 | int err; 13 | 14 | err = do_some(stuff); 15 | - if (err) 16 | + if (err) { 17 | printf("Error: %s\\n", 18 | strerror(errno)); 19 | goto fail; 20 | + } 21 | 22 | do_more(stuff); /* so much stuff */ 23 | return 0; /* exit at last */`; 24 | /* eslint-disable no-tabs */ 25 | 26 | let hasReplacedSpaces = false; 27 | 28 | function updateStyle (e) { 29 | const style = document.getElementById("style").value; 30 | document.getElementById("theme").href = "/hljs/styles/" + style + ".min.css"; 31 | 32 | const code = document.getElementById("prevcode"); 33 | const tabsize = document.getElementById("tabsize").value; 34 | transformations.setTabStyle(code, tabsize); 35 | 36 | const spaces = document.getElementById("spaces"); 37 | if (spaces.checked) { 38 | if (!hasReplacedSpaces) { 39 | transformations.replaceSpaces(code, tabsize); 40 | hasReplacedSpaces = true; 41 | } 42 | } else if (e && e.target === spaces) { 43 | createPreview(); 44 | hasReplacedSpaces = false; 45 | } 46 | } 47 | 48 | function waitAndUpdateStyle () { 49 | window.setTimeout(updateStyle, 200); 50 | } 51 | 52 | function createPreview () { 53 | document.getElementById("prevcode").textContent = PreviewContent; 54 | waitAndUpdateStyle(); 55 | hljs.highlightElement(document.getElementById("prevcode")); 56 | } 57 | 58 | function changeStyle (offset) { 59 | const style = document.getElementById("style").value; 60 | const idx = FullStyleList.findIndex((s) => { 61 | return s.file === style; 62 | }); 63 | const newStyle = FullStyleList[(idx + offset + FullStyleList.length) % FullStyleList.length].file; 64 | document.getElementById("style").value = newStyle; 65 | const change = new Event("change"); 66 | document.getElementById("style").dispatchEvent(change); 67 | } 68 | 69 | export { changeStyle }; 70 | export { createPreview }; 71 | export { updateStyle }; 72 | export { waitAndUpdateStyle }; 73 | -------------------------------------------------------------------------------- /options/save-restore.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | import { DefaultOptions, OptionsList, defaultError } from "./defaults.js"; 4 | 5 | function saveOptions (e) { 6 | e.preventDefault(); 7 | 8 | let tabsize = Number(document.getElementById("tabsize").value); 9 | if (!Number.isInteger(tabsize) || tabsize <= 0) { 10 | tabsize = DefaultOptions.tabsize; 11 | } 12 | 13 | return browser.storage.local.set({ 14 | style: document.getElementById("style").value, 15 | tabsize, 16 | spaces: document.getElementById("spaces").checked, 17 | colorall: document.getElementById("colorall").checked, 18 | }); 19 | } 20 | 21 | function restoreOption (id) { 22 | return browser.storage.local.get(id).then((res) => { 23 | const element = document.getElementById(id); 24 | if (element.type && element.type === "checkbox") { 25 | element.checked = res[id] || DefaultOptions[id]; 26 | } else { 27 | element.value = res[id] || DefaultOptions[id]; 28 | } 29 | }, defaultError); 30 | } 31 | 32 | async function restoreAllOptions () { 33 | await restoreOption("style"); 34 | await restoreOption("tabsize"); 35 | await restoreOption("spaces"); 36 | await restoreOption("colorall"); 37 | } 38 | 39 | function resetAllOptions () { 40 | return browser.storage.local.remove(OptionsList).then(() => { 41 | restoreAllOptions(); 42 | }); 43 | } 44 | 45 | export { resetAllOptions }; 46 | export { restoreAllOptions }; 47 | export { saveOptions }; 48 | -------------------------------------------------------------------------------- /options/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 36 | 37 | 38 |

39 | Color Scheme
40 | Select the CSS color scheme to use to color diffs.
41 | Pick one in the list, or cycle through the list with the buttons. A 42 | preview is available below. 43 | 44 | 45 | 46 |

47 |

48 | 49 |

50 | 53 |
54 | Choose the width to use to display horizontal tabulations. 55 |

56 | 57 |

58 | 59 |
62 | Check the box to replace white spaces and tabulations with visible 63 | characters. 64 |

65 | 66 |

67 | 68 |
71 | Check the box to inject the CSS stylesheet into all plaintext messages, 72 | including when no diff is found. The objective is to minimize visual 73 | disruption when using a theme with a dark background and browsing a mix 74 | of messages with and without diffs. 75 |

76 | 77 |

78 | 81 |
82 | Click to reset all options to their default values. 83 |

84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /scripts/background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /scripts/background.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | import { DefaultOptions, defaultError } from "../options/defaults.js"; 4 | 5 | const options = {}; 6 | let wantColors = true; 7 | 8 | let port; 9 | let scriptsPromise; 10 | let cssPromise; 11 | 12 | function reloadOption (id) { 13 | return browser.storage.local.get(id).then((res) => { 14 | if (res[id] !== undefined) { 15 | options[id] = res[id]; 16 | } else { 17 | options[id] = DefaultOptions[id]; 18 | } 19 | }, defaultError); 20 | } 21 | 22 | async function reloadAllOptions () { 23 | await reloadOption("style"); 24 | await reloadOption("tabsize"); 25 | await reloadOption("spaces"); 26 | await reloadOption("colorall"); 27 | } 28 | 29 | function processCommand (msg) { 30 | switch (msg.command) { 31 | case "toggleSpaces": 32 | options.spaces = !options.spaces; 33 | unregisterScripts().then(registerScripts); 34 | break; 35 | case "toggleColor": 36 | wantColors = !wantColors; 37 | unregisterScripts().then(registerScripts); 38 | if (wantColors) { 39 | registerCss(); 40 | } else { 41 | unregisterCss(); 42 | } 43 | break; 44 | default: 45 | break; 46 | } 47 | } 48 | 49 | function registerCss () { 50 | cssPromise = browser.messageDisplayScripts.register({ 51 | css: [{ 52 | file: "/hljs/styles/" + options.style + ".min.css", 53 | }], 54 | }); 55 | } 56 | 57 | function registerScripts () { 58 | const contentScripts = { 59 | js: [ 60 | { 61 | code: "var options = " + JSON.stringify(options) + ";", 62 | }, 63 | ], 64 | }; 65 | if (wantColors) { 66 | contentScripts.js.push( 67 | { 68 | file: "/hljs/highlight.min.js", 69 | }, 70 | { 71 | file: "/scripts/transformations.js", 72 | }, 73 | { 74 | file: "/scripts/coloring.js", 75 | } 76 | ); 77 | } 78 | contentScripts.js.push( 79 | { 80 | file: "/scripts/content.js", 81 | } 82 | ); 83 | scriptsPromise = browser.messageDisplayScripts.register(contentScripts); 84 | } 85 | 86 | async function unregisterCss () { 87 | await cssPromise.then(css => css.unregister()); 88 | } 89 | 90 | async function unregisterScripts () { 91 | await scriptsPromise.then(script => script.unregister()); 92 | } 93 | 94 | async function reset () { 95 | await unregisterScripts(); 96 | await unregisterCss(); 97 | await init(); 98 | } 99 | 100 | function init () { 101 | reloadAllOptions().then(registerCss).then(registerScripts); 102 | } 103 | 104 | browser.storage.onChanged.addListener(reset); 105 | browser.runtime.onConnect.addListener((p) => { 106 | port = p; 107 | port.onMessage.addListener(processCommand); 108 | }); 109 | 110 | init(); 111 | -------------------------------------------------------------------------------- /scripts/coloring.js: -------------------------------------------------------------------------------- 1 | /* SPDX-License-Identifier: MPL-2.0 */ 2 | 3 | /* eslint-disable-next-line no-unused-vars */ 4 | const coloring = { 5 | colorizeBody: function () { 6 | document.body.setAttribute("class", "hljs"); 7 | }, 8 | 9 | colorizeDiff: function () { 10 | /* 11 | * With plain text, content is under 
 nodes. We want to insert 
12 |          * nodes with .hljs class between these 
 node and their children.
13 |          */
14 |         const preNodes = document.querySelectorAll("body > div > pre");
15 | 
16 |         for (const pre of preNodes) {
17 |             let i;
18 |             let j = -1;
19 | 
20 |             for (i = 0; i < pre.childNodes.length && j < 0; i++) {
21 |                 if (pre.childNodes[i].nodeName === "#text") {
22 |                     /*
23 |                      * man git-format-patch: The log message and the patch are
24 |                      * separated by a line with a three-dash line.
25 |                      */
26 |                     j = pre.childNodes[i].textContent.search(/^---$/m);
27 |                 }
28 |             }
29 |             if (j >= 0) {
30 |                 pre.childNodes[i - 1].splitText(j + "---".length);
31 |             }
32 |             for (; i < pre.childNodes.length; i++) {
33 |                 if (pre.childNodes[i].nodeName === "#text") {
34 |                     const span = document.createElement("SPAN");
35 | 
36 |                     span.style.padding = "0";
37 |                     transformations.setTabStyle(span, options.tabsize);
38 |                     span.setAttribute("class", "hljs diff colorediffs");
39 | 
40 |                     span.appendChild(pre.childNodes[i]);
41 |                     pre.insertBefore(span, pre.childNodes[i]);
42 |                 }
43 |             }
44 |         }
45 | 
46 |         /* Call library function, trigger highlighting */
47 |         hljs.configure({
48 |             ignoreUnescapedHTML: true,
49 |             cssSelector: ".colorediffs",
50 |         });
51 |         hljs.highlightAll();
52 | 
53 |         /* Replace spaces and tabs if required */
54 |         if (options.spaces) {
55 |             for (const pre of preNodes) {
56 |                 transformations.replaceSpaces(pre, options.tabsize);
57 |             }
58 |         } else if (document.getElementsByClassName("cd-s").length) {
59 |             transformations.restoreSpaces();
60 |         }
61 |     },
62 | };
63 | 


--------------------------------------------------------------------------------
/scripts/content.js:
--------------------------------------------------------------------------------
  1 | /* SPDX-License-Identifier: MPL-2.0 */
  2 | 
  3 | let port;
  4 | 
  5 | function connectPort () {
  6 |     if (port) {
  7 |         return;
  8 |     }
  9 |     port = browser.runtime.connect({
 10 |         name: "contentToBackground",
 11 |     });
 12 | }
 13 | 
 14 | function addToolbar () {
 15 |     let div = document.getElementById("colorediffsToolbar");
 16 |     if (div) {
 17 |         return;
 18 |     }
 19 | 
 20 |     const toolbarHeight = "5ex";
 21 | 
 22 |     div = document.createElement("DIV");
 23 |     div.id = "colorediffsToolbar";
 24 | 
 25 |     const colorButton = document.createElement("BUTTON");
 26 |     const spaceButton = document.createElement("BUTTON");
 27 |     colorButton.id = "toggleColor";
 28 |     spaceButton.id = "toggleSpaces";
 29 |     colorButton.className = "toolbarButton";
 30 |     spaceButton.className = "toolbarButton";
 31 |     colorButton.innerHTML = "+-";
 32 |     spaceButton.textContent = "›·";
 33 |     div.appendChild(colorButton);
 34 |     div.appendChild(spaceButton);
 35 | 
 36 |     const toolbarCss = `
 37 |     #colorediffsToolbar {
 38 |         position: fixed;
 39 |         bottom: 0;
 40 |         right: 0;
 41 |         height: ` + toolbarHeight + `;
 42 |         margin: 0;
 43 |         opacity: .3;
 44 |         transition: opacity .2s;
 45 |     }
 46 |     #colorediffsToolbar:hover {
 47 |         opacity: 1;
 48 |     }
 49 |     .toolbarButton {
 50 |         padding: 0;
 51 |         margin-right: 8px;
 52 |         font-weight: 800;
 53 |         min-width: 3em;
 54 |     }`;
 55 |     const style = document.createElement("style");
 56 |     style.setAttribute("type", "text/css");
 57 |     const styleTextNode = document.createTextNode(toolbarCss);
 58 |     style.appendChild(styleTextNode);
 59 |     document.head.appendChild(style);
 60 | 
 61 |     document.body.appendChild(div);
 62 | 
 63 |     document.getElementById("toggleSpaces").addEventListener("click", () => {
 64 |         transformations.toggleSpaces();
 65 |         connectPort();
 66 |         port.postMessage({
 67 |             command: "toggleSpaces",
 68 |         });
 69 |     });
 70 |     document.getElementById("toggleColor").addEventListener("click", () => {
 71 |         connectPort();
 72 |         port.postMessage({
 73 |             command: "toggleColor",
 74 |         });
 75 |     });
 76 | }
 77 | 
 78 | /* Check that this is a plain text email. We don't do HTML. */
 79 | function isPlainText () {
 80 |     const bodyNodes = document.body.childNodes;
 81 | 
 82 |     for (const node of bodyNodes) {
 83 |         if (node.className === "moz-text-plain") {
 84 |             return true;
 85 |         }
 86 |     }
 87 | 
 88 |     return false;
 89 | }
 90 | 
 91 | /* Check whether this message contains diff snippets */
 92 | function hasDiff () {
 93 |     /* These patterns were kept from the old version of the add-on */
 94 |     const contextLineTag = /^(?:\*|-){3}\s+(\d+),\d+\s+(?:\*|-){4}$/m;
 95 |     const unifiedLineTag = /^@@\s+-\d+(?:,\d+)?\s\+\d+(?:,\d+)?\s+@@/m;
 96 |     const unifiedNewTag = /^--- NEW FILE:\s.* ---$/m;
 97 |     const unifiedBinaryTag = /^---\s(?:new\s)?BINARY FILE:\s.*\s---$/m;
 98 |     const textBody = document.body.textContent;
 99 | 
100 |     for (const tag of
101 |         [contextLineTag, unifiedLineTag, unifiedNewTag, unifiedBinaryTag]) {
102 |         if (tag.test(textBody)) {
103 |             return true;
104 |         }
105 |     }
106 | 
107 |     return false;
108 | }
109 | 
110 | /* Trigger checks, toolbar, and coloring */
111 | (function () {
112 |     if (!isPlainText()) {
113 |         return;
114 |     }
115 | 
116 |     /* Do not colorize twice, but do update toolbar color */
117 |     if (document.getElementsByClassName("hljs").length) {
118 |         return addToolbar();
119 |     }
120 | 
121 |     /* Check whether coloring code was injected by background script */
122 |     const doColors = typeof (coloring.colorizeDiff) !== "undefined";
123 | 
124 |     /*
125 |      * If options.colorall is enabled, color as fast as we can to avoid white
126 |      * flashes with dark backgrounds
127 |      */
128 |     if (options.colorall && doColors) {
129 |         coloring.colorizeBody();
130 |     }
131 | 
132 |     const msgWithDiff = hasDiff();
133 |     if (!options.colorall && msgWithDiff && doColors) {
134 |         coloring.colorizeBody();
135 |     }
136 | 
137 |     if (options.colorall || msgWithDiff) {
138 |         addToolbar();
139 |     }
140 | 
141 |     if (msgWithDiff && doColors) {
142 |         coloring.colorizeDiff();
143 |     }
144 | })();
145 | 


--------------------------------------------------------------------------------
/scripts/transformations.js:
--------------------------------------------------------------------------------
 1 | /* SPDX-License-Identifier: MPL-2.0 */
 2 | 
 3 | const transformations = {
 4 |     setTabStyle: function (node, tabsize) {
 5 |         if (!tabsize) {
 6 |             return;
 7 |         }
 8 | 
 9 |         node.style["-moz-tab-size"] = tabsize;
10 |     },
11 | 
12 |     replaceSpaces: function (root, tabsize) {
13 |         function replacer (match, spaces, offset, string) {
14 |             /* Space on first column, likely generated for the diff, abort */
15 |             if (match === " " && (offset === 0 || string[offset - 1] === "\n")) {
16 |                 return " ";
17 |             }
18 | 
19 |             let content = "";
20 |             if (match[0] === "\t") {
21 |                 content += "›";
22 |                 const lastNewLine = string.slice(0, offset).lastIndexOf("\n");
23 |                 const lastTab = string.slice(0, offset).lastIndexOf("\t");
24 |                 const offsetInLine = offset - Math.max(lastNewLine + 1, lastTab + 1);
25 |                 if (offsetInLine % tabsize !== tabsize - 1) {
26 |                     content += "\t";
27 |                 }
28 |                 content += "›\t".repeat(match.length - 1);
29 |             } else {
30 |                 content += (offset === 0 || string[offset - 1] === "\n" ? " " : "·");
31 |                 content += "·".repeat(match.length - 1);
32 |             }
33 |             content += "";
34 |             return content;
35 |         };
36 | 
37 |         function doReplace (node) {
38 |             node.textContent = node.textContent.replace(/&/g, "&")
39 |                 .replace(//g, ">");
41 |             node.innerHTML = node.textContent.replace(/( +|\t+)/g, replacer);
42 |         };
43 | 
44 |         function spanify (node) {
45 |             const span = document.createElement("SPAN");
46 |             span.className = "cd-s";
47 |             span.textContent = node.textContent;
48 |             node.parentNode.insertBefore(span, node);
49 |             node.remove();
50 |             return span;
51 |         };
52 | 
53 |         function processNeighbour (neighbour) {
54 |             if (neighbour && neighbour.nodeType === Node.TEXT_NODE) {
55 |                 doReplace(spanify(neighbour));
56 |             }
57 |         };
58 | 
59 |         function processSpan (span) {
60 |             doReplace(span);
61 | 
62 |             /* For context: replace in closest siblings if they are text nodes */
63 |             processNeighbour(span.previousSibling);
64 |             processNeighbour(span.nextSibling);
65 |         };
66 | 
67 |         const addSpans = root.getElementsByClassName("hljs-addition");
68 |         for (const span of addSpans) {
69 |             processSpan(span);
70 |         }
71 | 
72 |         const delSpans = root.getElementsByClassName("hljs-deletion");
73 |         for (const span of delSpans) {
74 |             processSpan(span);
75 |         }
76 |     },
77 | 
78 |     restoreSpaces: function () {
79 |         const spans = document.getElementsByClassName("cd-s");
80 |         while (spans.length) {
81 |             const span = spans[0];
82 |             const content = span.textContent.replace(/›\t?/g, "\t").replace(/·/g, " ");
83 |             const spaces = document.createTextNode(content);
84 |             span.parentNode.insertBefore(spaces, span);
85 |             span.remove();
86 |         }
87 |     },
88 | 
89 |     toggleSpaces: function (pre) {
90 |         if (document.getElementsByClassName("cd-s").length) {
91 |             transformations.restoreSpaces();
92 |         } else {
93 |             for (const pre of document.querySelectorAll("body > div > pre")) {
94 |                 transformations.replaceSpaces(pre, options.tabsize);
95 |             }
96 |         }
97 |     },
98 | };
99 | 


--------------------------------------------------------------------------------