+97
-29
lines changedFilter options
+97
-29
lines changed Original file line number Diff line number Diff line change
@@ -1649,6 +1649,28 @@ vAPI.cloud = (( ) => {
1649 1649
return entry;
1650 1650
};
1651 1651 1652 +
const used = async function(dataKey) {
1653 +
if ( webext.storage.sync.getBytesInUse instanceof Function === false ) {
1654 +
return;
1655 +
}
1656 +
const coarseCount = await getCoarseChunkCount(dataKey);
1657 +
if ( typeof coarseCount !== 'number' ) { return; }
1658 +
const keys = [];
1659 +
for ( let i = 0; i < coarseCount; i++ ) {
1660 +
keys.push(`${dataKey}${i}`);
1661 +
}
1662 +
let results;
1663 +
try {
1664 +
results = await Promise.all([
1665 +
webext.storage.sync.getBytesInUse(keys),
1666 +
webext.storage.sync.getBytesInUse(null),
1667 +
]);
1668 +
} catch(ex) {
1669 +
}
1670 +
if ( Array.isArray(results) === false ) { return; }
1671 +
return { used: results[0], total: results[1], max: QUOTA_BYTES };
1672 +
};
1673 + 1652 1674
const getOptions = function(callback) {
1653 1675
if ( typeof callback !== 'function' ) { return; }
1654 1676
callback(options);
@@ -1665,7 +1687,7 @@ vAPI.cloud = (( ) => {
1665 1687
getOptions(callback);
1666 1688
};
1667 1689 1668 -
return { push, pull, getOptions, setOptions };
1690 +
return { push, pull, used, getOptions, setOptions };
1669 1691
})();
1670 1692 1671 1693
/******************************************************************************/
@@ -6,15 +6,18 @@
6 6
</head>
7 7
<body>
8 8
<div id="cloudToolbar">
9 -
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
10 -
<span id="cloudInfo" data-i18n="cloudNoData"></span>
11 -
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
12 -
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
13 -
<span id="cloudCog" class="fa-icon">cog</span>
9 +
<div>
10 +
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
11 +
<span id="cloudInfo" data-i18n="cloudNoData"></span>
12 +
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
13 +
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
14 +
</div>
15 +
<div id="cloudCog" class="fa-icon">cog</div>
14 16
<div id="cloudOptions">
15 -
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="vflex" type="button" data-i18n="genericSubmit"></button>
17 +
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
16 18
</div>
17 19
</div>
18 20
<div id="cloudError"></div>
21 +
<div id="cloudCapacity"><div><div></div></div></div>
19 22
</body>
20 23
</html>
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
1 1
#cloudWidget {
2 2
background: url("../img/cloud.png") hsl(216, 100%, 93%);
3 -
border-radius: 3px;
4 3
margin: 0.5em 0;
5 4
overflow: auto;
6 -
padding: 0.5em;
7 5
position: relative;
8 6
}
9 7
#cloudWidget.hide {
10 8
display: none;
11 9
}
12 -
#cloudToolbar > button {
13 -
font-size: 180%;
14 -
padding: 0 0.25em;
15 -
position: relative;
10 +
#cloudWidget div {
11 +
display: flex;
16 12
}
17 13
#cloudToolbar {
18 -
display: flex;
14 +
align-items: flex-start;
19 15
flex-wrap: nowrap;
16 +
justify-content: space-between;
17 +
}
18 +
#cloudToolbar > div:first-of-type {
19 +
margin: 0.5em;
20 +
}
21 +
#cloudToolbar button {
22 +
padding: 0 0.25em;
23 +
position: relative;
24 +
}
25 +
#cloudToolbar button .fa-icon {
26 +
font-size: 180%;
20 27
}
21 28
#cloudToolbar button[disabled] {
22 29
visibility: hidden;
@@ -28,56 +35,65 @@
28 35
margin-left: 0.25em;
29 36
}
30 37
#cloudPullAndMerge > span:nth-of-type(2) {
31 -
font-size: 50%;
38 +
font-size: 90%;
32 39
position: absolute;
33 40
right: 0;
34 41
top: 0;
35 42
}
36 43
#cloudInfo {
37 -
color: var(--fg-0-60);
38 44
flex-shrink: 0;
39 45
font-size: 90%;
40 46
margin: 0 1em;
41 47
overflow: hidden;
42 48
padding: 0;
43 49
white-space: pre-line;
44 50
}
51 +
#cloudCapacity {
52 +
background-color: var(--light-gray-30);
53 +
height: 4px;
54 +
}
55 +
#cloudCapacity > div {
56 +
background-color: var(--light-gray-60);
57 +
}
58 +
#cloudCapacity > div > div {
59 +
background-color: var(--violet-60);
60 +
}
45 61
#cloudError {
46 62
color: var(--fg-icon-info-lvl-4);
47 63
flex-grow: 1;
48 64
flex-shrink: 2;
49 65
font-size: small;
50 -
margin: 0.5em 0.5em 0 0;
66 +
margin: 0 0.5em 0.5em 0.5em;
51 67
}
52 68
#cloudError:empty {
53 69
display: none;
54 70
}
55 -
#cloudToolbar #cloudCog {
71 +
#cloudCog {
56 72
color: var(--fg-0-50);
57 73
cursor: pointer;
58 74
fill: var(--fg-0-50);
59 -
flex-grow: 1;
60 75
font-size: 110%;
61 76
justify-content: flex-end;
62 77
padding: 0.4em;
63 78
}
64 -
#cloudToolbar #cloudCog:hover {
79 +
#cloudCog:hover {
65 80
color: inherit;
66 81
fill: inherit;
67 82
}
68 -
#cloudToolbar #cloudOptions {
83 +
#cloudWidget #cloudOptions {
69 84
background-color: var(--default-surface);
70 85
border: 1px solid var(--bg-1-border);
71 -
bottom: 0;
72 86
display: none;
73 -
margin: 0.4em;
74 -
padding: 0.4em;
87 +
padding: 0.5em;
75 88
position: absolute;
76 89
right: 0;
77 90
text-align: center;
78 -
top: 0;
79 91
z-index: 10;
80 92
}
81 -
#cloudToolbar #cloudOptions.show {
93 +
#cloudWidget #cloudOptions.show {
82 94
display: block;
95 +
white-space: nowrap;
96 +
}
97 +
#cloudOptions button {
98 +
min-height: var(--default-gap-xlarge);
83 99
}
Original file line number Diff line number Diff line change
@@ -38,6 +38,7 @@
38 38
--light-gray-90: #80808f;
39 39
--red-60: #e22850;
40 40
--violet-40: #ab71ff;
41 +
--violet-60: #7542e5;
41 42
--violet-70: #592acb;
42 43
--violet-80: #45278d;
43 44
--yellow-30: #ffd567;
@@ -34,7 +34,7 @@ self.cloud = {
34 34
datakey: '',
35 35
data: undefined,
36 36
onPush: null,
37 -
onPull: null
37 +
onPull: null,
38 38
};
39 39 40 40
/******************************************************************************/
@@ -47,6 +47,25 @@ if ( self.cloud.datakey === '' ) { return; }
47 47 48 48
/******************************************************************************/
49 49 50 +
const fetchStorageUsed = async function() {
51 +
const elem = widget.querySelector('#cloudCapacity');
52 +
if ( elem.classList.contains('hide') ) { return; }
53 +
const result = await vAPI.messaging.send('cloudWidget', {
54 +
what: 'cloudUsed',
55 +
datakey: self.cloud.datakey,
56 +
});
57 +
if ( result instanceof Object === false ) {
58 +
elem.classList.add('hide');
59 +
return;
60 +
}
61 +
const total = (result.total / result.max * 100).toFixed(1);
62 +
elem.firstElementChild.style.width = `${total}%`;
63 +
const used = (result.used / result.total * 100).toFixed(1);
64 +
elem.firstElementChild.firstElementChild.style.width = `${used}%`;
65 +
};
66 + 67 +
/******************************************************************************/
68 + 50 69
const fetchCloudData = async function() {
51 70
const entry = await vAPI.messaging.send('cloudWidget', {
52 71
what: 'cloudPull',
@@ -94,6 +113,7 @@ const pushData = async function() {
94 113
.textContent = failed ? error : '';
95 114
if ( failed ) { return; }
96 115
fetchCloudData();
116 +
fetchStorageUsed();
97 117
};
98 118 99 119
/******************************************************************************/
@@ -151,7 +171,7 @@ const submitOptions = async function() {
151 171 152 172
const onInitialize = function(options) {
153 173
if ( options instanceof Object === false ) { return; }
154 -
if ( !options.enabled ) { return; }
174 +
if ( options.enabled !== true ) { return; }
155 175
self.cloud.options = options;
156 176 157 177
const xhr = new XMLHttpRequest();
@@ -180,12 +200,13 @@ const onInitialize = function(options) {
180 200
uDom('#cloudCog').on('click', openOptions);
181 201
uDom('#cloudOptions').on('click', closeOptions);
182 202
uDom('#cloudOptionsSubmit').on('click', ( ) => { submitOptions(); });
183 - 203 + 184 204
fetchCloudData().then(result => {
185 205
if ( typeof result !== 'string' ) { return; }
186 206
document.getElementById('cloudPush').classList.add('error');
187 207
document.querySelector('#cloudError').textContent = result;
188 208
});
209 +
fetchStorageUsed();
189 210
};
190 211
xhr.send();
191 212
};
@@ -828,6 +828,11 @@ const onMessage = function(request, sender, callback) {
828 828
callback(result);
829 829
});
830 830 831 +
case 'cloudUsed':
832 +
return vAPI.cloud.used(request.datakey).then(result => {
833 +
callback(result);
834 +
});
835 + 831 836
default:
832 837
break;
833 838
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4