| 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 |