Skip to content

Commit 37f4cd0

Browse files
authored
Merge branch 'main' into stage-in-spritepane
2 parents 5458e40 + bf88f75 commit 37f4cd0

9 files changed

Lines changed: 296 additions & 75 deletions

File tree

extras/feature-locales/en.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

extras/popup/popup.css

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,6 @@ a {
6868

6969
.feature label {
7070
color: var(--primary-color);
71-
position: relative;
72-
top: -0.7rem;
73-
margin-left: 0.5rem;
74-
}
75-
76-
.feature input[type="checkbox"] {
77-
display: inline-block;
78-
width: 1.25rem;
79-
cursor: pointer;
8071
}
8172

8273
.feature > span {
@@ -108,9 +99,10 @@ a {
10899
margin-bottom: 0rem;
109100
}
110101
.feature p {
111-
color: var(--secondary-color);
102+
margin: 5px 0;
112103
opacity: 0.5;
113104
padding-right: 4rem;
105+
color: var(--secondary-color);
114106
}
115107

116108
.feature > input {
@@ -121,19 +113,18 @@ a {
121113
.feature input {
122114
padding: 0.1vw;
123115
height: 2rem;
124-
margin-left: 0.5vw;
125-
background-color: var(--theme);
116+
margin-left: auto;
126117
border-radius: 1rem;
127118
outline: none;
128119
border: 0px;
120+
background-color: var(--theme);
129121
color: white;
130122
}
131123

132124
.feature input {
133125
color: var(--color);
134126
background-color: var(--feature-input-bg);
135127
padding-left: 1rem !important;
136-
margin-bottom: 0.5rem;
137128
}
138129
.feature button {
139130
cursor: pointer;
@@ -201,8 +192,6 @@ a {
201192
background-position: 47% 46%;
202193
background-size: 20px 20px;
203194
background-repeat: no-repeat;
204-
position: relative;
205-
top: -18px;
206195
}
207196
.searchbaricon {
208197
border-radius: var(--radius) 0px 0px var(--radius);
@@ -217,8 +206,6 @@ a {
217206
background-position: 80% 50%;
218207
background-size: 30px 30px;
219208
background-repeat: no-repeat;
220-
position: relative;
221-
top: -18px;
222209
}
223210
.settingsButton {
224211
padding: 12px;
@@ -242,14 +229,25 @@ a {
242229
.feature input {
243230
padding: 0.1vw;
244231
height: 2rem;
245-
margin-left: 0.5vw;
232+
margin-left: auto;
246233
border-radius: 1rem;
247234
outline: none;
248235
border: 0px;
249236
color: white;
250237
background-color: var(--feature-input-bg);
251238
}
252239

240+
.feature input[type="checkbox"] {
241+
display: inline-block;
242+
width: 1.25rem;
243+
min-width: 55px;
244+
cursor: pointer;
245+
}
246+
.feature input[type="color"] {
247+
padding: 0.1vw !important;
248+
border-radius: 0.4rem;
249+
}
250+
253251
/*Switch*/
254252
.switch {
255253
position: relative;
@@ -435,14 +433,17 @@ span.new-feature-tag.beta {
435433
}
436434

437435
.special-switch {
438-
position: relative;
439436
width: 55px;
440437
height: 28px;
438+
margin-left: auto;
441439
transform: scale(80%);
442-
float: right;
443440
position: relative;
444-
top: -0.25rem;
445-
margin: 0px;
441+
}
442+
443+
.feature .option {
444+
display: flex;
445+
margin: 5px 0;
446+
align-items: center;
446447
}
447448

448449
.feature table,

extras/popup/popup.js

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -686,42 +686,33 @@ async function getFeatures() {
686686
for (var optionPlace in feature.options) {
687687
var option = feature.options[optionPlace];
688688
var input = document.createElement("input");
689+
input.type = ["text", "checkbox", "number", "color"][option.type || 0];
689690
input.dataset.id = option.id;
690691
input.dataset.feature = feature.id;
691-
input.placeholder = option.name;
692-
input.type = ["text", "checkbox", "number", "color"][option.type || 0];
693692
var optionData = (await chrome.storage.sync.get(option.id))[option.id];
694693
input.value = optionData || "";
694+
input.placeholder = `Enter ${input.type}`;
695+
var optionDiv = document.createElement("div")
696+
optionDiv.className = "option";
697+
var label = document.createElement("label");
698+
label.textContent = option.name;
699+
optionDiv.appendChild(label)
700+
695701
if (input.type === "checkbox") {
702+
input.checked = optionData || false;
696703
var specialLabel = document.createElement("label");
697704
specialLabel.className = "special-switch";
698-
input.className = "checkbox"
705+
input.classList.add = "checkbox"
699706
var span = document.createElement("span");
700707
span.className = "slider round";
701708
specialLabel.appendChild(input);
702709
specialLabel.appendChild(span);
710+
optionDiv.appendChild(specialLabel)
703711
} else {
704-
div.appendChild(input);
705-
}
706-
if (input.type === "checkbox") {
707-
let table = document.createElement("table")
708-
let tr = document.createElement("tr")
709-
table.appendChild(tr)
710-
711-
let td1 = document.createElement("td")
712-
tr.appendChild(td1)
713-
let td2 = document.createElement("td")
714-
tr.appendChild(td2)
715-
716-
div.appendChild(table)
717-
718-
var label = document.createElement("label");
719-
label.textContent = option.name;
720-
label.style.marginLeft = "0px"
721-
td1.appendChild(label);
722-
td2.appendChild(specialLabel)
723-
input.checked = optionData || false;
712+
optionDiv.appendChild(input)
724713
}
714+
div.appendChild(optionDiv)
715+
725716
input.dataset.validation = btoa(
726717
JSON.stringify(option.validation || [])
727718
);

extras/style.css

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ a {
122122
}
123123

124124
.feature p {
125+
margin: 5px 0;
125126
opacity: 0.5;
126127
font-size: 0.8rem;
127128
padding-right: 4rem;
@@ -131,11 +132,10 @@ a {
131132
.feature input {
132133
padding: 0.1vw;
133134
height: 2rem;
134-
margin-left: 0.5vw;
135+
margin-left: auto;
135136
border-radius: 1rem;
136137
outline: none;
137138
padding-left: 1rem;
138-
margin-bottom: 0.5rem;
139139
border: 0px;
140140
color: var(--primary-color);
141141
background-color: var(--feature-input-bg);
@@ -144,8 +144,13 @@ a {
144144
.feature input[type="checkbox"] {
145145
display: inline-block;
146146
width: 1.25rem;
147+
min-width: 55px;
147148
cursor: pointer;
148149
}
150+
.feature input[type="color"] {
151+
padding: 0.1vw;
152+
border-radius: 0.4rem;
153+
}
149154

150155
.feature > input {
151156
display: block;
@@ -188,9 +193,6 @@ a {
188193

189194
.feature label {
190195
color: var(--primary-color);
191-
position: relative;
192-
top: -0.7rem;
193-
margin-left: 0.5rem;
194196
}
195197

196198
.feature > span {
@@ -793,14 +795,17 @@ span.new-feature-tag.beta {
793795
}
794796

795797
.special-switch {
796-
position: relative;
797798
width: 55px;
798799
height: 28px;
799-
margin: 0px;
800+
margin-left: auto;
800801
transform: scale(80%);
801-
float: right;
802802
position: relative;
803-
top: -0.25rem;
803+
}
804+
805+
.feature .option {
806+
display: flex;
807+
margin: 5px 0;
808+
align-items: center;
804809
}
805810

806811
.feature table,
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"title": "Better Cloud History",
3+
"description": "Updates the cloud monitor page to a more modern version with more details. You can click on variable names to sort by that variable.",
4+
"credits": [
5+
{
6+
"username": "-Brass_Glass-",
7+
"url": "https://scratch.mit.edu/users/-Brass_Glass-/"
8+
},
9+
{
10+
"username": "rgantzos",
11+
"url": "https://scratch.mit.edu/users/rgantzos/"
12+
}
13+
],
14+
"type": [
15+
"Website"
16+
],
17+
"tags": [
18+
"New"
19+
],
20+
"dynamic": true,
21+
"scripts": [
22+
{
23+
"file": "script.js",
24+
"runOn": "/cloudmonitor/*"
25+
}
26+
],
27+
"styles": [
28+
{
29+
"file": "style.css",
30+
"runOn": "/cloudmonitor/*"
31+
}
32+
]
33+
}
Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
export default async function ({ feature, console }) {
2+
let avatars = {}
3+
4+
let projectId = window.location.pathname.split("/")[2]
5+
6+
let data = await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=0`)).json()
7+
data.push(...(await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=40`)).json()).filter((el) => !data.find((old) => old.timestamp === el.timestamp)))
8+
data.push(...(await (await fetch(`https://clouddata.scratch.mit.edu/logs?projectid=${projectId}&limit=40&offset=80`)).json()).filter((el) => !data.find((old) => old.timestamp === el.timestamp)))
9+
10+
let currentOffset = 0
11+
12+
let div = await ScratchTools.waitForElement("div.box-content.v-tabs-content")
13+
14+
let table = makeTable()
15+
feature.self.hideOnDisable(table)
16+
div.appendChild(table)
17+
18+
await addData(data)
19+
20+
async function addData(data) {
21+
for (var i in data) {
22+
let tr = document.createElement("tr")
23+
24+
let user = document.createElement("td")
25+
let a = document.createElement("a")
26+
a.href = `/users/${data[i].user}`
27+
28+
let img = document.createElement("img")
29+
if (avatars[data[i].user]) {
30+
img.src = avatars[data[i].user]
31+
} else {
32+
let { images } = (await (await fetch(`https://api.scratch.mit.edu/users/${data[i].user}/`)).json()).profile
33+
img.src = images["90x90"]
34+
avatars[data[i].user] = images["90x90"]
35+
}
36+
a.appendChild(img)
37+
38+
let span = document.createElement("span")
39+
span.textContent = data[i].user
40+
a.appendChild(span)
41+
42+
user.appendChild(a)
43+
tr.appendChild(user)
44+
45+
let action = document.createElement("td")
46+
action.textContent = data[i].verb.split("_")[0].toUpperCase()
47+
tr.appendChild(action)
48+
49+
let variable = document.createElement("td")
50+
let varName = document.createElement("span")
51+
varName.textContent = data[i].name
52+
varName.className = "ste-cloud-variable"
53+
variable.appendChild(varName)
54+
tr.appendChild(variable)
55+
56+
varName.addEventListener("click", function () {
57+
let varId = this.textContent
58+
59+
if (!table.className.includes("sort")) {
60+
table.querySelectorAll("tr").forEach(function (tr) {
61+
if (!tr.querySelector("th")) {
62+
if (tr.querySelector("td:nth-child(3)")?.textContent !== varId) {
63+
tr.style.display = "none"
64+
tr.classList.add("ste-cloud-dontshow")
65+
}
66+
}
67+
})
68+
table.classList.add("sort")
69+
} else {
70+
table.querySelectorAll("tr").forEach(function (tr) {
71+
tr.style.display = null
72+
tr.classList.remove("ste-cloud-dontshow")
73+
})
74+
table.classList.remove("sort")
75+
}
76+
})
77+
78+
let content = document.createElement("td")
79+
content.textContent = data[i].value
80+
content.className = "ste-cloud-content"
81+
tr.appendChild(content)
82+
83+
let time = document.createElement("td")
84+
time.textContent = new Date(data[i].timestamp).toLocaleString()
85+
time.title = data[i].timestamp.toString()
86+
tr.appendChild(time)
87+
88+
document.querySelector(".ste-cloud-table").appendChild(tr)
89+
}
90+
}
91+
92+
function makeTable() {
93+
let table = document.createElement("table")
94+
table.className = "ste-cloud-table"
95+
96+
let tr = document.createElement("tr")
97+
table.appendChild(tr)
98+
99+
let user = document.createElement("th")
100+
user.textContent = "User"
101+
tr.appendChild(user)
102+
103+
let action = document.createElement("th")
104+
action.textContent = "Action"
105+
tr.appendChild(action)
106+
107+
let variable = document.createElement("th")
108+
variable.textContent = "Variable"
109+
tr.appendChild(variable)
110+
111+
let content = document.createElement("th")
112+
content.textContent = "Content"
113+
tr.appendChild(content)
114+
115+
let time = document.createElement("th")
116+
time.textContent = "Time"
117+
tr.appendChild(time)
118+
119+
return table
120+
}
121+
}

0 commit comments

Comments
 (0)