| 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 54 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 182 This is the implementation of the Adblock Plus options page which is | 191 This is the implementation of the Adblock Plus options page which is | 
| 183 the primary UI for changing settings and for managing filter lists. | 192 the primary UI for changing settings and for managing filter lists. | 
| 184 | 193 | 
| 185 To aid testing, the behavior of this page is affected by a number of URL | 194 To aid testing, the behavior of this page is affected by a number of URL | 
| 186 parameters: | 195 parameters: | 
| 187 | 196 | 
| 188 * `addonVersion`: sets addon version application parameter that is used for | 197 * `addonVersion`: sets addon version application parameter that is used for | 
| 189   creating the link to the version-specific release notes | 198   creating the link to the version-specific release notes | 
| 190 * `addSubscription=true`: this parameter should trigger a dialog for adding | 199 * `addSubscription=true`: this parameter should trigger a dialog for adding | 
| 191   subscriptions as initiated by clicking on an "abp:subscribe" link | 200   subscriptions as initiated by clicking on an "abp:subscribe" link | 
| 192 * `additionalSubscriptions=true`: Simulates scenario of persistent filter lists | 201 * `additionalSubscriptions`: A comma-separated list of subscription URLs that | 
| 193   that are preinstalled by administrators. | 202   simulates scenario of persistent filter lists preinstalled by administrators. | 
| 194 * `filterError=true`: causes filter validation to fail, showing validation | 203 * `filterError=true`: causes filter validation to fail, showing validation | 
| 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 | 
|---|