Skip to content

Commit

Permalink
toggle-report styling (#189)
Browse files Browse the repository at this point in the history 
* toggle-report styling

* bullet color

* bullet color

* failing test

* dont reconnect on thank-you screen

* built file

* fixed effect

* custom scrollbar

* updated build

* screenshot

---------

Co-authored-by: Shane Osbourne <[email protected]>
  • Loading branch information
@shakyShane
shakyShane and Shane Osbourne authored Oct 14, 2024
1 parent 739c577 commit 15c0dfe
Show file tree
Hide file tree
Showing 16 changed files with 298 additions and 120 deletions.
110 changes: 74 additions & 36 deletions build/app/public/css/popup.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@charset "UTF-8";
/* Status icons */
/* Colors */
/* Dark theme */
Expand Down Expand Up @@ -3797,31 +3798,48 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
text-align: center;
}

.button[data-variant=macos-standard] {
color: var(--Text-Primary, rgba(0, 0, 0, 0.84));
text-align: center;
.button[data-size=small] {
line-height: 13px;
height: 20px;
padding: 0px 12px;
border-radius: 5px;
border: 0.5px solid rgba(0, 0, 0, 0.1);
background: #fff;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05);
}
.button[data-variant=macos-standard]:active {
border: 0.5px solid rgba(0, 0, 0, 0.1);
background: #e7e7e7;
/* Mac/Button */
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05);
.button[data-size=big] {
height: 50px;
padding: 0px 24px;
/* Button */
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
}
.body--theme-dark .button[data-variant=macos-standard] {
color: rgba(255, 255, 255, 0.84);
border: 0.5px solid rgba(0, 0, 0, 0);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
.button[data-size=desktop-large] {
height: 29px;
padding: 0px 12px;
}
.button[data-variant=desktop-vibrancy] {
border-radius: 6px;
background: rgba(0, 0, 0, 0.1);
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0), 0px 0px 1px 0px rgba(0, 0, 0, 0), 0px 1px 1px 0px rgba(0, 0, 0, 0);
}
.button[data-variant=desktop-vibrancy]:active {
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0), 0px 0px 1px 0px rgba(0, 0, 0, 0), 0px 1px 1px 0px rgba(0, 0, 0, 0);
}
.body--theme-dark .button[data-variant=desktop-vibrancy] {
border-radius: 6px;
background: rgba(255, 255, 255, 0.28);
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.body--theme-dark .button[data-variant=macos-standard]:active {
border: 0.5px solid rgba(0, 0, 0, 0);
.body--theme-dark .button[data-variant=desktop-vibrancy]:active {
border-radius: 6px;
background: rgba(255, 255, 255, 0.35);
/* Mac/Button (Dark) */
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.button[data-variant=ios-secondary] {
justify-content: center;
Expand All @@ -3838,21 +3856,6 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
background: rgba(57, 105, 239, 0.2);
color: var(--color-accent-blue-active);
}
.button[data-size=small] {
line-height: 13px;
height: 20px;
padding: 0px 12px;
border-radius: 5px;
}
.button[data-size=big] {
height: 50px;
padding: 0px 24px;
/* Button */
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
}

.button-bar[data-layout=horizontal] {
display: grid;
Expand Down Expand Up @@ -3899,18 +3902,30 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
}

.data-list {
padding-left: 18px;
list-style: none;
}

.data-list__item {
word-wrap: anywhere;
color: var(--color-text-secondary);
line-height: 18px;
position: relative;
padding-left: 20px;
}
.data-list__item + .data-list__item {
margin-top: 3px;
}

.data-list__item::before {
content: "•";
font-size: 12px;
position: absolute;
left: 8px;
top: 8px;
transform: translateY(-50%);
color: currentColor;
}

.ios-separator {
padding-top: 16px;
border-top: 1px solid var(--color-system-lines);
Expand Down Expand Up @@ -3948,3 +3963,26 @@ body.environment--macos, body.environment--browser, body.environment--windows, b
opacity: 1;
visibility: visible;
}

.toggle-report__heading {
margin-bottom: 24px;
}

.toggle-report__scroller {
margin-bottom: 16px;
}
.toggle-report__scroller .scrollable::-webkit-scrollbar {
width: 10px;
}
.toggle-report__scroller .scrollable::-webkit-scrollbar-track {
border-radius: 6px;
}
.toggle-report__scroller .scrollable::-webkit-scrollbar-thumb {
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 6px;
}
.body--theme-dark .toggle-report__scroller .scrollable::-webkit-scrollbar-thumb {
border: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.3);
}
47 changes: 32 additions & 15 deletions build/app/public/js/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15136,16 +15136,33 @@
return state;
}
function useConnectionCount() {
const [state, setCount] = h2(() => dc.lastValue().connection);
const [count, setCount] = h2(() => dc.lastValue().connection);
p2(() => {
const controller = new AbortController();
dc.addEventListener("data", (evt) => {
setCount(evt.detail.connection);
});
return controller.abort;
dc.addEventListener(
"data",
(evt) => {
setCount(evt.detail.connection);
},
{ signal: controller.signal }
);
window.addEventListener(
useConnectionCount.PAUSE_EVENT,
() => {
controller.abort();
},
{ signal: controller.signal }
);
return () => {
controller.abort();
};
}, []);
return state;
return { count };
}
useConnectionCount.PAUSE_EVENT = "ignore-reconnections";
useConnectionCount.pause = () => {
window.dispatchEvent(new Event(useConnectionCount.PAUSE_EVENT));
};
function useData() {
const [state, setState] = h2(() => dc.lastValue());
p2(() => {
Expand Down Expand Up @@ -16938,6 +16955,7 @@
});
}, [model]);
function send() {
useConnectionCount.pause();
model.fetch(new SendToggleBreakageReport());
}
function reject() {
Expand Down Expand Up @@ -16970,8 +16988,8 @@
}

