1643419 - Add tooltip when displaying pre-imported top sites on multistage import screen

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Punam Dahiya [:pdahiya]]

Scope of this bug is to add tooltip when displaying pre-imported top sites on multistage import screen

Comment 1

[Punam Dahiya [:pdahiya]]

NI Aaron to add link to design specs of tooltip on Import screen. Thanks!

Comment 2

[Tim Spurway [:tspurway]]

[Tracking Requested - why for this release]: this is a legal requirement that we want to have before making multistage live

Comment 3

[Aaron Benson]

(In reply to Punam Dahiya [:pdahiya] from comment #1)

NI Aaron to add link to design specs of tooltip on Import screen. Thanks!

Icon placement can be found here. It's fine to use a system tooltip for this (e.g. no custom modals, etc): https://www.figma.com/proto/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=1514%3A4536&viewport=-1892%2C385%2C0.522352933883667&scaling=contain

Comment 4

[Punam Dahiya [:pdahiya]]

Attachment: Bug 1643419 - Add Tooltip on pre-importable top sites

Comment 5

[Punam Dahiya [:pdahiya]]

Attachment: Screenshot tooltip info icon

Comment 6

[Punam Dahiya [:pdahiya]]

Attachment: Screen Shot tooltip

Comment 7

[Punam Dahiya [:pdahiya]]

NI Aaron to help UI review tooltip screenshots attached above. Thanks!

Comment 8

[Aaron Benson]

Hey Punam, we changed the design of the tooltip slightly based on UR feedback. Below is the link to the spec. Items to note:

• No more (i) info icon
• Provide a hover state for the top sites container (background: #F0F0F4; border-radius: 4px;). Note the container size is a little taller to account for new hover state.
• The tooltip should be applied for the whole container using a standard tooltip. It looks like you made a custom tooltip box in the screenshot based on the one drawn in the spec. I didn't mean for us to do custom styled tooltips here so it's okay to let it be the default OS style. Sorry I didn't annotate that clearly :/

Spec: https://www.figma.com/file/KqQZwwLhft9cUIcBtMVmbz/Desktop-First-Run?node-id=1636%3A4482

I think that's it. Feel free to ping me with any questions!

Comment 9

[Punam Dahiya [:pdahiya]]

Attachment: Screen Shot with default Tooltip

NI Aaron to review screenshot updated with feedback. Thanks!

Comment 10

[Aaron Benson]

Looks good to me

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5116dfac864b
Add Tooltip on pre-importable top sites r=Mardak

Comment 12

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/5116dfac864b

Comment 13

[Alexandru Michis [:malexandru]]

https://hg.mozilla.org/mozilla-central/rev/5116dfac864b

Comment 14

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the tooltip is correctly displayed for the pre-imported top sites on multistage import screen by doing the following:

• Have data previously imported from Google Chrome.
• Set the value of the browser.aboutwelcome.overrideContent to : {"id": "multi-stage-welcome-importable-theme","template": "multistage","screens": [{"id": "AW_GET_STARTED","order": 0,"content": {"zap": true,"title": { "string_id": "onboarding-multistage-welcome-header" }, "subtitle": "The fast, safe, and private browser that's backed by a non-profit.", "primary_button": {"label": "Start Setup","action":{"navigate": true}}, "secondary_button": {"text": "Have an account?", "label": "Sign in","position": "top", "action":{"type": "OPEN_URL","addFlowParams": true, "data":{"args": "https://accounts.firefox.com/?service=sync&action=email&context=fx_desktop_v3&entrypoint=activity-stream-firstrun&style=trailhead","where": "current"}}}}},{"id": "AW_IMPORT_SETTINGS","order": 1,"content": {"zap": true,"title": "Import your passwords, bookmarks,\u00a0and more", "subtitle": "Coming from another browser? It's easy to bring everything to Firefox.","tiles": {"type": "topsites", "tooltip": "These sites were found on this device.\u000AFirefox does not save or sync data from\u000Aanother browser unless you choose to\u000Aimport it."}, "primary_button": {"label": "Start Import", "action":{"type": "SHOW_MIGRATION_WIZARD","navigate": true}},"secondary_button": {"label": "Not now","action":{"navigate": true}}}},{"id": "AW_CHOOSE_THEME","order": 2,"content": {"zap": true, "title": "Choose a look","subtitle": "Personalize Firefox with a theme.","tiles": {"type": "theme","action": {"theme": "<event>"}, "data": [{"theme": "light", "label": "Light"}, {"theme": "dark", "label": "Dark"}]}, "primary_button": {"label": "Save Theme", "action":{"navigate": true}},"secondary_button": {"label": "Not now","action":{"theme": "default","navigate": true}}}}]}
• Restart the browser and navigate to "about:welcome".
• Click the "Start Setup" button.
• Hover the "Top Sites" sections and hold the mouse steady for a few seconds.

Verified using the Firefox Nightly 80.0a1 (Build ID: 20200709093347) on Windows 10 x64, macOS 10.15, and Ubuntu Linux 18.04.

Comment 15

[Punam Dahiya [:pdahiya]]

Comment on attachment 9161777 [details]
Bug 1643419 - Add Tooltip on pre-importable top sites

Beta/Release Uplift Approval Request

• User impact if declined: Support legal requirement to show tooltip when showing pre-imported topsites to user in onboarding flow
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: https://bugzilla.mozilla.org/show_bug.cgi?id=1643419#c14
• List of other uplifts needed: No
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): This feature is behind pref and not exposed to user by default
• String changes made/needed: None

Comment 16

[Punam Dahiya [:pdahiya]]

NI Ryan to help approve beta uplift request above. Thanks!

Comment 17

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9161777 [details]
Bug 1643419 - Add Tooltip on pre-importable top sites

Approved for 79.0b8.

Comment 18

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/2afaf2a28ac2

Comment 19

[Robert Martin [:romartin], Ecosystem QA]

I have verified that the tooltip is correctly displayed for the pre-imported top sites on multistage import screen by following the steps in comment 14 using Firefox Beta 79.0b9 (Build ID: 2020071700151) on Windows 10, macOS 10.15, and Ubuntu Linux 18.04.

I have also verified that the tooltip is not displayed for the pre-imported top sites on multistage import screen by opening a clean profile with Firefox Beta 80.0b4 (Build ID: 20200804180257) and navigating to the "Import" slide on Windows 10, macOS 10.15, and Ubuntu Linux 18.04. However, for this build, the tooltip was changed to a string containing the same message as the tooltip.

Comment 20

[Punam Dahiya [:pdahiya]]

Attachment: Screenshot Figma TopSites Highlight .png