1864719 - Use moz-five-star in the Heartbeat notification UI

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Hanna Jones [:hjones]]

Attachment: Screenshot 2023-11-14 at 2.04.46 PM.png

We have a "Heartbeat" notification that seems to be used in surveys to solicit feedback from users. It can contain a five star rating element that looks very similar to the moz-five-star reusable component (see attachment). Ideally we would use moz-five-star here in order to consolidate our star rating implementations.

The current code for the star rating can be found here: https://searchfox.org/mozilla-central/rev/d6576544301cacc0e393fbc919c53e4e6b0d46ec/toolkit/components/normandy/lib/Heartbeat.sys.mjs#170-202

To trigger a Heartbeat notification locally you can:

1. Navigate to http://example.com/
2. Open up the browser toolbox
3. Run the following snippet:

const { Heartbeat } = ChromeUtils.importESModule(
  "resource://normandy/lib/Heartbeat.sys.mjs"
);
new Heartbeat(window, {
    testing: true,
    flowId: "test",
    message: "This is a test message!",
    engagementButtonLabel: undefined,
    learnMoreMessage: "Learn More",
    learnMoreUrl: "https://example.org/learnmore",
});

Comment 1

[Mark Kennedy [:mark]]

From internal convos, it sounds like this code is a part of Normandy, which appears to be getting decommissioned. So we may not need to do this one. I've reached out to the team responsible for Normandy and we'll await their response before moving forward.

Comment 2

[Mark Kennedy [:mark]]

A team member has notified us that the Heartbeat code will still be around after the Normandy decommission, so this work appears to still be necessary.

Comment 3

[Mark Kennedy [:mark]]

Note: instructions given to us from the team to trigger the heartbeat in a local build of Firefox:

1. Install Nimbus devtools
2. Feature Configuration Enrollment
3. select "legacyHeartbeat" from the dropdown
4. Paste this json:

{
 "survey": {
   "surveyId": "a survey",
   "message": "test message",
   "engagementButtonLabel": "",
   "thanksMessage": "thanks!",
   "postAnswerUrl": "https://example.com",
   "learnMoreMessage": "Learn More",
   "learnMoreUrl": "https://example.com",
   "repeatOption": "nag"
 }
}

5. click 'Enroll'
6. set app.normandy.run_interval_seconds to 30
7. restart the browser
8. You should see a heartbeat within a few minutes

Comment 4

[Mark Striemer [:mstriemer]]

The smallest change for moz-five-star may be to do something like allowing it to have an interactive property which shows the hover styling with something like:

:host([interactive]) .rating-star:has(~ .rating-star:hover), :host([interactive]) .rating-star:hover {
  /* Match the full star styling */
}

We may want to set some attribute on the star DOM elements so that the heartbeat code can easily tell what star was clicked

<span class="rating-star" fill="full" rating="3"></span>

Comment 5

[Mark Kennedy [:mark]]

Attachment: Bug 1864719 - Update moz-five-star component r=#recomp-reviewers

• Make star selectable with an attribute

• Add hover and select state styles

• Use present tense of "Rate" action on hover when selectable
  vs "Rated"

• Add story

• Add tests

Comment 6

[Mark Kennedy [:mark]]

Attachment: Bug 1864719 - Use moz-five-star component r=#recomp-reviewers

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7f8bcbd2be85
Update moz-five-star component r=reusable-components-reviewers,fluent-reviewers,desktop-theme-reviewers,mstriemer,hjones,flod
https://hg.mozilla.org/integration/autoland/rev/293b907b88dd
Use moz-five-star component r=reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 8

[Iulian Moraru]

Backed out for causing multiple bc test failures complaining about Missing message in locale en-US.

• Push with failures

• Failure log
  To check all the failing tests with this issue, please visit this link

• Backout link

