feat: create Developer Options Setting Page #22382

digiwand · 2023-12-21T22:37:14Z

Description

The "Developer Options" setting page will provide developers with additional controls and customization to assist with development and testing. This feature will enable developers to reset app states easily, toggle certain features on/off, and update configurations without needing to reinstall the app, accelerating developer velocity.

To enable, add ENABLE_SETTINGS_PAGE_DEV_OPTIONS=true in .metamaskrc

Developer Options Supported:

Reset Announcements/Notifications for What's New modal
Reset Onboarding states and redirects to second onboarding page

Related issues

Fixes: #23592
Blocked By: MetaMask/core#4088

Manual testing steps

yarn install to install the latest announcement-controller changes
go to .metamaskrc
paste ENABLE_SETTINGS_PAGE_DEV_OPTIONS=true
yarn start

Test using test-dapp

open test-dapp
test with PPOM buttons

See chrome-extension://hbljfohiafgaaaabejngpgolnboohpaf/home.html#settings/developer-options

Screenshots/Recordings

New UI

Announcements

Onboarding

Pre-merge author checklist

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2023-12-21T22:37:27Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

vandan · 2023-12-21T23:46:01Z

Please take a look at some of the thinking from DevEx related to Developer settings.

digiwand · 2023-12-22T03:15:24Z

Hi @vandan, glad you found this PR. I believe this PR would complement the "Developer Mode" you've put deep thought into. I was thinking, upon toggling the "Developer Mode" setting, it would unlock the "Developer Options" setting page. Thoughts?

digiwand · 2023-12-22T03:45:03Z

@vandan

I think there is some crossover between developers working directly on the wallet itself and developers working with the wallet. I think DevEx focuses on developers working with the wallet. This new page was designed to suit developers working directly on the wallet. I see the page extending its boundaries to all developer experiences

vandan · 2023-12-22T04:24:32Z

Great. Yes, I would think that a general developer mode should ideally have some functions for people building MetaMask itself as well. Everything we explored was conceptual so it's nice to see some common interest in actually solving for the developer needs.
In talking to a few folks on the team we found there is value in providing developers with a distinct onboarding path as well (to suppress features such as SRP reminder by default).

github-actions · 2024-03-15T18:05:30Z

This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.

- Developer Options Setting

- todo: remove isFromReminder hack

@hack

- todo: this doesn't fully work. It works for the first redirect, but does not persist. Thus there is a hack in place to bypass this through the code. Search "@hack" in codebase

…sm-max

digiwand · 2024-03-18T01:02:26Z

resurrecting PR for a demo

…INGS_PAGE_DEV_OPTIONS

…meout

metamaskbot · 2024-03-28T20:43:48Z

Builds ready [d8af4eb]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1609 ± 606 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	73	640	192	138	66
		domContentLoaded	11	97	35	21	10
		load	57	3180	1609	1262	606
		domInteractive	11	97	35	21	10

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 12.18 KiB (0.41%)
ui: 7.34 KiB (0.10%)
common: 613 Bytes (0.01%)

codecov · 2024-03-28T20:44:06Z

Codecov Report

Attention: Patch coverage is 16.12903% with 52 lines in your changes are missing coverage. Please review.

Project coverage is 67.54%. Comparing base (6428b33) to head (5fbda42).
Report is 18 commits behind head on develop.

Files	Patch %	Lines
...ngs/developer-options-tab/developer-options-tab.js	4.17%	23 Missing ⚠️
ui/ducks/metamask/metamask.js	0.00%	9 Missing ⚠️
ui/helpers/constants/settings.js	10.00%	9 Missing ⚠️
ui/store/actions.ts	27.27%	8 Missing ⚠️
ui/pages/settings/settings.component.js	50.00%	2 Missing ⚠️
app/scripts/metamask-controller.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #22382      +/-   ##
===========================================
- Coverage    67.56%   67.54%   -0.02%     
===========================================
  Files         1246     1246              
  Lines        48888    48878      -10     
  Branches     12746    12753       +7     
===========================================
- Hits         33031    33013      -18     
- Misses       15857    15865       +8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2024-04-08T11:43:26Z

