Skip to content

Commit 76fc5e4

Browse files
tw93tw93
committed
fix(popup): stabilize initial render and restore settings behavior
1 parent 199aed9 commit 76fc5e4

8 files changed

Lines changed: 306 additions & 293 deletions

File tree

‎bookmark/height-init.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
1-
// 扩展弹窗专用的高度初始化脚本（非模块，立即执行）
1+
// 弹窗首帧尺寸初始化（非模块，立即执行）
22
(function () {
3-
const h = localStorage.getItem("savedHeight");
4-
const s = localStorage.getItem("SHOW_SEARCH_BAR");
5-
const e = localStorage.getItem("MAPLE_SEARCH_ENABLED");
6-
let ih = 400;
3+
var width = "408px";
4+
var height = "520px";
75

8-
if (h && h > 30) {
9-
ih = Math.min(Math.max(parseInt(h), 200), 618);
10-
if (e === "true" && s === "true") ih = Math.min(Math.max(parseInt(h), 250), 618);
11-
else if (e === "true" && s !== "true") ih = Math.min(Math.max(parseInt(h) - 60, 200), 618);
12-
else if (e !== "true") ih = Math.min(Math.max(parseInt(h) - 80, 200), 618);
13-
} else {
14-
if (e === "true" && s === "true") ih = 520;
15-
else if (e === "true") ih = 460;
16-
else ih = 380;
6+
function applySize(el) {
7+
if (!el) return;
8+
el.style.width = width;
9+
el.style.minWidth = width;
10+
el.style.maxWidth = width;
11+
el.style.height = height;
12+
el.style.minHeight = height;
13+
el.style.maxHeight = height;
1714
}
1815

19-
// 立即设置CSS变量
20-
document.documentElement.style.setProperty("--popup-height", ih + "px");
16+
applySize(document.documentElement);
17+
18+
function applyBodySize() {
19+
if (!document.body) return;
20+
applySize(document.body);
21+
document.body.style.overflowX = "hidden";
22+
document.body.style.overflowY = "auto";
23+
}
2124

22-
// 如果body已存在，也直接设置高度作为双重保险
23-
if (document.body) {
24-
document.body.style.height = ih + "px";
25+
if (document.readyState === "loading") {
26+
document.addEventListener("DOMContentLoaded", applyBodySize, { once: true });
27+
} else {
28+
applyBodySize();
2529
}
2630
})();

‎bookmark/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 3,
33
"name": "Maple Bookmarks",
44
"description": "Let you navigate smoothly while hiding the bookmark bar.",
5-
"version": "1.17",
5+
"version": "1.18",
66
"action": {
77
"default_popup": "popup.html"
88
},

‎bookmark/manifest_firefox.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 3,
33
"name": "Maple Bookmarks",
44
"description": "Let you navigate smoothly while hiding the bookmark bar.",
5-
"version": "1.17",
5+
"version": "1.18",
66
"action": {
77
"default_popup": "popup.html"
88
},

‎bookmark/popup.html‎

Lines changed: 99 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,34 @@
11
<!doctype html>
2-
<html>
2+
<html style="width: 408px; min-width: 408px; max-width: 408px; height: 520px; min-height: 520px; max-height: 520px;">
33
<head>
44
<meta charset="UTF-8" />
55
<title>Maple Bookmarks</title>
66
<script src="height-init.js"></script>
77
<style>
8+
html {
9+
width: 408px;
10+
min-width: 408px;
11+
max-width: 408px;
12+
height: 520px;
13+
min-height: 520px;
14+
max-height: 520px;
15+
}
16+
817
body {
918
margin: 0;
1019
padding: 8px 0 12px 12px;
1120
width: 408px;
12-
height: var(--popup-height, 400px); /* 使用动态计算的高度变量 */
13-
min-height: 200px;
14-
max-height: 618px;
21+
min-width: 408px;
22+
max-width: 408px;
23+
height: 520px;
24+
min-height: 520px;
25+
max-height: 520px;
1526
box-sizing: border-box;
16-
/* 模仿Chrome原生popup的顺滑效果 */
17-
opacity: 0;
18-
transform: scale(0.98) translateY(-4px);
19-
animation: popupFadeIn 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
20-
/* 添加轻微的深度效果 */
21-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
22-
border-radius: 6px;
27+
overflow-x: hidden;
28+
overflow-y: auto;
2329
background-color: #ffffff;
2430
}
2531

26-
/* Chrome风格的顺滑弹窗动画 */
27-
@keyframes popupFadeIn {
28-
0% {
29-
opacity: 0;
30-
transform: scale(0.98) translateY(-4px);
31-
}
32-
100% {
33-
opacity: 1;
34-
transform: scale(1) translateY(0);
35-
}
36-
}
37-
3832
#hot-area {
3933
position: absolute;
4034
top: 0;
@@ -128,6 +122,55 @@
128122
line-height: 1.8;
129123
}
130124

125+
.loading-state {
126+
width: 100%;
127+
padding-right: 12px;
128+
box-sizing: border-box;
129+
}
130+
131+
body.popup-loading #search-wrapper,
132+
body.popup-loading #hot-area,
133+
body.popup-loading #notification-container,
134+
body.popup-loading .settings-wrapper {
135+
visibility: hidden;
136+
}
137+
138+
.loading-title {
139+
width: 170px;
140+
height: 16px;
141+
border-radius: 8px;
142+
background: linear-gradient(90deg, #efefef 25%, #e4e4e4 37%, #efefef 63%);
143+
background-size: 400% 100%;
144+
margin: 10px 0 14px 2px;
145+
animation: mapleSkeleton 1.2s ease-in-out infinite;
146+
}
147+
148+
.loading-grid {
149+
display: flex;
150+
flex-wrap: wrap;
151+
}
152+
153+
.loading-card {
154+
width: 120px;
155+
height: 42px;
156+
box-sizing: border-box;
157+
border-radius: 5px;
158+
background: linear-gradient(90deg, #f4f4f4 25%, #ececec 37%, #f4f4f4 63%);
159+
background-size: 400% 100%;
160+
margin-bottom: 12px;
161+
margin-right: 12px;
162+
animation: mapleSkeleton 1.2s ease-in-out infinite;
163+
}
164+
165+
@keyframes mapleSkeleton {
166+
0% {
167+
background-position: 100% 50%;
168+
}
169+
100% {
170+
background-position: 0 50%;
171+
}
172+
}
173+
131174
.childContainer {
132175
display: flex;
133176
flex-wrap: wrap;
@@ -139,6 +182,10 @@
139182
position: relative;
140183
margin-top: -30px;
141184
transform: translateY(-105%);
185+
transition: none;
186+
}
187+
188+
body.popup-interactive #search-wrapper {
142189
transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
143190
}
144191

@@ -173,10 +220,14 @@
173220
display: inline-block;
174221
padding: 4px;
175222
transform: rotate(45deg);
176-
transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
223+
transition: none;
177224
cursor: pointer;
178225
}
179226

227+
body.popup-interactive #search-wrapper .arrow {
228+
transition: all 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
229+
}
230+
180231
#search-wrapper .arrow::after {
181232
content: "";
182233
display: inline-block;
@@ -237,6 +288,10 @@
237288
background-color: transparent;
238289
}
239290

