Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1840178 - render shopping settings card. r=shopping-reviewers,fluent-reviewers,flod,niklas

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D182205
This commit is contained in:
Katherine Patenio 2023-07-07 16:30:06 +00:00
parent 8259e0e3d5
commit 647b8626b9
7 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
browser/components/shopping/content/settings.css Normal file
View File

@ -0,0 +1,16 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@import url("chrome://global/skin/in-content/common.css");
#shopping-settings-wrapper {
display: grid;
grid-template-rows: auto auto auto;
row-gap: 1em;
}
#shopping-settings-opt-out-button {
display: flex;
justify-self: center;
}

61
browser/components/shopping/content/settings.mjs Normal file
View File

@ -0,0 +1,61 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html } from "chrome://global/content/vendor/lit.all.mjs";
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://global/content/elements/moz-toggle.mjs";
class ShoppingSettings extends MozLitElement {
#isRecommendationsEnabled;
static get queries() {
return {
recommendationsToggleEl: "#shopping-settings-recommendations-toggle",
optOutButtonEl: "#shopping-settings-opt-out-button",
};
}
onToggleRecommendations() {
// TODO: we will need to hide the recommendations card here
this.#isRecommendationsEnabled = this.recommendationsToggleEl.pressed;
}
onDisableShopping(e) {
// TODO: we will need to opt out the user here via a pref
}
render() {
// TODO: for now, we will hardcode the value until a pref is made.
this.#isRecommendationsEnabled = true;
return html`
<link
rel="stylesheet"
href="chrome://browser/content/shopping/settings.css"
/>
<shopping-card
data-l10n-id="shopping-settings-label"
data-l10n-attrs="label"
type="accordion"
>
<div id="shopping-settings-wrapper" slot="content">
<moz-toggle id="shopping-settings-recommendations-toggle" pressed=${
this.#isRecommendationsEnabled
} data-l10n-id="shopping-settings-recommendations-toggle" data-l10n-attrs="label" @toggle=${
this.onToggleRecommendations
}></moz-toggle/>
<button id="shopping-settings-opt-out-button" data-l10n-id="shopping-settings-opt-out-button" @click=${
this.onDisableShopping
}></button>
</div>
</shopping-card>
`;
}
}
customElements.define("shopping-settings", ShoppingSettings);

8
browser/components/shopping/content/shopping.ftl
View File

@ -19,4 +19,12 @@ shopping-highlight-shipping = Shipping
shopping-highlight-competitiveness = Competitiveness
shopping-highlight-packaging = Packaging
## Strings for the settings card
shopping-settings-label =
.label = Settings
shopping-settings-recommendations-toggle =
.label = Show products recommended by { -brand-product-name }
shopping-settings-opt-out-button = Turn off review quality check
##

5
browser/components/shopping/content/shopping.html
View File

@ -27,11 +27,16 @@
type="module"
src="chrome://browser/content/shopping/highlights.mjs"
></script>
<script
type="module"
src="chrome://browser/content/shopping/settings.mjs"
></script>
<title data-l10n-id="shopping-page-title"></title>
</head>
<body>
<div id="content">
<review-highlights hidden></review-highlights>
<shopping-settings></shopping-settings>
</div>
</body>
</html>

2
browser/components/shopping/jar.mn
View File

@ -13,3 +13,5 @@ browser.jar:
content/browser/shopping/highlight-item.mjs (content/highlight-item.mjs)
content/browser/shopping/shopping-card.css (content/shopping-card.css)
content/browser/shopping/shopping-card.mjs (content/shopping-card.mjs)
content/browser/shopping/settings.mjs (content/settings.mjs)
content/browser/shopping/settings.css (content/settings.css)

1
browser/components/shopping/tests/browser/browser.ini
View File

@ -3,3 +3,4 @@
head.js
[browser_review_highlights.js]
[browser_shopping_settings.js]

28
browser/components/shopping/tests/browser/browser_shopping_settings.js Normal file
View File

@ -0,0 +1,28 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Tests that the settings component is rendered as expected.
*/
add_task(async function test_shopping_settings() {
await BrowserTestUtils.withNewTab(
{
url: "chrome://browser/content/shopping/shopping.html",
gBrowser,
},
async browser => {
const { document } = browser.contentWindow;
let shoppingSettings = document.querySelector("shopping-settings");
ok(shoppingSettings, "shopping-settings should be visible");
let toggle = shoppingSettings.recommendationsToggleEl;
ok(toggle, "There should be a toggle");
let optOutButton = shoppingSettings.optOutButtonEl;
ok(optOutButton, "There should be an opt-out button");
}
);
});