Move the use your domain option below Show More

[niranjan-uma-shankar]

Changes proposed in this Pull Request

The next domain step test is being implemented in #39276. The test is hidden behind a feature flag. We will build individual pieces of the UI in separate PRs.

This PR:

• Moves "Already own a domain" out of search results list, and adds it below the search results.

Web

Mobile

Testing instructions

• Begin a fresh signup at /start or click "Add new site". You need to be in the variantShowUpdates variant of domainStepCopyUpdates test and variantDesignUpdates variant of domainStepDesignUpdates.
• At the domain step, verify the following:
  • The "Already own a domain" UI should match the sketch in pbAok1-7N-p2.
  • Click the link and verify that it takes you to the Transfer domain page

Verify that control group UI is unchanged

Scenario 1

• Go through signup flow from /start while in variantShowUpdates variant of domainStepCopyUpdates test and control of domainStepDesignUpdates.
• You should not be seeing the changes in this PR but instead the earlier UI version.

Scenario 2

• Go through signup flow from /start while in control of domainStepCopyUpdates test.
• You should not be seeing the changes in this PR but instead the earlier UI version.

[matticbot]

Test live: https://calypso.live/?branch=add/domain-step-test-v2-map-domain-view

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~545846 bytes added 📈 [gzipped])

name                   parsed_size             gzip_size
entry-jetpack-cloud     +1300779 B  (+611.5%)  +307354 B  (+481.1%)
entry-main               +213994 B   (+15.4%)   +59623 B   (+17.8%)
entry-login              +213994 B   (+25.3%)   +59623 B   (+26.9%)
entry-gutenboarding      +213994 B   (+10.4%)   +59623 B   (+10.9%)
entry-domains-landing    +213994 B   (+49.7%)   +59623 B   (+52.6%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~111865 bytes removed 📉 [gzipped])