291+
#bookmarks {
292+
min-height: 420px;
293+
}
294+
240295
#searchInput {
241296
width: 100%;
242297
padding: 10px 12px;
@@ -259,7 +314,6 @@
259314
body {
260315
background-color: #2a2a2a;
261316
color: #f1f1f1;
262-
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
263317
}
264318

265319
#notification-container {
@@ -369,7 +423,10 @@
369423
}
370424
</style>
371425
</head>
372-
<body>
426+
<body
427+
class="popup-loading"
428+
style="width: 408px; min-width: 408px; max-width: 408px; height: 520px; min-height: 520px; max-height: 520px;"
429+
>
373430
<div class="settings-wrapper">
374431
<button class="settings-btn" id="settingsBtn" title="">⚙️</button>
375432
</div>
@@ -384,7 +441,22 @@
384441
<i class="arrow"></i>
385442
</div>
386443
</div>
387-
<div id="bookmarks"></div>
444+
<div id="bookmarks">
445+
<div class="loading-state" data-loading="true" aria-label="Loading bookmarks">
446+
<div class="loading-title"></div>
447+
<div class="loading-grid">
448+
<div class="loading-card"></div>
449+
<div class="loading-card"></div>
450+
<div class="loading-card"></div>
451+
<div class="loading-card"></div>
452+
<div class="loading-card"></div>
453+
<div class="loading-card"></div>
454+
<div class="loading-card"></div>
455+
<div class="loading-card"></div>
456+
<div class="loading-card"></div>
457+
</div>
458+
</div>
459+
</div>
388460
<script type="module" src="popup.js"></script>
389461
</body>
390462
</html>

0 commit comments

Comments
 (0)