// shared/js/ui/components/button.jsx
function Button({ children, btnSize, variant = "macos-standard", ...rest }) {
return /* @__PURE__ */ y("button", { type: "button", className: "button", ...rest, "data-variant": variant, "data-size": btnSize }, children);
function Button({ children, btnSize, variant = "desktop-vibrancy", ...rest }) {
return /* @__PURE__ */ y("button", { type: "button", className: "button token-body", ...rest, "data-variant": variant, "data-size": btnSize }, children);
}
function ButtonBar({ children, layout = "horizontal", ...rest }) {
return /* @__PURE__ */ y("div", { className: "button-bar", "data-layout": layout, ...rest }, children);
Expand Down Expand Up @@ -17192,7 +17210,6 @@

// shared/js/ui/components/toggle-report.jsx
function ToggleReport() {
const innerGap = platform.name === "ios" ? "24px" : "16px";
const desktop = platform.name === "macos" || platform.name === "windows";
const extension = platform.name === "browser";
const { value, didClickSuccessScreen } = q2(ToggleReportContext);
Expand All @@ -17202,10 +17219,10 @@
return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, extension && /* @__PURE__ */ y(SetAutoHeight, null), /* @__PURE__ */ y(ToggleReportSent, { onClick: didClickSuccessScreen }));
}
if (desktop || extension) {
return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, extension && /* @__PURE__ */ y(SetAutoHeight, null), /* @__PURE__ */ y(Stack, { gap: "40px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y(Stack, { gap: innerGap }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")), /* @__PURE__ */ y(DesktopRevealText, { state, toggle: () => dispatch("toggle") }))), state.value === "showing" && /* @__PURE__ */ y(Scrollable, null, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data })), /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") }))));
return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, extension && /* @__PURE__ */ y(SetAutoHeight, null), /* @__PURE__ */ y("div", { className: "toggle-report__heading" }, /* @__PURE__ */ y(Stack, { gap: "16px" }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")), /* @__PURE__ */ y(DesktopRevealText, { state, toggle: () => dispatch("toggle") })))), state.value === "showing" && /* @__PURE__ */ y("div", { className: "toggle-report__scroller" }, /* @__PURE__ */ y(Scrollable, null, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data }))), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") })));
}
if (platform.name === "ios") {
return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, /* @__PURE__ */ y(Stack, { gap: "40px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y(Stack, { gap: innerGap }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")))), /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") }), state.value !== "showing" && /* @__PURE__ */ y(RevealText, { toggle: () => dispatch("toggle-ios") })), state.value === "showing" && /* @__PURE__ */ y("div", { className: "ios-separator" }, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data }))));
return /* @__PURE__ */ y(ToggleReportWrapper, { state: state.value }, /* @__PURE__ */ y(Stack, { gap: "40px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y(Stack, { gap: "24px" }, /* @__PURE__ */ y("div", { className: "medium-icon-container hero-icon--toggle-report" }), /* @__PURE__ */ y(ToggleReportTitle, null, ns.toggleReport("siteNotWorkingTitle.title")), /* @__PURE__ */ y("div", null, /* @__PURE__ */ y("h2", { className: "token-title-3 text--center" }, ns.toggleReport("siteNotWorkingSubTitle.title")))), /* @__PURE__ */ y(ToggleReportButtons, { send: () => dispatch("send"), reject: () => dispatch("reject") }), state.value !== "showing" && /* @__PURE__ */ y(RevealText, { toggle: () => dispatch("toggle-ios") })), state.value === "showing" && /* @__PURE__ */ y("div", { className: "ios-separator" }, /* @__PURE__ */ y(ToggleReportDataList, { rows: value.data }))));
}
return /* @__PURE__ */ y("p", null, "unsupported platform: ", platform.name);
}
Expand All @@ -17232,9 +17249,9 @@
return null;
}
function ToggleReportButtons({ send, reject }) {
const buttonVariant = platform.name === "ios" ? "ios-secondary" : "macos-standard";
const buttonVariant = platform.name === "ios" ? "ios-secondary" : "desktop-vibrancy";
const buttonLayout = platform.name === "ios" ? "vertical" : "horizontal";
const buttonSize = platform.name === "ios" ? "big" : "small";
const buttonSize = platform.name === "ios" ? "big" : "desktop-large";
return /* @__PURE__ */ y(ButtonBar, { layout: buttonLayout }, /* @__PURE__ */ y(Button, { variant: buttonVariant, btnSize: buttonSize, onClick: reject }, ns.toggleReport("dontSendReport.title")), /* @__PURE__ */ y(Button, { variant: buttonVariant, btnSize: buttonSize, onClick: send }, ns.report("sendReport.title")));
}
function RevealText({ toggle }) {
Expand All @@ -17249,8 +17266,8 @@
const fetcher = useFetcher();
const features = useFeatures();
const onClose = useClose();
const connectionCount = useConnectionCount();
const connectionId = `connection-${connectionCount}`;
const { count } = useConnectionCount();
const connectionId = `connection-${count}`;
p2(() => {
document.body.dataset.screen = "toggleReport";
return () => {
Expand Down
18 changes: 18 additions & 0 deletions integration-tests/Extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,22 @@ export class Extension {
const callCountAfter = await this.dash.mocks.outgoing({ names: ['getToggleReportOptions'] })
expect(callCountAfter).toHaveLength(2)
}

/**
* This test verifies that once the 'thank you' screen is showing, any
* reconnecting will not trigger any data fetching or changes.
*/
async reconnectsOnThankyouScreen() {
const { page } = this.dash
const callCountBefore = await this.dash.mocks.outgoing({ names: ['getToggleReportOptions'] })

await page.evaluate(() => {
window.__playwright.onDisconnect?.()
})

await page.waitForTimeout(1000)

const callCountAfter = await this.dash.mocks.outgoing({ names: ['getToggleReportOptions'] })
expect(callCountAfter).toHaveLength(callCountBefore.length)
}
}
3 changes: 3 additions & 0 deletions integration-tests/browser.spec-int.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ test.describe('Protections toggle -> simple report screen', () => {
await dash.mocks.calledForToggleAllowList()
await dash.extension.triggersToggleReport()
await dash.extension.reconnects()

await dash.sendToggleReport()
await dash.extension.reconnectsOnThankyouScreen()
})
test('shows toggle report + rejects it', async ({ page }) => {
forwardConsole(page)
Expand Down
Binary file modified ...ration-tests/ios.spec-int.js-snapshots/screen-toggle-report-show-ios-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sts/macos.spec-int.js-snapshots/screen-toggle-report-dashboard-macos-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...on-tests/macos.spec-int.js-snapshots/screen-toggle-report-menu-macos-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...on-tests/macos.spec-int.js-snapshots/screen-toggle-report-show-macos-darwin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 43 additions & 34 deletions shared/js/ui/components/_button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,61 @@
.button {
&[data-variant='macos-standard'] {
color: var(--Text-Primary, rgba(0, 0, 0, 0.84));
text-align: center;
&[data-size='small'] {
line-height: 13px;
height: 20px;
padding: 0px 12px;
border-radius: 5px;
border: 0.5px solid rgba(0, 0, 0, 0.1);
background: #fff;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05);
}
&[data-size='big'] {
height: 50px;
padding: 0px 24px;
/* Button */
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
}

&[data-size='desktop-large'] {
height: 29px;
padding: 0px 12px;
}

&[data-variant='desktop-vibrancy'] {
border-radius: 6px;
background: rgba(0, 0, 0, 0.1);

/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0) inset,
0px 0px 0px 0.5px rgba(0, 0, 0, 0), 0px 0px 1px 0px rgba(0, 0, 0, 0), 0px 1px 1px 0px rgba(0, 0, 0, 0);

&:active {
border: 0.5px solid rgba(0, 0, 0, 0.1);
background: #e7e7e7;
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);

/* Mac/Button */
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05);
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0) inset,
0px 0px 0px 0.5px rgba(0, 0, 0, 0), 0px 0px 1px 0px rgba(0, 0, 0, 0), 0px 1px 1px 0px rgba(0, 0, 0, 0);
}

.body--theme-dark & {
color: rgba(255, 255, 255, 0.84);
border: 0.5px solid rgba(0, 0, 0, 0);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
border-radius: 6px;
background: rgba(255, 255, 255, 0.28);

/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset,
0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.2);

&:active {
border: 0.5px solid rgba(0, 0, 0, 0);
border-radius: 6px;
background: rgba(255, 255, 255, 0.35);

/* Mac/Button (Dark) */
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
/* Mac/Control/Vibrant */
box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset,
0px 0px 0px 0.5px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
}
}

&[data-variant='ios-secondary'] {
justify-content: center;
align-items: center;
Expand All @@ -48,21 +72,6 @@
color: var(--color-accent-blue-active);
}
}
&[data-size='small'] {
line-height: 13px;
height: 20px;
padding: 0px 12px;
border-radius: 5px;
}
&[data-size='big'] {
height: 50px;
padding: 0px 24px;
/* Button */
font-size: 15px;
font-style: normal;
font-weight: 600;
line-height: 20px; /* 133.333% */
}
}

.button-bar {
Expand Down
Loading

0 comments on commit 15c0dfe

Please sign in to comment.