[task 2024-12-06T22:55:46.805Z] 22:55:46     INFO - TEST-PASS | browser/components/sidebar/tests/browser/browser_glean_sidebar.js | One event was reported. - 1 == 1 - 
[task 2024-12-06T22:55:46.805Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.806Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.806Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.807Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.807Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.808Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.808Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.808Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.809Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.809Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.810Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[dom/l10n] Errors during l10n mutation frame." {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.810Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.811Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.811Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.812Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.812Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Missing message in locale en-US: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.812Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.813Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.813Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.814Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.814Z] 22:55:46     INFO - Console message: [JavaScript Warning: "[fluent] Couldn't find a message: " {file: "about:addons" line: 0}]
[task 2024-12-06T22:55:46.815Z] 22:55:46     INFO - Console message: [JavaScript Error: "InvalidStateError: [fluent] Missing message in locale en-US: "]
[task 2024-12-06T22:55:46.815Z] 22:55:46     INFO - Buffered messages finished
[task 2024-12-06T22:55:46.816Z] 22:55:46     INFO - TEST-UNEXPECTED-FAIL | browser/components/sidebar/tests/browser/browser_glean_sidebar.js | A promise chain failed to handle a rejection: [fluent] Missing message in locale en-US:  - stack: (No stack available.)
[task 2024-12-06T22:55:46.816Z] 22:55:46     INFO - Rejection date: Fri Dec 06 2024 22:55:46 GMT+0000 (Coordinated Universal Time) - false == true - 
[task 2024-12-06T22:55:46.816Z] 22:55:46     INFO - Stack trace:
[task 2024-12-06T22:55:46.817Z] 22:55:46     INFO - resource://testing-common/PromiseTestUtils.sys.mjs:assertNoUncaughtRejections:266
[task 2024-12-06T22:55:46.817Z] 22:55:46     INFO - chrome://mochikit/content/browser-test.js:handleTask:1175
[task 2024-12-06T22:55:46.817Z] 22:55:46     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1219
[task 2024-12-06T22:55:46.818Z] 22:55:46     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1360
[task 2024-12-06T22:55:46.818Z] 22:55:46     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1136
[task 2024-12-06T22:55:46.819Z] 22:55:46     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-12-06T22:55:46.820Z] 22:55:46     INFO - Leaving test bound test_customize_extensions_clicked
[task 2024-12-06T22:55:46.820Z] 22:55:46     INFO - Entering test bound test_customize_sidebar_display
[task 2024-12-06T22:55:46.820Z] 22:55:46     INFO - GECKO(6829) | [Parent 6829, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:182
[task 2024-12-06T22:55:46.821Z] 22:55:46     INFO - GECKO(6829) | [Parent 6829, Main Thread] WARNING: 'NS_FAILED(rv)', file /builds/worker/checkouts/gecko/chrome/nsChromeProtocolHandler.cpp:73
[task 2024-12-06T22:55:46.821Z] 22:55:46     INFO - Console message: Invalid chrome URI (need path): chrome://browser/
[task 2024-12-06T22:55:46.822Z] 22:55:46     INFO - GECKO(6829) | [Parent 6829: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 121 (7f03aa3c8800) [pid = 6829] [serial = 186] [outer = 7f03e4b85c00]
[task 2024-12-06T22:55:46.823Z] 22:55:46     INFO - GECKO(6829) | [Parent 6829, Main Thread] WARNING: Failed to retarget HTML data delivery to the parser thread.: file /builds/worker/checkouts/gecko/parser/html/nsHtml5StreamParser.cpp:1215
[task 2024-12-06T22:55:46.824Z] 22:55:46     INFO - Console message: [JavaScript Warning: "Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content." {file: "chrome://browser/content/sidebar/sidebar-customize.html" line: 0}]
[task 2024-12-06T22:55:46.908Z] 22:55:46     INFO - Toggle the setting for visibilityInputs.
[task 2024-12-06T22:55:46.935Z] 22:55:46     INFO - TEST-PASS | browser/components/sidebar/tests/browser/browser_glean_sidebar.js | One event was reported. - 1 == 1 - 

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/99174e3b1f8f
Update moz-five-star component r=reusable-components-reviewers,fluent-reviewers,desktop-theme-reviewers,mstriemer,hjones,flod
https://hg.mozilla.org/integration/autoland/rev/163e453cb2f2
Use moz-five-star component r=reusable-components-reviewers,desktop-theme-reviewers,mstriemer,hjones

Comment 10

[Mark Kennedy [:mark]]

Updated the patch and fixed the failure. Thank you!

Comment 11

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/99174e3b1f8f
https://hg.mozilla.org/mozilla-central/rev/163e453cb2f2