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 Once you have cloned the repository, go into the folder and run: `npm install`. | 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 Both node dependencies and one python script will run to setup the folder. | 14 If you are installing `node` in ArchLinux, please remember to install `npm` too. |
Thomas Greiner
2018/01/23 19:22:35
Detail: I know it's nit-picking but I noticed that
| |
15 | 15 |
16 You need Python version 2 to ensure a successful `./buildtools` setup. | 16 After cloning this repository, enter into its folder and run: `npm install`. |
Thomas Greiner
2018/01/23 19:22:35
What about mentioning that as part of a list of re
a.giammarchi
2018/01/24 10:52:36
Python 2 (or python 2) is available by default in
Thomas Greiner
2018/01/24 11:56:33
I guess that's a personal preference so as long as
| |
17 | |
18 This should create and populate, both `./node_modules` folder and the `./buildto ols` one. | |
17 | 19 |
18 Directory structure | 20 Directory structure |
19 ------------------- | 21 ------------------- |
20 | 22 |
21 * Top-level files: | 23 * Top-level files: |
22 * `firstRun.html` and `firstRun.js`: First-run page, see below | 24 * `firstRun.html` and `firstRun.js`: First-run page, see below |
23 * `i18n.js`: Localization functions, should be included by all pages. | 25 * `i18n.js`: Localization functions, should be included by all pages. |
24 * `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 |
25 to messages sent by UI code. | 27 to messages sent by UI code. |
26 * `background.html`, `background.js`: Test implementation of the background | 28 * `background.html`, `background.js`: Test implementation of the background |
(...skipping 13 matching lines...) Expand all Loading... | |
40 *not to be imported*, these files should rather be replaced by | 42 *not to be imported*, these files should rather be replaced by |
41 product-specific versions providing the same interface. | 43 product-specific versions providing the same interface. |
42 | 44 |
43 Testing | 45 Testing |
44 ------- | 46 ------- |
45 | 47 |
46 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 |
47 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 |
48 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 |
49 starting the application. Alternatively, you can run `npm start` and open | 51 starting the application. Alternatively, you can run `npm start` and open |
50 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 ``` | |
51 | 59 |
52 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. |
53 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 |
54 overrides browser's locale which will be used by default. | 62 overrides browser's locale which will be used by default. |
55 | 63 |
56 Linting | 64 Linting |
57 ------- | 65 ------- |
58 | 66 |
59 You can lint both JS and CSS at once via `npm run lint`. | 67 You can lint all options via `npm run lint`. |
60 | 68 |
61 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`. |
62 | 70 |
63 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. |
64 | 72 |
65 You can try as example via `npx stylelint --fix skin/real-file-name.css`. | 73 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a n-npm-package-runner-55f7d4bd282b) |
Thomas Greiner
2018/01/23 19:22:35
I assume it's a typo but in case it's not: What do
a.giammarchi
2018/01/24 10:52:36
npx is the "node package executable" binary that c
Thomas Greiner
2018/01/24 11:56:33
I didn't know this was included in npm so thanks f
| |
74 which should be provided automatically when you install `npm`. | |
75 | |
76 ```sh | |
77 npx stylelint --fix skin/real-file-name.css | |
78 ``` | |
66 | 79 |
67 Translations | 80 Translations |
68 ------------ | 81 ------------ |
69 | 82 |
70 Translations for the strings in this project are managed using the online | 83 Translations for the strings in this project are managed using the online |
71 [Crowdin platform][crowdin]. To synchronise with Crowdin you can use the build | 84 [Crowdin platform][crowdin]. To synchronise with Crowdin you can use the build |
72 script. To get a list of the possible commands type `./build.py help` at | 85 script. To get a list of the possible commands type `./build.py help` at |
73 the command line. (You will also need the Crowdin API key for the project.) | 86 the command line. (You will also need the Crowdin API key for the project.) |
74 | 87 |
75 firstRun.html | 88 firstRun.html |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
120 errors when adding new filters on the options page | 133 errors when adding new filters on the options page |
121 * `blockedURLs`: a comma-separated list of URLs that should be considered | 134 * `blockedURLs`: a comma-separated list of URLs that should be considered |
122 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). |
123 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 136 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used |
124 to trigger various filter list download errors | 137 to trigger various filter list download errors |
125 * `platform=chromium`: shows the opt-out for the developer tools panel | 138 * `platform=chromium`: shows the opt-out for the developer tools panel |
126 * `showNotificationUI=true`: simulates user having opted-out of notifications | 139 * `showNotificationUI=true`: simulates user having opted-out of notifications |
127 | 140 |
128 | 141 |
129 [crowdin]: https://crowdin.com | 142 [crowdin]: https://crowdin.com |
LEFT | RIGHT |