| Left: | ||
| Right: |
| 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 ----------------------- |
| 11 | 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. | 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. |
|
Thomas Greiner
2018/02/12 13:01:43
Suggestion: We don't have a coding style for Markd
a.giammarchi
2018/02/12 14:52:55
agreed but this has been already merged so I'll ke
| |
| 13 | 13 |
| 14 If you are installing `node` in ArchLinux, please remember to install `npm` too. | 14 If you are installing `node` in ArchLinux, please remember to install `npm` too. |
| 15 | 15 |
| 16 After cloning this repository, enter into its folder and run: `npm install`. | 16 After cloning this repository, enter into its folder and run: `npm install`. |
| 17 | 17 |
| 18 This should create and populate, both `./node_modules` folder and the `./buildto ols` one. | 18 This should create and populate, both `./node_modules` folder and the `./buildto ols` one. |
| 19 | 19 |
| 20 Directory structure | 20 Directory structure |
| 21 ------------------- | 21 ------------------- |
| 22 | 22 |
| (...skipping 19 matching lines...) Expand all Loading... | |
| 42 *not to be imported*, these files should rather be replaced by | 42 *not to be imported*, these files should rather be replaced by |
| 43 product-specific versions providing the same interface. | 43 product-specific versions providing the same interface. |
| 44 | 44 |
| 45 Testing | 45 Testing |
| 46 ------- | 46 ------- |
| 47 | 47 |
| 48 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 |
| 49 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 |
| 50 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 |
| 51 starting the application. Alternatively, you can run `npm start` and open | 51 starting the application. Alternatively, you can run `npm start` and open |
| 52 the HTML pages under URLs like `http://127.0.0.1:5000/firstRun.html`. | 52 the HTML pages under URL shown shown in the terminal (example: http://127.0.0.1: 8080). |
| 53 | |
| 54 You can pass along to underlying [http-server](https://www.npmjs.com/package/htt p-server) | |
| 55 program any arguments via `--` as in: | |
| 56 ```sh | |
| 57 npm start -- -p 5000 -c-1 | |
| 58 ``` | |
| 53 | 59 |
| 54 Various aspects of the pages can be tested by setting parameters in the URL. | 60 Various aspects of the pages can be tested by setting parameters in the URL. |
| 55 The only universal parameter is `locale`, e.g. `?locale=es-AR`. This parameter | 61 The only universal parameter is `locale`, e.g. `?locale=es-AR`. This parameter |
| 56 overrides browser's locale which will be used by default. | 62 overrides browser's locale which will be used by default. |
| 57 | 63 |
| 58 Linting | 64 Linting |
| 59 ------- | 65 ------- |
| 60 | 66 |
| 61 You can lint both JS and CSS at once via `npm run lint`. | 67 You can lint all options via `npm run lint`. |
| 62 | 68 |
| 63 You can also run only JS via `npm run lint:js`, or CSS via `npm run lint:css`. | 69 You can also run specific target linting via `npm run lint:js` or, once availabl e, via `npm run lint:css`. |
| 64 | 70 |
| 65 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. | 71 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. |
| 66 | 72 |
| 67 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a n-npm-package-runner-55f7d4bd282b) | 73 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`. | 74 which should be provided automatically when you install `npm`. |
| 69 | 75 |
| 70 ```sh | 76 ```sh |
| 71 npx stylelint --fix skin/real-file-name.css | 77 npx stylelint --fix skin/real-file-name.css |
| 72 ``` | 78 ``` |
| 73 | 79 |
| (...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 127 errors when adding new filters on the options page | 133 errors when adding new filters on the options page |
| 128 * `blockedURLs`: a comma-separated list of URLs that should be considered | 134 * `blockedURLs`: a comma-separated list of URLs that should be considered |
| 129 blocked (necessary to test the check for blocked scripts in sharing buttons). | 135 blocked (necessary to test the check for blocked scripts in sharing buttons). |
| 130 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 136 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used |
| 131 to trigger various filter list download errors | 137 to trigger various filter list download errors |
| 132 * `platform=chromium`: shows the opt-out for the developer tools panel | 138 * `platform=chromium`: shows the opt-out for the developer tools panel |
| 133 * `showNotificationUI=true`: simulates user having opted-out of notifications | 139 * `showNotificationUI=true`: simulates user having opted-out of notifications |
| 134 | 140 |
| 135 | 141 |
| 136 [crowdin]: https://crowdin.com | 142 [crowdin]: https://crowdin.com |
| LEFT | RIGHT |