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 ----------------------- |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
76 | 76 |
77 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. | 77 Remember, both `eslint` and `stylelint` can help fixing issues via `--fix` flag. |
78 | 78 |
79 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a
n-npm-package-runner-55f7d4bd282b) | 79 You can try as example via [npx](https://medium.com/@maybekatz/introducing-npx-a
n-npm-package-runner-55f7d4bd282b) |
80 which should be provided automatically when you install `npm`. | 80 which should be provided automatically when you install `npm`. |
81 | 81 |
82 ```sh | 82 ```sh |
83 npx stylelint --fix skin/real-file-name.css | 83 npx stylelint --fix skin/real-file-name.css |
84 ``` | 84 ``` |
85 | 85 |
86 Bundling | 86 Bundling JS |
87 -------- | 87 ----------- |
88 | 88 |
89 As it is for the `desktop-options.js` case, bundling is done via `package.json` | 89 As it is for the `desktop-options.js` case, bundling is done via `package.json` |
90 script entries. | 90 script entries. |
91 | 91 |
92 A dedicated script entry, such `bundle:desktop-options`, | 92 A dedicated script entry, such `bundle:desktop-options.js`, |
93 should perform the following operations: | 93 should simply use the `bash:js` script, passing along |
94 | 94 the source file and the target. |
95 * ensure source code passes linting | 95 |
96 * ensure the bundle won't affect future linting operations | 96 ```js |
97 * ensure `browserify` uses `--node` and `--no-bundle-external` flags | 97 { |
98 * point at the entry point, and output in the top level folder | 98 // example of a new bundle for the ./js/source.js file |
99 | 99 "bundle:target.js": "npm run bash:js ./js/source.js ./target.js" |
100 Accordingly, this is what happens with the `bundle:desktop-options`: | 100 } |
101 | 101 ``` |
102 ```sh | 102 |
103 # the && operator ensure each step is executed only | 103 The main `bundle` script should include each sub-bundle operation too. |
104 # if the previous one didn't produce an error | 104 |
105 eslint ./js/**/*.js && | 105 Bundling CSS |
106 # browserify doesn't offer a way to prefix with text | 106 ------------ |
107 # the file is hence created with eslint disabled and a warning | 107 |
108 echo '/* eslint-disable */// BUNDLED FILE' > ./desktop-options.js && | 108 As it is for the `desktop-options.css` case, bundling is done via `package.json` |
109 # browserify take an entry point and bundle all its required files | 109 script entries. |
110 # outputting the result into ./desktop-options.js | 110 |
111 browserify --node --no-bundle-external js/desktop-options.js >> ./desktop-option
s.js | 111 A dedicated script entry, such `bundle:desktop-options.css`, |
112 ``` | 112 should simply use the `bash:css` script, passing along |
113 | 113 the source file and the target. |
114 For a new bundle, i.e. `mobile-options.js`, simply use the same procedure | 114 |
115 but swap the `desktop-options` file/script name with `mobile-options`. | 115 ```js |
116 | 116 { |
117 The main `bundle` script should include each sub-bundle operation. | 117 // example of a new bundle for the ./css/source.scss file |
| 118 "bundle:target.css": "npm run bash:css ./css/source.scss ./skin/target.css" |
| 119 } |
| 120 ``` |
| 121 |
| 122 In case there are dependencies, please ensure these are |
| 123 imported via `@import "dep.scss"` and not via `url(...)` syntax. |
| 124 |
| 125 As it is for JS bundles, the main `bundle` script should include each |
| 126 CSS bundle too. |
118 | 127 |
119 Watching | 128 Watching |
120 -------- | 129 -------- |
121 | 130 |
122 While developing, it is convenient to bundle automatically | 131 While developing, it is convenient to bundle automatically |
123 each time a source file is changed. | 132 each time a source file is changed. |
124 | 133 |
125 As a team, we agreed on restructuring JS code inside the js folder, | 134 As a team, we agreed on restructuring JS code inside the js folder, |
126 so that is watched, and each bundled created, every time there is a changes. | 135 so that is watched, and each bundled created, every time there is a changes. |
127 | 136 |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
182 This is the implementation of the Adblock Plus options page which is | 191 This is the implementation of the Adblock Plus options page which is |
183 the primary UI for changing settings and for managing filter lists. | 192 the primary UI for changing settings and for managing filter lists. |
184 | 193 |
185 To aid testing, the behavior of this page is affected by a number of URL | 194 To aid testing, the behavior of this page is affected by a number of URL |
186 parameters: | 195 parameters: |
187 | 196 |
188 * `addonVersion`: sets addon version application parameter that is used for | 197 * `addonVersion`: sets addon version application parameter that is used for |
189 creating the link to the version-specific release notes | 198 creating the link to the version-specific release notes |
190 * `addSubscription=true`: this parameter should trigger a dialog for adding | 199 * `addSubscription=true`: this parameter should trigger a dialog for adding |
191 subscriptions as initiated by clicking on an "abp:subscribe" link | 200 subscriptions as initiated by clicking on an "abp:subscribe" link |
192 * `additionalSubscriptions=true`: Simulates scenario of persistent filter lists | 201 * `additionalSubscriptions`: A comma-separated list of subscription URLs that |
193 that are preinstalled by administrators. | 202 simulates scenario of persistent filter lists preinstalled by administrators. |
194 * `filterError=true`: causes filter validation to fail, showing validation | 203 * `filterError=true`: causes filter validation to fail, showing validation |
195 errors when adding new filters on the options page | 204 errors when adding new filters on the options page |
196 * `blockedURLs`: a comma-separated list of URLs that should be considered | 205 * `blockedURLs`: a comma-separated list of URLs that should be considered |
197 blocked (necessary to test the check for blocked scripts in sharing buttons). | 206 blocked (necessary to test the check for blocked scripts in sharing buttons). |
198 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used | 207 * `downloadStatus`: sets downloadStatus parameter for filter lists, can be used |
199 to trigger various filter list download errors | 208 to trigger various filter list download errors |
200 * `platform=chromium`: shows the opt-out for the developer tools panel | 209 * `platform=chromium`: shows the opt-out for the developer tools panel |
201 * `showNotificationUI=true`: simulates user having opted-out of notifications | 210 * `showNotificationUI=true`: simulates user having opted-out of notifications |
202 | 211 |
203 | 212 |
204 [crowdin]: https://crowdin.com | 213 [crowdin]: https://crowdin.com |
LEFT | RIGHT |