Builds ready [ab364fa]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5, 6
- content-script: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (403 ± 377 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	60	238	100	39	18
		domContentLoaded	9	72	24	13	6
		load	47	2652	403	784	377
		domInteractive	9	72	24	13	6

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 12.18 KiB (0.41%)
ui: 7.34 KiB (0.10%)
common: 613 Bytes (0.01%)

metamaskbot · 2024-04-11T13:40:04Z

Builds ready [123b3d3]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (915 ± 547 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	371	127	66	32
		domContentLoaded	9	60	26	12	6
		load	49	2594	915	1140	547
		domInteractive	9	60	26	12	6

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 12.18 KiB (0.36%)
ui: 6.83 KiB (0.11%)
common: 1.11 KiB (0.02%)

metamaskbot · 2024-04-16T12:10:07Z

Builds ready [5fbda42]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8
- content-script: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1217 ± 733 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	99	413	170	85	41
		domContentLoaded	16	84	36	21	10
		load	79	4330	1217	1527	733
		domInteractive	16	84	36	21	10

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 12.18 KiB (0.35%)
ui: 6.83 KiB (0.11%)
common: 1.11 KiB (0.02%)

digiwand mentioned this pull request Jan 16, 2024

feat: add What's New ENV variable for development #22379

Closed

13 tasks

github-actions bot added the stale issues and PRs marked as stale label Mar 15, 2024

digiwand added 11 commits March 17, 2024 14:51

feat: create Developer Options Advanced Setting

aae41d7

feat: add reset state Announcements

978ccd0

- Developer Options Setting

feat: add check icon to reset state Announcements

d8a9f6b

fix: developer options handleSettingsRefs

98005ec

feat: add Developer Options Setting reset Onboarding

a6934d9

- todo: remove isFromReminder hack

feat: add redirect with isFromReminder

c51f6ba

- todo: this doesn't fully work. It works for the first redirect, but does not persist. Thus there is a hack in place to bypass this through the code. Search "@hack" in codebase

refactor: reorganize imports DeveloperOptionsTab

142d5a5

feat: add developer-options build flag

9171ab8

fix: rebase developer options settings use scss design-system.screen-…

b962ff8

…sm-max

fix: rebase DeveloperOptions getNumberOfSettingRoutesInTab

133e533

fix: DeveloperOptionsSettings add developer-options fence for import

bab8673

digiwand force-pushed the feat-developer-options-advanced-setting branch from 00127af to bab8673 Compare March 18, 2024 01:02

digiwand added team-confirmations-secure-ux-PR PRs from the confirmations team and removed stale issues and PRs marked as stale labels Mar 18, 2024

digiwand added 2 commits March 17, 2024 18:22

fix: rm DeveloperOptions reset onboarding isFromReminder hack

059fff1

fix:lint: DeveloperOptionsTab scss add new line

1b518a8

This was referenced Mar 19, 2024

[Feat]: Add Developer Options Settings Page #23592

Closed

feat: add AnnouncementController#resetViewed MetaMask/core#4088

Merged

digiwand added 3 commits March 19, 2024 19:06

Merge branch 'develop' into feat-developer-options-advanced-setting

8b76f1b

refactor: announcementController resetViewedState -> resetIsShownStates

569e681

refactor: DeveloperOptionsSettings replace code fence w/ new ENV SETT…

bbee2eb

…INGS_PAGE_DEV_OPTIONS

digiwand added 5 commits March 28, 2024 09:12

Merge branch 'develop' into feat-developer-options-advanced-setting

4159fa7

Merge branch 'develop' into feat-developer-options-advanced-setting

fec0e26

refactor: use settings const featureFlag for developerOptions

a719328

test:fix: SettingsSearch w/ developerOptions

cce1b4a

build: policy.json enable announcement-controller > base global setTi…

f6a6983

…meout

digiwand requested review from a team as code owners March 28, 2024 20:01

build: policy.json update announcement > base config syntax

d8af4eb

digiwand requested a review from pedronfigueiredo March 28, 2024 20:40

pedronfigueiredo approved these changes Mar 29, 2024

View reviewed changes

digiwand changed the title ~~feat: create Developer Options Advanced Setting~~ feat: create Developer Options Setting Page Mar 29, 2024

gauthierpetetin added the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Apr 1, 2024

Merge branch 'develop' into feat-developer-options-advanced-setting

ab364fa

digiwand added 2 commits April 10, 2024 14:02

Merge branch 'develop' into feat-developer-options-advanced-setting

8d76cbc

Merge branch 'develop' into feat-developer-options-advanced-setting

123b3d3

Merge branch 'develop' into feat-developer-options-advanced-setting

b23de0b

segun approved these changes Apr 15, 2024

View reviewed changes

jpuri approved these changes Apr 16, 2024

View reviewed changes

blackdevelopa approved these changes Apr 16, 2024

View reviewed changes

Merge branch 'develop' into feat-developer-options-advanced-setting

5fbda42

digiwand merged commit d91e182 into develop Apr 16, 2024
75 of 77 checks passed

digiwand deleted the feat-developer-options-advanced-setting branch April 16, 2024 13:07

github-actions bot removed the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Apr 16, 2024

github-actions bot locked and limited conversation to collaborators Apr 16, 2024

metamaskbot added the release-11.16.0 Issue or pull request that will be included in release 11.16.0 label Apr 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: create Developer Options Setting Page #22382

feat: create Developer Options Setting Page #22382

digiwand commented Dec 21, 2023 •

edited

github-actions bot commented Dec 21, 2023

vandan commented Dec 21, 2023

digiwand commented Dec 22, 2023

digiwand commented Dec 22, 2023

vandan commented Dec 22, 2023

github-actions bot commented Mar 15, 2024

digiwand commented Mar 18, 2024

metamaskbot commented Mar 28, 2024

codecov bot commented Mar 28, 2024 •

edited

metamaskbot commented Apr 8, 2024

metamaskbot commented Apr 11, 2024

metamaskbot commented Apr 16, 2024

feat: create Developer Options Setting Page #22382

feat: create Developer Options Setting Page #22382

Conversation

digiwand commented Dec 21, 2023 • edited

Description

Related issues

Manual testing steps

Screenshots/Recordings

New UI

Announcements

Onboarding

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 21, 2023

vandan commented Dec 21, 2023

digiwand commented Dec 22, 2023

digiwand commented Dec 22, 2023

vandan commented Dec 22, 2023

github-actions bot commented Mar 15, 2024

digiwand commented Mar 18, 2024

metamaskbot commented Mar 28, 2024

codecov bot commented Mar 28, 2024 • edited

Codecov Report

metamaskbot commented Apr 8, 2024

metamaskbot commented Apr 11, 2024

metamaskbot commented Apr 16, 2024

digiwand commented Dec 21, 2023 •

edited

codecov bot commented Mar 28, 2024 •

edited