Skip to content

Commit 511e168

Browse files
committed
Merge branch 'fixes'
2 parents e968153 + 02f7a47 commit 511e168

39 files changed

Lines changed: 1148 additions & 6157 deletions

.eslintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
"Number": "number",
9494
"object": "Object",
9595
"String": "string",
96-
"HTMLElement": "HTMLElement"
96+
"HtmlElement": "HTMLElement"
9797
},
9898
"requireReturnType": true,
9999
"matchDescription": ".+",

CONTRIBUTORS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@xlomonosvx
2+
Metta Ong (@ongspxm)

EnvironmentalOptions.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* Adjusts options page for browser or system (mobile/Android) compatibility.
3+
*
4+
* Notice: You can include this asyncronously even when the whole DOM is not parsed yet.
5+
* It only accesses the body tag and that is very likely available as it's likely one of
6+
* the first HTML tags that is written and this script is obviously included afterwards
7+
* in the head tag.
8+
* This prevents unnecessary flackering when the CSS is added and the browser needs to
9+
* re-parse/render the HTML.
10+
*
11+
* @public
12+
* @module EnvironmentalOptions
13+
*/
14+
15+
/**
16+
* Return the browser's browser info or fallback to an empty object.
17+
*
18+
* This is a workaround for Chrome/ium browsers that do not support runtime.getBrowserInfo().
19+
* See https://github.com/TinyWebEx/AutomaticSettings/issues/18
20+
*
21+
* @private
22+
* @returns {Promise<bool>}
23+
*/
24+
async function getBrowserInfo() {
25+
if (!browser.runtime.getBrowserInfo) {
26+
return {};
27+
}
28+
29+
return await browser.runtime.getBrowserInfo();
30+
}
31+
32+
/**
33+
* Returns whether the current runtime is a mobile one (true) or not (false).
34+
*
35+
* @public
36+
* @returns {Promise<bool>}
37+
*/
38+
export async function isMobile() {
39+
const platformInfo = await browser.runtime.getPlatformInfo();
40+
41+
return platformInfo.os === "android";
42+
}
43+
44+
/**
45+
* Returns whether the current browser is from Mozilla.
46+
*
47+
* This includes Firefox and Thunderbird e.g.
48+
*
49+
* @public
50+
* @returns {Promise<bool>}
51+
*/
52+
export async function isMozilla() {
53+
const browserInfo = await getBrowserInfo();
54+
55+
// Thunderbird is explicitly checked as a workaround as Thunderbird does not return the vendor correctly
56+
// see https://bugzilla.mozilla.org/show_bug.cgi?id=1702722
57+
// and https://github.com/TinyWebEx/AutomaticSettings/issues/11
58+
return browserInfo.vendor === "Mozilla" || browserInfo.name === "Thunderbird";
59+
}
60+
61+
/**
62+
* Returns whether the current browser is Firefox.
63+
*
64+
* This does not include Thunderbird!
65+
*
66+
* @public
67+
* @returns {Promise<bool>}
68+
*/
69+
export async function isFirefox() {
70+
const browserInfo = await getBrowserInfo();
71+
72+
return browserInfo.name === "Firefox";
73+
}
74+
75+
/**
76+
* Initalize this module.
77+
*
78+
* Currently this just adds a CSS class.
79+
* You can e.g. use this to disable all incompatible options on mobile devices.
80+
*
81+
* @public
82+
* @returns {Promise}
83+
*/
84+
export function init() {
85+
isMobile().then((isCurrentlyMobile) => {
86+
if (!isCurrentlyMobile) {
87+
return;
88+
}
89+
document.querySelector("body").classList.add("mobile");
90+
});
91+
isFirefox().then((isCurrentlyFirefox) => {
92+
if (!isCurrentlyFirefox) {
93+
return;
94+
}
95+
document.querySelector("body").classList.add("firefox");
96+
});
97+
isMozilla().then((isCurrentlyMozilla) => {
98+
if (!isCurrentlyMozilla) {
99+
return;
100+
}
101+
document.querySelector("body").classList.add("mozilla");
102+
});
103+
104+
return Promise.all([isMobile, isFirefox]);
105+
}

