Page Speed widget - "Mobile" & "Desktop" icon change

[Pratheep-lab]

On the Page Speed widget found at the bottom of the SK dashboard, the mobile and desktop icons need to be changed to standard material design icons.

Current screenshot showing Page speed widget:

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The icons used for the PageSpeed insights widget for toggling device-specific reports should be updated to use the following Material icons (new svg files linked):
  • computer
  • smartphone
• The source of the new icons should be amended to inherit the fill color using currentColor instead of a fixed hex code
• The previous icons which are no longer used should be deleted

Implementation Brief

• Replace assets/svg/device-size-mobile-icon.svg by the smartphone icon in the AC.
• Replace assets/svg/device-size-desktop-icon.svg by the computer icon in the AC.
• In both SVGs, add the fill attribute with the currentColor value to the last path element.
• Using assets/sass/components/global/_googlesitekit-DeviceSizeTabBar.scss,
  • Add the color styles to svg, both including the one for .mdc-tab--active, having the same value as the corresponding svg path fill styles.
  • Remove the fill styles for svg path, and the resulting empty path selector.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• Expected change to the Page Speed dashboard component with the icon changes.

QA Brief

On the Page Speed widget found at the bottom of the SK dashboard:

• Toggle between the mobile and desktop icons
• Verify that they have been updated with icons in AC

Changelog entry

• Update viewport icons used in PageSpeed Insights widget.

[aaemnnosttv]

@Pratheep-lab are the current icons not from Material? I believe whatever is there was provided by @aarondruck in the original designs but perhaps he can confirm.

cc: @felixarntz @marrrmarrr

[aarondruck]

Sorry, I think we can close this. I was mostly tripped up on the difference between the mobile icons, of what was designed and what's in production. But it's minimal, so we can just close this. Original icon: [image: image.png] Icon in production: [image: image.png]

…

On Tue, Apr 20, 2021 at 7:24 AM Evan Mattson ***@***.***> wrote: Assigned #3162 <#3162> to @aarondruck <https://github.com/aarondruck>. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#3162 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAURNSU2QIQW6MKYNTOLWRLTJWFDHANCNFSM427VKPLQ> .

[aaemnnosttv]

@aarondruck here they are side-by-side which makes it a bit easier to compare.

The color looks more balanced with the new phone icon, but I think I prefer the laptop icon to the monitor.

How about smartphone and computer icons?

What do you think?

[aarondruck]

The *Smartphone* and *Computer* icons work, thank you for looking into it!

…

On Mon, May 3, 2021 at 5:16 AM Evan Mattson ***@***.***> wrote: @aarondruck <https://github.com/aarondruck> here they are side-by-side which makes it a bit easier to compare. [image: image] <https://user-images.githubusercontent.com/1621608/116874155-80d0d500-ac21-11eb-962d-3b3ffb570021.png> The color looks more balanced with the new phone icon, but I think I prefer the laptop icon to the monitor. How about smartphone and computer icons? [image: image] <https://user-images.githubusercontent.com/1621608/116874699-69deb280-ac22-11eb-8a0b-a7681ec2e418.png> [image: image] <https://user-images.githubusercontent.com/1621608/116874709-6cd9a300-ac22-11eb-9919-6155fe7568b5.png> What do you think? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3162 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAURNSQGHG3S3SGLJ2SPT4DTL2HY7ANCNFSM427VKPLQ> .

[eugene-manuilov]

IB ✔️

[danielgent]

This is ready to go into CR but as it is outside of the current sprint I'm leaving it in execution

[danielgent]

Setting to Code Review as I'm unassigning tickets from myself 😄

[felixarntz]

Adding to the 1.40.0 release since this is a trivial enhancement and good to go. cc @aaemnnosttv

[wpdarren]

QA Update: ❌

@aaemnnosttv @felixarntz in my opinion the icons look a lot smaller than the previous ones. Maybe it's my eyes 😃

What are your thoughts? They appear small on desktop and mobile.

On Develop/Main

On latest release

[aaemnnosttv]

Thanks @wpdarren, they are a bit smaller now you're right. I've opened a PR to fix this 👍

[wpdarren]

QA Update: Pass ✅

Verified:

• On the Page Speed widget: confirmed that the new icons appear as per the AC.
• Checked the icons on desktop and mobile screen sizes.