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 21 matching lines...) Expand all Loading... | |
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 URL shown shown in the terminal (example: http://127.0.0.1: 8080). | 52 the HTML pages under URL shown shown in the terminal (example: http://127.0.0.1: 8080). |
53 | 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 ``` | |
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 |