| OLD | NEW | 
|---|
| 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 | 
|  | 10 ----------------------- | 
|  | 11 | 
|  | 12 Both [python 2](https://www.python.org/downloads/) and [node](https://nodejs.org
     /en/), as well as [npm](https://www.npmjs.com), are required to contribute to th
     is repository. | 
|  | 13 | 
|  | 14 If you are installing `node` in ArchLinux, please remember to install `npm` too. | 
|  | 15 | 
|  | 16 After cloning this repository, enter into its folder and run: `npm install`. | 
|  | 17 | 
|  | 18 This should create and populate, both `./node_modules` folder and the `./buildto
     ols` one. | 
|  | 19 | 
| 9 Directory structure | 20 Directory structure | 
| 10 ------------------- | 21 ------------------- | 
| 11 | 22 | 
| 12 * Top-level files: | 23 * Top-level files: | 
| 13   * `firstRun.html` and `firstRun.js`: First-run page, see below | 24   * `firstRun.html` and `firstRun.js`: First-run page, see below | 
| 14   * `i18n.js`: Localization functions, should be included by all pages. | 25   * `i18n.js`: Localization functions, should be included by all pages. | 
| 15   * `messageResponder.js`: Script to be used on the background page to respond | 26   * `messageResponder.js`: Script to be used on the background page to respond | 
| 16     to messages sent by UI code. | 27     to messages sent by UI code. | 
| 17   * `background.html`, `background.js`: Test implementation of the background | 28   * `background.html`, `background.js`: Test implementation of the background | 
| 18     page, should *not be imported*. | 29     page, should *not be imported*. | 
| (...skipping 11 matching lines...) Expand all  Loading... | 
| 30 * `ext` directory: Test implementation of the abstraction layer. This one should | 41 * `ext` directory: Test implementation of the abstraction layer. This one should | 
| 31   *not to be imported*, these files should rather be replaced by | 42   *not to be imported*, these files should rather be replaced by | 
| 32   product-specific versions providing the same interface. | 43   product-specific versions providing the same interface. | 
| 33 | 44 | 
| 34 Testing | 45 Testing | 
| 35 ------- | 46 ------- | 
| 36 | 47 | 
| 37 In Firefox the HTML pages can be opened directly from the file system | 48 In Firefox the HTML pages can be opened directly from the file system | 
| 38 and should be fully functional. Due to security restrictions in Chrome, there | 49 and should be fully functional. Due to security restrictions in Chrome, there | 
| 39 you need to pass in the `--allow-file-access-from-files` command line flag when | 50 you need to pass in the `--allow-file-access-from-files` command line flag when | 
| 40 starting the application. Alternatively, you can run `test_server.py` (requires | 51 starting the application. Alternatively, you can run `npm start` and open | 
| 41 Python 2.7) and open the HTML pages under URLs like | 52 the HTML pages under URL shown shown in the terminal (example: http://127.0.0.1:
     8080). | 
| 42 `http://127.0.0.1:5000/firstRun.html`. |  | 
| 43 | 53 | 
| 44 Various aspects of the pages can be tested by setting parameters in the URL. The | 54 Various aspects of the pages can be tested by setting parameters in the URL. | 
| 45 only universal parameter is `locale`, e.g. `?locale=es-AR`. This parameter | 55 The only universal parameter is `locale`, e.g. `?locale=es-AR`. This parameter | 
| 46 overrides browser's locale which will be used by default. | 56 overrides browser's locale which will be used by default. | 
| 47 | 57 | 
|  | 58 Linting | 
|  | 59 ------- | 
|  | 60 | 
|  | 61 You can lint both JS and CSS at once via `npm run lint`. | 
|  | 62 | 
|  | 63 You can also run only JS via `npm run lint:js`, or CSS via `npm run lint:css`. | 
|  | 64 | 
|  | 65 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. | 
|  | 66 | 
|  | 67 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a
     n-npm-package-runner-55f7d4bd282b) | 
|  | 68 which should be provided automatically when you install `npm`. | 
|  | 69 | 
|  | 70 ```sh | 
|  | 71 npx stylelint --fix skin/real-file-name.css | 
|  | 72 ``` | 
|  | 73 | 
| 48 Translations | 74 Translations | 
| 49 ------------ | 75 ------------ | 
| 50 | 76 | 
| 51 Translations for the strings in this project are managed using the online | 77 Translations for the strings in this project are managed using the online | 
| 52 [Crowdin platform][crowdin]. To synchronise with Crowdin you can use the build | 78 [Crowdin platform][crowdin]. To synchronise with Crowdin you can use the build | 
| 53 script. To get a list of the possible commands type `./build.py help` at | 79 script. To get a list of the possible commands type `./build.py help` at | 
| 54 the command line. (You will also need the Crowdin API key for the project.) | 80 the command line. (You will also need the Crowdin API key for the project.) | 
| 55 | 81 | 
| 56 firstRun.html | 82 firstRun.html | 
| 57 ------------- | 83 ------------- | 
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 101   errors when adding new filters on the options page | 127   errors when adding new filters on the options page | 
| 102 * `blockedURLs`: a comma-separated list of URLs that should be considered | 128 * `blockedURLs`: a comma-separated list of URLs that should be considered | 
| 103   blocked (necessary to test the check for blocked scripts in sharing buttons). | 129   blocked (necessary to test the check for blocked scripts in sharing buttons). | 
| 104 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 130 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 
| 105   to trigger various filter list download errors | 131   to trigger various filter list download errors | 
| 106 * `platform=chromium`: shows the opt-out for the developer tools panel | 132 * `platform=chromium`: shows the opt-out for the developer tools panel | 
| 107 * `showNotificationUI=true`: simulates user having opted-out of notifications | 133 * `showNotificationUI=true`: simulates user having opted-out of notifications | 
| 108 | 134 | 
| 109 | 135 | 
| 110 [crowdin]: https://crowdin.com | 136 [crowdin]: https://crowdin.com | 
| 111 |  | 
| 112 Linting |  | 
| 113 ------- |  | 
| 114 |  | 
| 115 You can lint the code using [ESLint](http://eslint.org). |  | 
| 116 |  | 
| 117     eslint *.js lib ext |  | 
| 118 |  | 
| 119 You will need to set up ESLint and our configuration first, see |  | 
| 120 [eslint-config-eyeo](https://hg.adblockplus.org/codingtools/file/tip/eslint-conf
     ig-eyeo) |  | 
| 121 for more information. |  | 
| OLD | NEW | 
|---|