| LEFT | RIGHT |
| 1 Shared Adblock Plus UI code | 1 Shared Adblock Plus UI code |
| 2 =========================== | 2 =========================== |
| 3 | 3 |
| 4 The user interface elements defined in this repository will be used by various | 4 The user interface elements defined in this repository will be used by various |
| 5 Adblock Plus products like Adblock Plus for Firefox. Their functionality can be | 5 Adblock Plus products like Adblock Plus for Firefox. Their functionality can be |
| 6 tested within this repository, even though they might not work exactly the same | 6 tested within this repository, even though they might not work exactly the same |
| 7 as they will do in the final product. | 7 as they will do in the final product. |
| 8 | 8 |
| 9 Installing dependencies | 9 Installing dependencies |
| 10 ----------------------- | 10 ----------------------- |
| (...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 76 | 76 |
| 77 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. | 77 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. |
| 78 | 78 |
| 79 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a
n-npm-package-runner-55f7d4bd282b) | 79 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a
n-npm-package-runner-55f7d4bd282b) |
| 80 which should be provided automatically when you install `npm`. | 80 which should be provided automatically when you install `npm`. |
| 81 | 81 |
| 82 ```sh | 82 ```sh |
| 83 npx stylelint --fix skin/real-file-name.css | 83 npx stylelint --fix skin/real-file-name.css |
| 84 ``` | 84 ``` |
| 85 | 85 |
| 86 Bundling | 86 Bundling JS |
| 87 -------- | 87 ----------- |
| 88 | 88 |
| 89 As it is for the `desktop-options.js` case, bundling is done via `package.json` | 89 As it is for the `desktop-options.js` case, bundling is done via `package.json` |
| 90 script entries. | 90 script entries. |
| 91 | 91 |
| 92 A dedicated script entry, such `bundle:desktop-options`, | 92 A dedicated script entry, such `bundle:desktop-options.js`, |
| 93 should perform the following operations: | 93 should simply use the `bash:js` script, passing along |
| 94 | 94 the source file and the target. |
| 95 * ensure source code passes linting | 95 |
| 96 * ensure the bundle won't affect future linting operations | 96 ```js |
| 97 * ensure `browserify` uses `--node` and `--no-bundle-external` flags | 97 { |
| 98 * point at the entry point, and output in the top level folder | 98 // example of a new bundle for the ./js/source.js file |
| 99 | 99 "bundle:target.js": "npm run bash:js ./js/source.js ./target.js" |
| 100 Accordingly, this is what happens with the `bundle:desktop-options`: | 100 } |
| 101 | 101 ``` |
| 102 ```sh | 102 |
| 103 # the && operator ensure each step is executed only | 103 The main `bundle` script should include each sub-bundle operation too. |
| 104 # if the previous one didn't produce an error | 104 |
| 105 eslint ./js/**/*.js && | 105 Bundling CSS |
| 106 # browserify doesn't offer a way to prefix with text | 106 ------------ |
| 107 # the file is hence created with eslint disabled and a warning | 107 |
| 108 echo '/* eslint-disable */// BUNDLED FILE' > ./desktop-options.js && | 108 As it is for the `desktop-options.css` case, bundling is done via `package.json` |
| 109 # browserify take an entry point and bundle all its required files | 109 script entries. |
| 110 # outputting the result into ./desktop-options.js | 110 |
| 111 browserify --node --no-bundle-external js/desktop-options.js >> ./desktop-option
s.js | 111 A dedicated script entry, such `bundle:desktop-options.css`, |
| 112 ``` | 112 should simply use the `bash:css` script, passing along |
| 113 | 113 the source file and the target. |
| 114 For a new bundle, i.e. `mobile-options.js`, simply use the same procedure | 114 |
| 115 but swap the `desktop-options` file/script name with `mobile-options`. | 115 ```js |
| 116 | 116 { |
| 117 The main `bundle` script should include each sub-bundle operation. | 117 // example of a new bundle for the ./css/source.scss file |
| 118 "bundle:target.css": "npm run bash:css ./css/source.scss ./skin/target.css" |
| 119 } |
| 120 ``` |
| 121 |
| 122 In case there are dependencies, please ensure these are |
| 123 imported via `@import "dep.scss"` and not via `url(...)` syntax. |
| 124 |
| 125 As it is for JS bundles, the main `bundle` script should include each |
| 126 CSS bundle too. |
| 118 | 127 |
| 119 Watching | 128 Watching |
| 120 -------- | 129 -------- |
| 121 | 130 |
| 122 While developing, it is convenient to bundle automatically | 131 While developing, it is convenient to bundle automatically |
| 123 each time a source file is changed. | 132 each time a source file is changed. |
| 124 | 133 |
| 125 As a team, we agreed on restructuring JS code inside the js folder, | 134 As a team, we agreed on restructuring JS code inside the js folder, |
| 126 so that is watched, and each bundled created, every time there is a changes. | 135 so that is watched, and each bundled created, every time there is a changes. |
| 127 | 136 |
| (...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 195 errors when adding new filters on the options page | 204 errors when adding new filters on the options page |
| 196 * `blockedURLs`: a comma-separated list of URLs that should be considered | 205 * `blockedURLs`: a comma-separated list of URLs that should be considered |
| 197 blocked (necessary to test the check for blocked scripts in sharing buttons). | 206 blocked (necessary to test the check for blocked scripts in sharing buttons). |
| 198 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 207 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used |
| 199 to trigger various filter list download errors | 208 to trigger various filter list download errors |
| 200 * `platform=chromium`: shows the opt-out for the developer tools panel | 209 * `platform=chromium`: shows the opt-out for the developer tools panel |
| 201 * `showNotificationUI=true`: simulates user having opted-out of notifications | 210 * `showNotificationUI=true`: simulates user having opted-out of notifications |
| 202 | 211 |
| 203 | 212 |
| 204 [crowdin]: https://crowdin.com | 213 [crowdin]: https://crowdin.com |
| LEFT | RIGHT |