Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MPP-3688, MPP-3689 and MPP-3690: Phones panel, dashboard switching, and stats #553

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

MPP-3688, MPP-3689 and MPP-3690: Phones panel, dashboard switching, and stats #553

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1b1bf21
initial blocking out of add-on phone mask feature
lloan Jan 30, 2024
7ec4064
Emails and phones dashboard switching
rafeerahman Jan 18, 2024
f47d27b
Added stats button, logic to handle tab switch, and refactored
rafeerahman Jan 23, 2024
7628b06
Accessibility requirements
rafeerahman Jan 30, 2024
00be00c
Cleaned dashboard switching code, merged MPP-3688 and MPP-3689
rafeerahman Jan 30, 2024
429934d
connect with backend
lloan Feb 5, 2024
e1c6221
Made dashboard switching strings into locales strings
rafeerahman Feb 5, 2024
830b74a
update strings based on feedback
lloan Feb 6, 2024
170a28b
Merge branch 'MPP-3688-MPP-3689-merged' of github.com:mozilla/fx-priv…
lloan Feb 6, 2024
9a03566
remove unused function parameter
lloan Feb 6, 2024
5d2eff2
User logic to handle phone activation in stats
rafeerahman Feb 5, 2024
cc8836a
Prevent overflow in tabs
rafeerahman Feb 6, 2024
d20d7a1
CSS tokens and parameter type update
rafeerahman Feb 8, 2024
22c26aa
Remove stats footer on phone upgrade state
rafeerahman Feb 8, 2024
66af275
implement changes from feedback
lloan Feb 9, 2024
695397e
fix condition mistake used for testing
lloan Feb 9, 2024
ecd28f8
Make CSAT banner show in all panels, above tabs
rafeerahman Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/css/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@
font-family: var(--fontStackBase);
gap: var(--spacingSm);
padding: 4px 16px;
border: 2px solid transparent;
}

.fx-relay-menu-dashboard-link.footer:hover,
Expand Down
32 changes: 20 additions & 12 deletions src/js/popup/popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@
events: {
backClick: (e) => {
e.preventDefault();
let backTarget = e.target.dataset.backTarget;
const backNavLevel = e.target.dataset.navLevel;
const target = e.currentTarget;

let backTarget = target.dataset.backTarget;
const backNavLevel = target.dataset.navLevel;
let data;
if (backNavLevel === "root") {
document.querySelector(".js-internal-link.is-active")?.classList.remove("is-active");
Expand All @@ -30,13 +32,13 @@
}

// Custom rule to send "Closed Report Issue" event
if (e.target.dataset.navId && e.target.dataset.navId === "webcompat") {
if (target.dataset.navId && target.dataset.navId === "webcompat") {
sendRelayEvent("Panel", "click", "closed-report-issue");
}

// Custom rule to fix Firefox bug where popup does not
// resize from larger sized panels to smaller sized panels
if (e.target.dataset.navId && e.target.dataset.navId === "custom") {
if (target.dataset.navId && target.dataset.navId === "custom") {
const maskPanel = document.querySelector("masks-panel");
maskPanel.classList.add("custom-return");

Expand Down Expand Up @@ -75,10 +77,10 @@
document
.querySelector(".js-internal-link.is-active")
?.classList.remove("is-active");
e.target.classList.add("is-active");
const panelId = e.target.dataset.panelId;
e.currentTarget.classList.add("is-active");
const panelId = e.currentTarget.dataset.panelId;
popup.panel.update(panelId);
e.target.blur();
e.currentTarget.blur();
},
generateMask: async (event, type = "random", data = null) => {

Expand Down Expand Up @@ -178,6 +180,7 @@

// Set Navigation Listeners
const navigationButtons = document.querySelectorAll(".js-internal-link");

navigationButtons.forEach((button) => {
button.addEventListener("click", popup.events.navigationClick, false);
});
Expand Down Expand Up @@ -230,7 +233,8 @@

// Set independent stats tab
const activeTab = panelId === "stats" ? sessionState.primaryPanel : panelId;
const initializeStats = sessionState.currentPanel === "stats" && (panelId === "phone-masks" || panelId === "masks") && !data?.backTarget;
const initializeStats = sessionState.currentPanel === "stats" && (panelId === "phone-masks" || panelId === "masks") && !data?.backTarget;

if (panelId === "stats" || initializeStats) {
document.querySelector(".fx-relay-primary-dashboard-switcher")?.classList.remove("is-hidden")
document.querySelector(".js-internal-link.is-active")?.classList.remove("is-active");
Expand Down Expand Up @@ -1209,7 +1213,6 @@
},
stats: {
init: async () => {
console.log(sessionState.primaryPanel)
// TODO: If phones, show phone stats
if (sessionState.primaryPanel === "phone-masks") {
// Build phone stats here.
Expand Down Expand Up @@ -1769,21 +1772,26 @@
},
buildBackButton: (navId, navLevel, backTarget) => {
let button = document.createElement("button");
let goBackText = document.createElement("span");
let img = document.createElement("img");

button.setAttribute("data-nav-id", navId);
button.setAttribute("data-nav-level", navLevel);
button.setAttribute("data-back-target", backTarget);
button.className = "fx-relay-menu-dashboard-link footer js-internal-link fx-relay-panel-header-btn-back";

let img = document.createElement("img");
goBackText.className = "i18n-content";
goBackText.setAttribute("data-i18n-message-id", "goBackText");
goBackText.textContent = browser.i18n.getMessage("goBackText");

img.className = "i18n-alt-tag";
img.setAttribute("data-i18n-message-id", "returnToPreviousPanel");
img.src = "/icons/nebula-back-arrow.svg";
img.alt = "";

button.appendChild(img);
button.appendChild(document.createTextNode("Go back"));

button.appendChild(goBackText);
button.addEventListener("click", popup.events.backClick, false);

let footer = document.querySelector(".fx-relay-footer-nav");
Expand Down
10 changes: 4 additions & 6 deletions src/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,11 @@ <h1 class="fx-relay-menu-logo">
<primary-dashboard-switcher class="fx-relay-primary-dashboard-switcher">
<!-- Emails -->
<button data-panel-id="masks" data-back-target="masks" class="fx-relay-primary-dashboard-switcher-btn masks js-internal-link is-active" aria-selected="true" aria-controls="masks" role="tab">
Emails
<span class="i18n-content" data-i18n-message-id="emailsTabText"></span>
</button>
<!-- Phones -->
<button data-panel-id="phone-masks" data-back-target="phone-masks" class="fx-relay-primary-dashboard-switcher-btn phone-masks js-internal-link" role="tab">
<!-- TODO: Add to messages.json -->
Phones
<span class="i18n-content" data-i18n-message-id="phonesTabText"></span>
</button>
</primary-dashboard-switcher>

Expand Down Expand Up @@ -488,9 +487,8 @@ <h2 class="fx-relay-panel-header-title i18n-content" data-i18n-message-id="popup

<footer class="fx-relay-footer-nav">
<!-- Stats -->
<button data-panel-id="stats" class="fx-relay-menu-dashboard-link footer stats js-internal-link is-hidden" href="#">
See stats
<!-- <span class="fx-relay-menu-dashboard-link-tooltip i18n-content" data-i18n-message-id="popupStatsTitle"></span> -->
<button data-panel-id="stats" class="fx-relay-menu-dashboard-link footer stats js-internal-link">
<span class="i18n-content" data-i18n-message-id="seeStatsText"></span>
<img src="/icons/nebula-stats-purple.svg" alt="" />
</button>
</footer>
Expand Down