name                  parsed_size             gzip_size
me                      -213844 B   (-49.5%)   -48213 B   (-45.3%)
plugins                 +145477 B   (+42.4%)   +33382 B   (+35.9%)
signup                  -112334 B   (-41.4%)   -28304 B   (-41.4%)
jetpack-connect         -112334 B   (-16.6%)   -28304 B   (-15.9%)
people                  +111499 B   (+43.3%)   +24861 B   (+35.4%)
plans                    -83720 B   (-15.9%)   -19122 B   (-14.1%)
devdocs                  +82351 B  (+120.9%)   +22113 B  (+119.7%)
stats                    -81416 B    (-9.2%)   -21386 B    (-9.6%)
home                     -81416 B   (-21.7%)   -21386 B   (-21.5%)
settings-writing         -70368 B   (-13.5%)   -18738 B   (-14.1%)
preview                  -65649 B   (-37.6%)   -15057 B   (-32.7%)
marketing                +55687 B   (+14.5%)   +22131 B   (+25.0%)
pages                    +53961 B   (+27.0%)   +13212 B   (+23.6%)
google-my-business       -42907 B   (-13.5%)   -10276 B   (-11.8%)
checkout                 +42141 B    (+3.7%)   +11178 B    (+3.9%)
settings                 -41150 B    (-7.3%)   -11038 B    (-7.5%)
media                    -41150 B    (-9.8%)   -11038 B    (-9.8%)
gutenberg-editor         +34208 B    (+5.1%)    +9558 B    (+5.1%)
security                 -29787 B    (-6.8%)    -6992 B    (-6.1%)
woocommerce              -29218 B    (-1.4%)    -7700 B    (-1.4%)
help                     +22473 B    (+5.1%)    +4896 B    (+4.4%)
settings-performance     +20480 B   (+10.1%)    +5625 B   (+10.3%)
posts                    -19984 B    (-6.3%)    -4983 B    (-6.0%)
happychat                -13616 B    (-5.2%)    -3587 B    (-5.1%)
mailing-lists             -7310 B   (-52.3%)    -2277 B   (-54.2%)
posts-custom              -2299 B    (-0.8%)     -680 B    (-0.9%)
domains                   +1289 B    (+0.1%)     +260 B    (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~260 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
async-load-signup-steps-domains      +1289 B  (+0.6%)     +260 B  (+0.5%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Moment.js Locales (~3979 bytes removed 📉 [gzipped])

name                    parsed_size            gzip_size
moment-locale-en-au        -12567 B  (-90.9%)    -4212 B  (-86.0%)
moment-locale-sw            -1357 B  (-53.9%)     -459 B  (-42.1%)
moment-locale-te            +1126 B  (+97.0%)     +327 B  (+51.7%)
moment-locale-tet           -1024 B  (-44.8%)     -270 B  (-28.2%)
moment-locale-ur            -1009 B  (-42.6%)     -289 B  (-28.3%)
moment-locale-kn             +993 B  (+56.4%)     +275 B  (+31.4%)
moment-locale-gu             +986 B  (+64.9%)     +351 B  (+47.6%)
moment-locale-sq             -858 B  (-39.9%)     -230 B  (-24.7%)
moment-locale-it-ch          -825 B  (-38.6%)     -245 B  (-25.4%)
moment-locale-ms             -822 B  (-37.6%)     -251 B  (-25.9%)
moment-locale-tg             +790 B  (+62.5%)     +292 B  (+42.4%)
moment-locale-my             +777 B  (+57.0%)     +219 B  (+30.5%)
moment-locale-pt-br          -751 B  (-36.3%)     -293 B  (-29.4%)
moment-locale-sr             +735 B  (+56.9%)     +249 B  (+35.4%)
moment-locale-si             +733 B  (+55.2%)     +155 B  (+21.9%)
moment-locale-ug-cn          +731 B  (+44.7%)     +153 B  (+17.6%)
moment-locale-ku             -664 B  (-24.1%)     -174 B  (-15.1%)
moment-locale-tr             -620 B  (-29.4%)      -61 B   (-7.1%)
moment-locale-he             -565 B  (-22.6%)     -210 B  (-19.3%)
moment-locale-sr-cyrl        +491 B  (+24.2%)     +139 B  (+14.6%)
moment-locale-mn             +435 B  (+24.9%)      +60 B   (+6.6%)
moment-locale-x-pseudo       +376 B  (+32.5%)     +253 B  (+42.2%)
moment-locale-kk             +347 B  (+24.5%)     +137 B  (+18.6%)
moment-locale-mk             -295 B  (-14.4%)      -47 B   (-4.9%)
moment-locale-lt             +276 B  (+13.5%)     +290 B  (+35.7%)
moment-locale-me             -275 B  (-11.9%)     -145 B  (-13.2%)
moment-locale-zh-cn          +226 B  (+14.7%)      +70 B   (+8.2%)
moment-locale-uz-latn        -200 B  (-14.7%)     -132 B  (-18.1%)
moment-locale-hr             +185 B   (+9.5%)      +61 B   (+6.9%)
moment-locale-gl             +171 B  (+12.7%)       +3 B   (+0.4%)
moment-locale-fy             +155 B  (+12.3%)      +83 B  (+12.1%)
moment-locale-tzl            +148 B  (+10.0%)      +68 B   (+8.5%)
moment-locale-nl             -147 B   (-6.9%)       -1 B   (-0.1%)
moment-locale-jv             +103 B   (+7.9%)      +17 B   (+2.4%)
moment-locale-sk              +90 B   (+4.4%)      +70 B   (+8.1%)
moment-locale-pl              +65 B   (+3.2%)      +55 B   (+5.9%)
moment-locale-ga              -63 B   (-4.5%)      -34 B   (-4.4%)
moment-locale-th              +54 B   (+2.6%)     -121 B  (-12.3%)
moment-locale-lo              -47 B   (-2.2%)     -164 B  (-16.8%)
moment-locale-sd              +40 B   (+3.0%)      +53 B   (+7.5%)
moment-locale-se              -29 B   (-2.1%)      -47 B   (-6.2%)
moment-locale-hy-am           +12 B   (+0.6%)      +26 B   (+2.8%)

Locale data for moment.js. Unless you are upgrading the moment.js library, changes in these chunks are suspicious.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[ramonjd]

Works as described. Only one small UI behaviour on the hover state I noticed,

If @joanrho is okay with this then it LGTM

[niranjan-uma-shankar]

I'll go ahead and merge this now, but @joanrho please let me know(or open an issue) if the hover action needs to change, and I'll take it as a follow up.

[joanrho]

@niranjan-uma-shankar Where's that link behavior (font weight/size change) coming from?

Looking back at Step 1 at /start/site-type, we have an existing design pattern of text links: cursor change on hover, but no font weight/size change. See screengrab here:

Let's proceed with reusing that pattern in the next iteration. Here's a mockup of what that simple change will look like (I'll open a separate Issue with before/after screengrabs and ping you on it now):