follow-up to #29075 - Speedreader design updates

[rebron]

Design

Follow-up items to #29075 See Figma: https://www.figma.com/file/YHMNRL2XpZDOUe6n1Dw6K1/Reader-mode?type=design&node-id=2121-58994&mode=design&t=RtAqCsemnq3g5SWI-0 . Screens in figma includes items for text to speech and Leo not applicable to this issue. Use screenshots below.

Tune settings dialog

Right click in address bar

Customize toolbar options

Description

Speedreader button in address bar

• [x] If Speedreader is enabled as always on, Speedreader button in address bar should still just be a toggle to enter/exit Speedreader.
• [x] For left click action, secondary dialog toggle and introductory dialog that turns Speedreader "always on option" on/off should NOT appear -- this was previous version UI/UX. Now on right click, we should show dialog for always on or per site setting as per screenshots in description.

Speedreader settings

• [x] Add settings dialog and use the Customize icon for speedreader mode for this site and all sites off the speedreader toolbar.
• [x] Also move the Customize icon to left most position. Both settings should be default off. The always on setting should match the same one that is in brave://settings/appearance (see Design)

Text change

• [x] Change all text instances of Reader mode to Speedreader. (see Design)

Brave version (brave://version info)

1.58.x

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

[kjozwiak]

The above requires 1.58.113 or higher for 1.58.x verification 👍

[MadhaviSeelam]

Verification PASSED using

Brave | 1.58.114 Chromium: 116.0.5845.163 (Official Build) beta (64-bit)
-- | --
Revision | 21631edab5a70964c2f5817bfa4d06c32b4ab314
OS | Windows 11 Version 22H2 (Build 22621.2134)

Test Case 1: Speedreader setting in brave://settings/appearance - Off

Case 1: Speedreader button with new tune speedreader dialog in the URL bar

1. Install `1.58.114` 2. launched Brave 3. opened `brave://settings/appearance` 4. verified `Speedreader` setting is `Off` 5. clicked the link `Learn more` 6. confirmed correct help article displayed - old article?? 7. navigated to nytimes.com and opened an article - https://www.nytimes.com/2022/12/12/travel/maine-balsam-tippers.html 8. verified `Speedreader` button is available and grey color in the URL bar 9. hovered over and correct text displayed `Turn on speedreader` - File as a follow up- correct text `Speedreader` 10. clicked `Speedreader` button 11. confirmed speedreader is shown in blue and no other bubbles shown in the URL bar 12. confirmed article layout is shown in `Speedreader` 13. right clicked `Speedreader` button in the URL bar 14. confirmed new `Tune speedreader` dialog is shown with default options `Off` 15. clicked/toggled `Off` speedreader button in the URL bar 16. confirmed the speedreader mode off and article is no longer shown in speedreader mode and no toolbar is shown step 4 | step 9 | step 14 | step 16 -------- |--------- | ------- | ------ ||||

Case 2: Speedreader buttons UI

1. continue from Case 1 - Speedreader turned on for an article in a new tab - https://www.nytimes.com/2022/12/12/travel/maine-balsam-tippers.html 2. verified following `Speedreader` buttons/options are shown above the article, match to Figma designs/screenshot in the issue and are in the correct order left to right - `Tune speedreader` button - `Appearance settings` (Aa control) - `Speedreader` text - `X` control 3. confirmed the `Tune speedreader` icon matches the figma designs 4. clicked on `Tune Speedreader` button 5. confirmed the default options are `off` as below in the `Tune speedreader` and match to Figma designs/screenshots - `Always use speedreader for this site` - `Always use speedreader for all sites` step 1 | step 2a | step 2b | step 2c | step 5 ------ | ----- | ---- | ----- | ----- |||| Dark theme: Example | Example | Example | Example ----- | ------ | ----- | ------ |||

Case 3: Tune speedreader dialog functionality

***_Default settings for `Always use speedreader for this site - Off_*** 1. continue from Case 2 - `Tune speedreader` dialog is shown, when clicked on the Speedreader options/buttons toolbar for the article https://www.nytimes.com/2022/12/12/travel/maine-balsam-tippers.html - above article is in `Speedreader` mode - default settings for `Always use speedreader for this site` is Off 2. close the article/tab and navigate to another article from the same site `nytimes.com` in a new tab https://www.nytimes.com/interactive/2023/03/09/travel/things-to-do-nashville.html 3. confirmed page is not shown in `Speedreader` mode 4. visit another article from a different site https://www.washingtonpost.com/food/2023/09/05/best-rotisserie-chicken-taste-test/ 5. confirmed page is not shown in `Speedreader` mode step 1 | step 3 | step 5 ------ | ------ | ------ || ***_Always use speedreader for this site - Enabled_*** 1. visit an article and enable Speedreader mode - https://www.nytimes.com/2022/12/12/travel/maine-balsam-tippers.html 2. clicked on `Tune speedreader` and verified default settings is `off` for `Always use speedreader for this site` 3. enabled `Always use speedreader for this site` toggle 4. right clicked on Speedreader icon in the toolbar for the article 5. confirmed `Always use speedreader for this site` toggle in the `Tune speedreader` dialog in both places 6. open another article in a new tab https://www.nytimes.com/interactive/2023/03/09/travel/things-to-do-nashville.html 7. confirmed the `Always use speedreader for this site` is carried to second article 8. closed the first article/tab, closed Brave and reopened Brave 9. confirmed the `Always use speedreader for this site` setting is retained for second article 10. closed second article and visited another article from the same site in a new tab - https://www.nytimes.com/interactive/2023/02/23/travel/things-to-do-miami.html 11. confirmed `Always use speedreader for this site` is shown in the `Tune speedreader` dialog in the URL bar 12. visited a different site sfchronicle.com and open a new article -https://www.sfchronicle.com/sf/article/fishermans-wharf-tourist-18274985.php 13. confirmed `Always use speedreader for this site` setting is not shown for `sfchronicle.com` site. step 2 | step 3 | step 5 | step 7 | step 9 | step 10 | step11 | step 13 ---- | ----- | ---- | ----- | ---- | ---- | ---- | ----- ||||||| ***_Always use speedreader for this site - Disabled_*** 1. continued from above `Always use speedreader for this site` enabled for the first article - https://www.nytimes.com/2022/12/12/travel/maine-balsam-tippers.html 2. clicked on `Tune speedreader` dialog and disabled `Always use speedreader for this site` setting 3. confirmed page is no longer shown in Speedreader mode and original page is shown 4. navigated to second article of the same site (nytimes.com) in the second tab where Speedreader is enabled - https://www.nytimes.com/interactive/2023/03/09/travel/things-to-do-nashville.html 5. confirmed `Always use speedreader for this site` setting is disabled in `Tune speedreader` dialog but the article is in speedreader mode which is expected 6. closed first and second articles/tabs 7. visited the third article for the same site (nytimes.com) in a new tab - https://www.nytimes.com/interactive/2023/02/23/travel/things-to-do-miami.html 8. confirmed original article is shown step 1 | step 3 | step 4 | step 5 | step 8 ------ | ----- | ------ | ------ | ------ |||| ***_`Always use speedreader for all sites - Enabled_*** 1. new profile 2. launch Brave 3. visit azcentral.com and opened an article in a new tab - https://www.azcentral.com/story/entertainment/dining/2023/09/05/new-restaurants-phoenix-august-2023/70605386007/ 4. enabled `Speedreader` mode by clicking on `Speedreader` button in the URL bar 5. clicked on `Tune speedreader` dialog and verified `Always use speedreader for this site` and `Always use speedreader for all sites` disabled as a default 6. enabled `Always use speedreader for all sites` setting 7. confirmed when `Always use speedreader for all sites` is enabled, `Always use speedreader for this site` is also enabled 8. closed the tab for `azcentral.com` article 9. opened `cnn.com` article in a new tab - https://www.cnn.com/2023/08/31/politics/fulton-county-trump-trial-tv-cameras/index.html 10. confirmed both `Always use speedreader for all sites` and `Always use speedreader for this site` also enabled step 3 | step 5 | step 7 | step 10 ---- | ---- | ---- | ---- ||| ***_`Always use speedreader for all sites - Disabled*** 1. visit azcentral.com and opened an article in a new tab - https://www.azcentral.com/story/entertainment/dining/2023/09/05/new-restaurants-phoenix-august-2023/70605386007/ 2. enabled `Speedreader` mode by clicking on `Speedreader` button in the URL bar 3. enabled `Always use speedreader for all sites` and `Always use speedreader for this site` is also enabled 4. disabled `Always use speedreader for all sites` 5. confirmed speedreader mode is not shown for the article 6. closed the tab/site and closed Brave 7. opened sfgate.com and navigated to an article - https://www.sfgate.com/bayarea/article/mega-development-central-california-18347004.php 8. confirmed page is not shown in speedreader mode. step 2 | step 4 | step 8 --- | --- | ---- || ***_`Always use speedreader for all sites - Enabled but disabled `Always use speedreader for this site_ *** 1. visited cnn.com and opened an article in a new tab - https://www.cnn.com/2023/09/01/opinions/seniors-retirees-arizona-florida-climate-change-heat-wave-carr-wing-falchetta/index.html 2. enabled the article is in speedreader mode and enabled both settings `Always use speedreader for all sites` and `Always use speedreader for this site` 3. disabled `Always use speedreader for this site` 4. confirmed the page is exited out of Speedreader mode 5. closed the tab and open another article from the same site (cnn.com) - https://www.cnn.com/2023/09/05/travel/disney-treasure-cruise-ship-announced/index.html 7. confirmed the article is no longer shown in speedreader mode 8. close the tab and open another article from different site (sfgate.com) - https://www.sfgate.com/bayarea/article/mega-development-central-california-18347004.php 9. confirmed the page is shown in speedreader mode and both settings `Always use speedreader for all sites` and `Always use speedreader for this site` are enabled step 1 | step 4 | step 5 | step 8 ---- | ---- | ---- | ----- |||

Test Case 2: Speedreader setting in brave://settings/appearance - On

1. new profile 2. launched Brave 3. opened brave://settings/appearance` 4. enabled `speedreader` settings 5. visited sfgate.com in a new tab and opened a new article - https://www.sfgate.com/shopping/article/le-creuset-autumn-18343633.php?IPID=SFGate-HP-Editors-Picks 6. confirmed Speedreader is enabled and shown in blue. 7. confirmed both `Always use speedreader for all sites` and `Always use speedreader for this site` settings enabled in `Tune speedreader` dialog 8. clicked `X` to exit out of speedreader mode 9. confirmed page is no longer shown in speedreader mode and the Speedreader icon shown in Gray 10. closed the tab/article 11. opened a different article for the same site `sfgate.com` - https://www.weekand.com/home-garden/article/plants-need-cutting-back-fall-18059096.php 12. confirmed page is shown in Speedreader mode 13. closed the tab/article 14. visited thetelegraph.com and opened an article in a new tab - https://www.thetelegraph.com/news/article/join-blum-house-collinsville-tunes-blum-18342774.php 15. confirmed page is shown in Speedreader while both the settings `Always use speedreader for all sites` and `Always use speedreader for this site` are enabled step 6 | step 6 | step 7 | step 9| step 12 | step 15 ---- | ----- | ---- | ----- | ---- | ----- |||||

Test Case 3: Not all sites provide speedreader capabilities

1. visit newsweek.com and open an article in a new tab - https://www.newsweek.com/disney-box-office-guardians-oppenheimer-barbie-1824588 2. Speedreader icon is not available

Test Case 5: Upgrade

1. Installed 1.57.57 2. launched Brave 3. opened `brave://settings/appearance` 4. enabled `Speedreader` setting 5. visited chicago tribune and opened an article https://www.chicagotribune.com/news/environment/waukesha-lake-michigan-20230905-a6gcgjtx5zandh4xewb47ppwsa-story.html 6. verified Speedreader is enabled in the address bar 7. when clicked speedreader icon, speedreader bubble is displayed in the address bar 8. closed Brave and rename the profile to Brave-Browser-Beta 9. relaunched Brave 10. confirmed Speedreader icon is shown and enabled 11. Tune speedreader dialog is shown in the URL bar and in the speedreader toolbar 12. confirmed both settings for `Always use speedreader for all sites` and `Always use speedreader for this site` are enabled step 1 | step 4 | step 7 | step 11 | step 12 ----- | ----- | ---- | ---- | ----- ||||

[stephendonner]

Verification PASSED using

Brave | 1.58.115 Chromium: 116.0.5845.163 (Official Build) beta (x86_64)
-- | --
Revision | 4d8f3ac31e950c7bb505b61fd9d86ed7f4888a71
OS | macOS Version 11.7.9 (Build 20G1426)

Case 1: Speedreader button with new tune speedreader dialog in the URL bar - PASSED

1. install `1.58.115` 2. launched Brave 3. opened `brave://settings/appearance` 4. verified Speedreader setting is `Off` 5. clicked the link `Learn more` 6. confirmed correct help article displayed 7. navigated to `abcnews.com` and opened an article - `https://abcnews.go.com/Politics/doctor-evidence-stroke-after-mitch-mcconnell-freeze/story?id=102932100` 8. verified Speedreader button is available in the URL bar 9. hovered over and correct text displayed Turn on speedreader - File as a follow up- correct text Speedreader 10. clicked Speedreader button 11. confirmed when Speedreader button is clicked, no other bubbles shown in the URL bar 12. confirmed article layout is shown in Speedreader 13. right clicked Speedreader button in the URL bar 14. confirmed new `Tune speedreader` dialog is shown with default options Off 15. clicked/toggled `Off` speedreader button in the URL bar 16. confirmed the speedreader mode off and article is no longer shown in speedreader mode and no toolbar is shown step 4 | step 9 | step 14 | step 16 -------|--------|--------|-------- | | |

Case 2: Speedreader buttons UI - PASSED

1. continue from Case 1 2. Speedreader turned on for an article in a new tab - `https://abcnews.go.com/Politics/doctor-evidence-stroke-after-mitch-mcconnell-freeze/story?id=102932100` 3. confirmed following Speedreader buttons/options are shown above the article, match to Figma designs/screenshot in the issue and are in the correct order left to right - Tune speedreader button - Appearance settings (Aa control) - Speedreader text - X control 8. confirmed the `Tune speedreader` icon matches the Figma designs 9. clicked on Tune Speedreader button 10. confirmed the default options are off as below in the Tune speedreader and match to Figma designs/screenshots - `Always use speedreader for this site` - `Always use speedreader for all sites` step 1 | step 2a | step 2b | step 2c | step 5 -------|--------|---------|--------|------- | | | |

Case 3: Tune speedreader dialog functionality - PASSED

***_Default settings for `Always use speedreader for this site` - Off_*** 1. continue from Case 2 - `Tune speedreader` dialog is shown, when clicked on the Speedreader options/buttons toolbar for the article - `https://abcnews.go.com/Politics/doctor-evidence-stroke-after-mitch-mcconnell-freeze/story?id=102932100` - above article is in `Speedreader` mode - default settings for `Always use speedreader for this site` is Off 2. close the article/tab and navigate to another article from the same site `abcnews.com` in a new tab `https://abcnews.go.com/Politics/biden-tests-negative-covid-wear-mask-close-white/story?id=102935772` 3. confirmed page is not shown in `Speedreader` mode 4. visit another article from a different site `https://www.cnn.com/2023/09/05/politics/mitch-mcconnell-health-latest/index.html` 5. confirmed page is not shown in `Speedreader` mode step 1 | step 3 | step 5 ------ | ------ | ------ | | ***_`Always use speedreader for this site` - Enabled_*** - `PASSED` 1. visit an article and enable Speedreader mode - `https://www.wired.com/story/what-openai-really-wants/` 2. clicked on `Tune speedreader` and verified default settings is `off` for `Always use speedreader for this site` 3. enabled `Always use speedreader for this site` toggle 4. right clicked on Speedreader icon in the toolbar for the article 5. confirmed `Always use speedreader for this site` toggle in the `Tune speedreader` dialog in both places 6. open another article in a new tab `https://www.wired.com/story/airbnb-ban-new-york-city/` 7. confirmed the `Always use speedreader for this site` is carried to second article 8. closed the first article/tab, closed Brave and reopened Brave 9. confirmed the `Always use speedreader for this site` setting is retained for second article 10. closed second article and visited another article from the same site in a new tab - `https://www.wired.com/story/prigozhin-wagner-dead-news-disinformation/` 11. confirmed `Always use speedreader for this site` is shown in the `Tune speedreader` dialog in the URL bar 12. visited a different site sfgate.com and open a new article - `https://www.sfgate.com/49ers/article/why-the-2023-49ers-suck-18348355.php?IPID=SFGate-HP-CP-Spotlight` 13. confirmed `Always use speedreader for this site` setting is NOT shown for `sfgate.com` site. step 2 | step 3 | step 5 | step 7 | step 9 | step 10 | step 11 | step 13 ---- | ----- | ---- | ----- | ---- | ---- | ---- | ----- | | | | | | | ***__`Always use speedreader for this site` - Disabled__*** - `PASSED` 1. continued from above `Always use speedreader for this site` enabled for the first article - `https://www.wired.com/story/what-openai-really-wants/` 2. clicked on `Tune speedreader` dialog and disabled `Always use speedreader for this site` setting 3. confirmed page is no longer shown in Speedreader mode and original page is shown 4. navigated to second article of the same site (`https://www.wired.com/story/airbnb-ban-new-york-city/`) 5. confirmed `Always use speedreader for this site` settings is disabled in `Tune speedreader` dialog but the article is in speedreader mode, which is expected 6. closed first and second articles/tabs 7. visited the third article for the same site (`https://www.wired.com/story/prigozhin-wagner-dead-news-disinformation/`) in a new tab 8. confirmed original article is shown step 1 | step 3 | step 5 | step 8 -------|-------|-------|------- | | | ***__`Always use speedreader for all sites` - Enabled__*** - `PASSED` 1. new profile 2. launched Brave 3. visited `kron4.com` and clicked on `https://www.kron4.com/news/bay-area/skyline-high-in-oakland-on-lockdown-amid-reports-of-shots-fired-suspects-detained/` 4. enabled Speedreader mode by clicking on `Speedreader` button in the URL bar 5. clicked on `Tune speedreader` dialog and verified `Always use speedreader for this site` and `Always use speedreader for all sites` are both disabled by default 6. enabled `Always use speedreader for all sites` 7. confirmed when `Always use speedreader for all sites` is enabled, `Always use speedreader for this site` is also enabled 8. closed the tab for the `kron4.com` article 9. opened `usatoday.com` in a new tab, clicked on `https://www.usatoday.com/story/news/politics/2023/09/05/proud-boys-leader-enrique-tarrio-22-year-sentence/70716350007/` 10. confirmed both `Always use speedreader for all sites` and `Always use speedreader for this site` is also enabled step 3 | step 5 | step 7 | step 10 -------|-------|--------|-------- | | | ***`Always use speedreader for all sites` enabled; disabled `Always use speedreader for this site`*** - `PASSED` 1. loaded `cnn.com` and opened an article in a new tab - `https://www.cnn.com/2023/09/05/world/ancient-human-population-collapse-scn/index.html` 2. enabled speedreader mode and enable both `Always use speedreader for all sites` and `Always use speedreader for theis site` 3. disabled `Always use speedreader for this site` 4. confirmed the page is exited out of speedreader mode 5. closed the tab and opened another article from the same site (`cnn.com`) - `https://www.cnn.com/2023/09/05/weather/atlantic-tropical-storm-hurricane-season-climate/index.html` 6. confirmed the article is no longer shown in speedreader mode 7. closed the tab and opened another article from different site (`sfgate.com`) - `https://www.sfgate.com/news/article/kevin-costner-breaks-silence-yellowstone-exit-18348824.php` 8. confirmed the page is shown in speedreader mode and both settings `Always use speedreader for all sites` and `Always use speedreader for this site` are enabled step 1 | step 4 | step 5 | step 8 -------|--------|------|-------- | | |

Speedreader setting in brave://settings/appearance - PASSED

1. new profile 2. launched Brave 3. opened brave://settings/appearance` 4. enabled speedreader settings 5. visited sfgate.com in a new tab and opened a new article - https://www.sfgate.com/shopping/article/le-creuset-autumn-18343633.php?IPID=SFGate-HP-Editors-Picks 6. confirmed Speedreader is enabled and shown in blue. 7. confirmed both Always use speedreader for all sites and Always use speedreader for this site settings enabled in Tune speedreader dialog 8. clicked X to exit out of speedreader mode 9. confirmed page is no longer shown in speedreader mode and the Speedreader icon shown in Gray 10. closed the tab/article 11. opened a different article for the same site sfgate.com - https://www.weekand.com/home-garden/article/plants-need-cutting-back-fall-18059096.php 12. confirmed page is shown in Speedreader mode 13. closed the tab/article 14. visited thetelegraph.com and opened an article in a new tab - https://www.thetelegraph.com/news/article/join-blum-house-collinsville-tunes-blum-18342774.php 15. confirmed page is shown in Speedreader while both the settings Always use speedreader for all sites and Always use speedreader for this site are enabled step 4 | step 6 | step 7 | step 9 | step 12 | step 15 -------|--------|-------|--------|--------|------- | | | | |

Upgrade - PASSED

1. installed `1.57.57` 2. launched Brave 3. opened `brave://settings/appearance` 4. enabled `Speedreader` setting 5. visited `southbendtribune.com` and loaded `https://www.southbendtribune.com/story/lifestyle/2023/09/05/pet-connection-bite-free-kitten-play/70680819007/` 6. verified Speedreader is enabled in the address bar 7. when clicked speedreader icon, speedreader bubble is displayed in the address bar 8. closed Brave and renamed the profile to `Brave-Browser-Beta` 9. relaunched Brave 10. confirmed Speedreader icon is shown and enabled 11. `Tune speedreader` dialog is shown in the address bar and in the speedreader toolbar 12. confirmed both settings for `Always use speedreader for all sites` and `Always use speedreader for this site` are enabled step 1 | step 4 | step 7 | step 11 | step 12 ------|--------|-------|---------|-------- | | | |

Logged:

• https://github.com/brave/brave-browser/issues/32772

[rebron]

cc: @Brave-Matt See above use cases if there any questions.

@MadhaviSeelam we're in process of getting this updated, thanks for flagging. https://support.brave.com/hc/en-us/articles/360045031392-What-is-SpeedReader

[LaurenWags]

Per discussion with @rebron - run through cases 1 and 2 from https://github.com/brave/brave-browser/issues/31583#issuecomment-1707223146 on Linux.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.58.120 Chromium: 116.0.5845.180 (Official Build) (64-bit)
-- | --
Revision | 99255ad6abf2fa399c063683c051f973e1f5c0af
OS | Linux

Case 1: Speedreader button with new tune speedreader dialog in the URL bar - `PASSED

1. Install `1.58.114` 2. launched Brave 3. opened `brave://settings/appearance` 4. verified `Speedreader` setting is `Off` 5. navigated to telegraph.co.uk and opened an article -https://www.bostonglobe.com/2023/09/08/lifestyle/nine-snack-hacks-back-school/ 8. verified `Speedreader` button is available and grey color in the URL bar 9. hovered over and correct text displayed `Turn on speedreader` - File as a follow up- correct text `Speedreader` 10. clicked `Speedreader` button 11. confirmed speedreader is shown in blue and no other bubbles shown in the URL bar 12. confirmed article layout is shown in `Speedreader` 13. right clicked `Speedreader` button in the URL bar 14. confirmed new `Tune speedreader` dialog is shown with default options `Off` 15. clicked/toggled `Off` speedreader button in the URL bar 16. confirmed the speedreader mode off and article is no longer shown in speedreader mode and no toolbar is shown step 4 | step 9 | step 14 | step 16 -------- |--------- | ------- | ------ ||||

Case 2: Speedreader button UI - `PASSED

1. continue from Case 1 - Speedreader turned on for an article in a new tab - https://www.bostonglobe.com/2023/09/08/lifestyle/nine-snack-hacks-back-school/ 2. verified following `Speedreader` buttons/options are shown above the article, match to Figma designs/screenshot in the issue and are in the correct order left to right - `Tune speedreader` button - `Appearance settings` (Aa control) - `Speedreader` text - `X` control 3. confirmed the `Tune speedreader` icon matches the figma designs 4. clicked on `Tune Speedreader` button 5. confirmed the default options are `off` as below in the `Tune speedreader` and match to Figma designs/screenshots - `Always use speedreader for this site` - `Always use speedreader for all sites` step 1 | step 2a | step 2b | step 2c | step 5 ------ | ----- | ---- | ----- | ----- ||||