Page MenuHomePhabricator

[chrome-ext] Implement basic terms-of-service popup for browser extension
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
Jdrewniak
Oct 24 2024, 3:42 PM
Referenced Files
F57701932: screenshot 5.mov.gif
Nov 14 2024, 6:57 PM
F57701930: screenshot 4.mov.gif
Nov 14 2024, 6:57 PM
F57696833: screenshot 2.mov.gif
Nov 14 2024, 6:57 PM
F57696829: screenshot 26.png
Nov 14 2024, 6:57 PM
F57624413: image.png
Nov 1 2024, 7:27 PM
F57624390: image.png
Nov 1 2024, 7:26 PM
F57624392: image.png
Nov 1 2024, 7:25 PM
F57624387: image.png
Oct 24 2024, 3:42 PM

Description

Background

In T377757 we defined a specification for how a terms-of-service Popup in the experimental browser extension should look and behave. The goal of this task is to implement the *basic version* of this Popup that only appears when clicking the extension icon.

User story

As a user of the experimental browser extension, I want to be made aware of the experiment that is currently running, and I want to explicitly opt-in to the experiment.

Requirements

  • Build a Popup window using Codex components with "agree" and "disagree" buttons that enable users to accept the terms-of-service.
  • This popup should be marked as the "default_popup" in manifest.json, making it appear when someone clicks to extension icon.
  • Maintain the terms of service state in the browser extension. This can be done using the Chrome.storage() API (similar to localstorage, but for extensions).
  • The Popup should render different content based on whether or not someone agrees or disagrees with the terms-of-service. The popup should be rendered entirely via JS to switch between default and success/failure states.

BDD

Feature: Terms-of-service popup for browser extension

  Scenario: Display default popup when extension icon is clicked
    Given the browser extension is installed
    And the user clicks the extension icon
    Then the terms-of-service popup should appear in the default state with "agree" and "disagree" buttons

  Scenario: User agrees to terms-of-service
    Given the terms-of-service popup is displayed
    When the user clicks "agree"
    Then the popup changes to a "success" state displaying the current experiment

  Scenario: User disagrees with terms-of-service
    Given the terms-of-service popup is displayed
    When the user clicks "disagree"
    Then the popup changes to a "fail" state indicating they cannot participate in experiments

  Scenario: User dismisses popup without selection
    Given the terms-of-service popup is displayed
    When the user dismisses the popup without choosing "agree" or "disagree"
    Then the popup disappears
    And the default popup should reappear upon clicking the extension icon again

Test Steps

Test Case 1: Display Default Popup

  1. Install the browser extension.
  2. Click the extension icon.
  3. AC1: Confirm that a popup appears with “agree” and “disagree” buttons in the default state.

Test Case 2: User Agrees to Terms-of-Service

  1. Ensure the terms-of-service popup is open in the default state.
  2. Click “agree”.
  3. AC2: Verify the popup changes to a “success” state, displaying information about the current experiment.
  4. Confirm that Chrome.storage() is updated to record the agreement.

Test Case 3: User Disagrees to Terms-of-Service

  1. Ensure the terms-of-service popup is open in the default state.
  2. Click “disagree”.
  3. AC3: Confirm the popup changes to a “fail” state, informing the user they cannot participate in experiments.

Test Case 4: Dismiss Popup Without Selection

  1. Open the terms-of-service popup.
  2. Dismiss the popup without selecting “agree” or “disagree”.
  3. AC4: Verify the popup closes.
  4. Click the extension icon again.
  5. AC5: Confirm the popup reappears in the default state.

Design

image.png (1×6 px, 556 KB)
Default state
image.png (1×6 px, 492 KB)
Success state
image.png (1×6 px, 664 KB)
Failure state

Acceptance criteria

  • After installing the browser extension, when clicking on the extension icon, a popup should appear asking users to opt-in to the extension experiments. This is the "default" popup state.
  • If the user clicks "agree", the popup should change to a "success" state where it lists the current experiment.
  • If the user clicks "disagree", the popup should change to a "fail" state where users are told they cannot participate in experiments unless they agree to the ToC.
  • If a user dismisses the Popup with no selected option, the popup dissapears. If they click it again, they are shown the "default" state.
  • No experiments should run unless the the user agrees to the terms-of-service.

QA Results - Prod

This task was created by Version 1.2.0 of the Web team task template using phabulous

Event Timeline

Jdrewniak updated the task description. (Show Details)
Jdrewniak updated the task description. (Show Details)
Jdrewniak attached a referenced file: F57624392: image.png. (Show Details)
Jdrewniak attached a referenced file: F57624413: image.png. (Show Details)
Jdrewniak attached a referenced file: F57624390: image.png. (Show Details)
Jdrewniak renamed this task from Implement basic terms-of-service popup for browser extension to [chrome-ext] Implement basic terms-of-service popup for browser extension.Nov 5 2024, 4:52 PM
Edtadros subscribed.
This comment was removed by Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki (Wikipedia Article Recommender version 1.0.5)
OS: macOS
Browser: Chrome
Device: MS MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Display Default Popup

  1. Install the browser extension.
  2. Click the extension icon.
  3. ✅ AC1: Confirm that a popup appears with “agree” and “disagree” buttons in the default state.

screenshot 26.png (368×1 px, 107 KB)

Test Case 2: User Agrees to Terms-of-Service

  1. Ensure the terms-of-service popup is open in the default state.
  2. Click “agree”.
  3. ✅ AC2: Verify the popup changes to a “success” state, displaying information about the current experiment.

screenshot 2.mov.gif (922×1 px, 620 KB)

Test Case 3: User Disagrees to Terms-of-Service

  1. Ensure the terms-of-service popup is open in the default state.
  2. Click “disagree”.
  3. ✅ AC3: Confirm the popup changes to a “fail” state, informing the user they cannot participate in experiments.

screenshot 4.mov.gif (784×1 px, 510 KB)

Test Case 4: Dismiss Popup Without Selection

  1. Open the terms-of-service popup.
  2. Dismiss the popup without selecting “agree” or “disagree”.
  3. ✅ AC4: Verify the popup closes.

screenshot 5.mov.gif (784×1 px, 631 KB)

  1. Click the extension icon again.
  2. ✅ AC5: Confirm the popup reappears in the default state.

See AC4.