MobileOptions.js

Lines changed: 0 additions & 45 deletions
This file was deleted.

README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ It is also designed to be used with settings pages that save their settings auto
1010
* [saving multiple options grouped together in JS objects](#option-groups)
1111
* [MessageHandler integration](https://github.com/TinyWebEx/MessageHandler), e.g. to show errors when saving or loading an option fails, or to show a message if some managed options are used.
1212
* [can automatically let your reset button spring to live](#reset-button)
13+
* [contains a useful CSS file for adjusting your options for the Photon design](#css)
1314

1415
## Usage
1516

@@ -212,6 +213,59 @@ function saveOptionXy(param) {
212213

213214
Doc is TODO…
214215

216+
## CSS
217+
218+
In the file [`css/photonOptions.css`], there is a style for a Firefox/[Photon](https://design.firefox.com/photon/)-style appearance of the settings.
219+
220+
Here is the corresponding HTML, if you want to use it:
221+
```html
222+
<body>
223+
<form>
224+
<!-- begin each new section, with a section tag, a line separate each
225+
section from another
226+
-->
227+
<section>
228+
<!-- Each section should have a title. -->
229+
<h1>Section title</h1>
230+
<!-- Add options in unordered lists. (bullet points will not be shown)
231+
This is just for semantics.
232+
-->
233+
<ul>
234+
<!-- Each option is a "list item" -->
235+
<li>
236+
<!-- To put options in one line, add a line class. -->
237+
<div class="line">
238+
<!-- Your option, as explained before. -->
239+
<input class="setting save-on-change" type="checkbox" id="popupIconColored" name="popupIconColored">
240+
<label for="popupIconColored">Colored icon</label>
241+
</div>
242+
<!-- use the indent class to indent a line as per it's checkbox -->
243+
<div class="line indent">
244+
<!-- .helper-text displays a grey text for explaining an option -->
245+
<span class="helper-text">Shows a colored icon instead of the black/white icon in the toolbar.</span>
246+
</div>
247+
</li>
248+
</ul>
249+
250+
<!-- You can use h2 headings to add even more structure. -->
251+
<h2>Subheading</h2>
252+
253+
<!-- [...] -->
254+
</section>
255+
</form>
256+
</body>
257+
258+
```
259+
260+
## Automatically disabling options
261+
262+
To automatically disable options depending on the environment, load the `EnvironmentalOptions.js` module and run `MobileOptions.init();`. You can even do that asynchronously with the `async` attribute at the `script` tag.
263+
264+
If you do so, you can use two CSS classes:
265+
* You can use the CSS class `.mobile-incompatible` to mark options that are not compatible with Android/mobile devices.
266+
* You can use the CSS class `.firefox-only` to mark options that are only compatible with the Mozilla Firefox browser. **This does _not_ include Thunderbird
267+
* You can use the CSS class `.mozilla-only` to mark options that are only compatible with the Mozilla products like Mozilla Firefox and Thunderbird.
268+
215269
## API note
216270

217271
Everything in the `internal` dir is considered to be an internal module/file and thus not be considered to be an API under _semantic versioning_. That means the API there can change at any time, do _not_ import anything from there!

css/photonOptions.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
:root {
2+
--gray-separator: rgba(12, 12, 13, 0.15);
3+
--in-content-deemphasized-text: var(--grey-50);
4+
}
5+
6+
@media (prefers-color-scheme: dark) {
7+
body {
8+
background-color: #202023;
9+
color: rgb(249, 249, 250);
10+
}
11+
h1, h2 {
12+
color: rgb(249, 249, 250);
13+
}
14+
a {
15+
color: var(--blue-40);
16+
}
17+
a:hover {
18+
color: var(--blue-50);
19+
}
20+
a:hover:active {
21+
color: var(--blue-60);
22+
}
23+
24+
:root {
25+
--gray-separator: #545457;
26+
--in-content-deemphasized-text: var(--grey-40);
27+
}
28+
}
29+
30+
body {
31+
/* body20 */
32+
font-size: 15px;
33+
padding: 0 8px;
34+
}
35+
36+
/* on (small) mobile displays */
37+
body.mobile {
38+
/* smaller size -> default on Firefox for Android is 14px */
39+
font-size: 14px;
40+
}
41+
42+
/* disable all options incomaptible with current device/browser */
43+
body.mobile .mobile-incompatible {
44+
display: none;
45+
}
46+
body:not(.firefox) .firefox-only {
47+
display: none;
48+
}
49+
body:not(.mozilla) .mozilla-only {
50+
display: none;
51+
}
52+
53+
/* https://design.firefox.com/photon/patterns/inactive.html */
54+
[disabled],
55+
input[disabled] ~ label {
56+
opacity: 0.4;
57+
}
58+
59+
section {
60+
margin-bottom: 32px;
61+
}
62+
63+
hr {
64+
border: 0;
65+
height: 1px;
66+
background-color: var(--gray-separator);
67+
}
68+
69+
h1 {
70+
margin: 32px 0 16px 0;
71+
padding: 16px 0 0 0;
72+
73+
/* title30 */
74+
font-size: 22px;
75+
font-weight: 300;
76+
77+
border-top: 1px solid var(--gray-separator);
78+
}
79+
80+
form section:first-child h1 {
81+
border-top: none;
82+
margin-top: 16px;
83+
}
84+
85+
h2 {
86+
/* title20 */
87+
font-size: 17px;
88+
font-weight: 600;
89+
margin: 32px 0 16px 0;
90+
}
91+
92+
ul {
93+
margin: 0px;
94+
padding: 0px;
95+
}
96+
/* still show padding if ul is used for indentation */
97+
ul ul {
98+
padding-left: 40px;
99+
}
100+
101+
li {
102+
list-style-type: none;
103+
margin-top: 10px;
104+
padding: 0px;
105+
}
106+
107+
.line {
108+
padding: 2px 0;
109+
margin: 0 0 4px 0;
110+
111+
display: flex;
112+
align-items: center;
113+
}
114+
115+
.line > * {
116+
/* https://design.firefox.com/photon/visuals/grid.html#spacing */
117+
margin: 0 8px 0 0;
118+
}
119+
120+
.line.indent {
121+
margin-inline-start: 28px;
122+
}
123+
124+
.helper-text {
125+
/* caption30 */
126+
font-size: 15px;
127+
color: var(--in-content-deemphasized-text);
128+
display: inline;
129+
}
130+
131+
/* do not break "Learn more" links inside of the text */
132+
.learn-more {
133+
display: inline-block;
134+
}

docs/AutomaticSettings.js.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<![endif]-->
1414
<link type="text/css" rel="stylesheet" href="styles/prettify.css">
1515
<link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
16+
<script src="scripts/nav.js" defer></script>
1617
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1718
</head>
1819
<body>
@@ -67,12 +68,14 @@ <h1 class="page-title">AutomaticSettings.js</h1>
6768
<br class="clear">
6869

6970
<footer>
70-
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Jan 20 2019 22:24:02 GMT+0100 (Mitteleuropäische Normalzeit) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
71+
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Sun Jun 30 2019 23:06:55 GMT+0200 (GMT+02:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
7172
</footer>
7273

7374
<script>prettyPrint();</script>
75+
<script src="scripts/polyfill.js"></script>
7476
<script src="scripts/linenumber.js"></script>
7577

7678

79+
7780
</body>
7881
</html>

0 commit comments

Comments
 (0)