Left: | ||
Right: |
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 Once you have cloned the repository, go into the folder and run: `npm install`. | |
13 | |
14 Both node dependencies and one python script will run to setup the folder. | |
Thomas Greiner
2018/01/23 19:22:35
Detail: I know it's nit-picking but I noticed that
| |
15 | |
16 You need Python version 2 to ensure a successful `./buildtools` setup. | |
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 | |
9 Directory structure | 18 Directory structure |
10 ------------------- | 19 ------------------- |
11 | 20 |
12 * Top-level files: | 21 * Top-level files: |
13 * `firstRun.html` and `firstRun.js`: First-run page, see below | 22 * `firstRun.html` and `firstRun.js`: First-run page, see below |
14 * `i18n.js`: Localization functions, should be included by all pages. | 23 * `i18n.js`: Localization functions, should be included by all pages. |
15 * `messageResponder.js`: Script to be used on the background page to respond | 24 * `messageResponder.js`: Script to be used on the background page to respond |
16 to messages sent by UI code. | 25 to messages sent by UI code. |
17 * `background.html`, `background.js`: Test implementation of the background | 26 * `background.html`, `background.js`: Test implementation of the background |
18 page, should *not be imported*. | 27 page, should *not be imported*. |
(...skipping 11 matching lines...) Expand all Loading... | |
30 * `ext` directory: Test implementation of the abstraction layer. This one should | 39 * `ext` directory: Test implementation of the abstraction layer. This one should |
31 *not to be imported*, these files should rather be replaced by | 40 *not to be imported*, these files should rather be replaced by |
32 product-specific versions providing the same interface. | 41 product-specific versions providing the same interface. |
33 | 42 |
34 Testing | 43 Testing |
35 ------- | 44 ------- |
36 | 45 |
37 In Firefox the HTML pages can be opened directly from the file system | 46 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 | 47 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 | 48 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 | 49 starting the application. Alternatively, you can run `npm start` and open |
41 Python 2.7) and open the HTML pages under URLs like | 50 the HTML pages under URLs like `http://127.0.0.1:5000/firstRun.html`. |
42 `http://127.0.0.1:5000/firstRun.html`. | |
43 | 51 |
44 Various aspects of the pages can be tested by setting parameters in the URL. The | 52 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 | 53 The only universal parameter is `locale`, e.g. `?locale=es-AR`. This parameter |
46 overrides browser's locale which will be used by default. | 54 overrides browser's locale which will be used by default. |
47 | 55 |
56 Linting | |
57 ------- | |
58 | |
59 You can lint both JS and CSS at once via `npm run lint`. | |
60 | |
61 You can also run only JS via `npm run lint:js`, or CSS via `npm run lint:css`. | |
62 | |
63 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. | |
64 | |
65 You can try as example via `npx stylelint --fix skin/real-file-name.css`. | |
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
| |
66 | |
48 Translations | 67 Translations |
49 ------------ | 68 ------------ |
50 | 69 |
51 Translations for the strings in this project are managed using the online | 70 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 | 71 [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 | 72 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.) | 73 the command line. (You will also need the Crowdin API key for the project.) |
55 | 74 |
56 firstRun.html | 75 firstRun.html |
57 ------------- | 76 ------------- |
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
101 errors when adding new filters on the options page | 120 errors when adding new filters on the options page |
102 * `blockedURLs`: a comma-separated list of URLs that should be considered | 121 * `blockedURLs`: a comma-separated list of URLs that should be considered |
103 blocked (necessary to test the check for blocked scripts in sharing buttons). | 122 blocked (necessary to test the check for blocked scripts in sharing buttons). |
104 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 123 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used |
105 to trigger various filter list download errors | 124 to trigger various filter list download errors |
106 * `platform=chromium`: shows the opt-out for the developer tools panel | 125 * `platform=chromium`: shows the opt-out for the developer tools panel |
107 * `showNotificationUI=true`: simulates user having opted-out of notifications | 126 * `showNotificationUI=true`: simulates user having opted-out of notifications |
108 | 127 |
109 | 128 |
110 [crowdin]: https://crowdin.com | 129 [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 |