From de352cbcf08bee81fe3977c24a19e67ea8086021 Mon Sep 17 00:00:00 2001
From: vykes-mac <47489215+vykes-mac@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:09:17 -0400
Subject: [PATCH] Logged in Performance Profiler: Update page selector to
include search icon (#94919)
* update page selector to include search icon and match design more closely
* disable tab control when loading
* fix metric tab layout shift
* fix search icon size and color
* header alignment issues
* disable controls when site unlaunched
* move inline css to css class
---
.../performance/components/PageSelector.tsx | 49 ++++++++++++-------
.../components/device-tab-control/index.tsx | 7 ++-
.../components/device-tab-control/style.scss | 18 ++++++-
.../hosting/performance/site-performance.tsx | 4 +-
client/hosting/performance/style.scss | 47 ++++++++++++++++--
.../components/metric-tab-bar/style_v2.scss | 32 ++++++------
6 files changed, 118 insertions(+), 39 deletions(-)
diff --git a/client/hosting/performance/components/PageSelector.tsx b/client/hosting/performance/components/PageSelector.tsx
index eda9427dc21e5..6ee41be19b3f1 100644
--- a/client/hosting/performance/components/PageSelector.tsx
+++ b/client/hosting/performance/components/PageSelector.tsx
@@ -1,4 +1,6 @@
import { SearchableDropdown } from '@automattic/components';
+import { Icon } from '@wordpress/components';
+import { search } from '@wordpress/icons';
import { useTranslate } from 'i18n-calypso';
import { ComponentProps } from 'react';
@@ -10,24 +12,35 @@ export const PageSelector = ( props: ComponentProps< typeof SearchableDropdown >
{ translate( 'Page' ) }
- (
-
- { item.label }
- { item.path }
-
- ) }
- />
+
+
(
+
+ { item.label }
+ { item.path }
+
+ ) }
+ />
+
+
+
+ { translate( 'Device' ) }
) }
-
+
{ options.map( ( option ) => {
return (
{
};
const isMobile = ! useDesktopBreakpoint();
+ const disableControls = performanceReport.isLoading || isInitialLoading || ! isSitePublic;
const pageSelector = (
{
const url = new URL( window.location.href );
@@ -278,6 +279,7 @@ export const SitePerformance = () => {
diff --git a/client/hosting/performance/style.scss b/client/hosting/performance/style.scss
index 1bb5683a67bfa..d6ad6919dcf35 100644
--- a/client/hosting/performance/style.scss
+++ b/client/hosting/performance/style.scss
@@ -82,8 +82,9 @@ $section-max-width: 1224px;
display: flex;
gap: 24px;
flex-wrap: wrap;
- align-items: start;
+ align-items: center;
justify-content: space-between;
+ margin-bottom: 16px;
.site-performance__page-selector {
display: flex;
@@ -91,7 +92,7 @@ $section-max-width: 1224px;
flex-grow: 1;
justify-content: flex-end;
gap: 10px;
- max-height: 40px;
+ max-height: 36px;
@media (max-width: $break-medium) {
flex-direction: column;
@@ -104,6 +105,12 @@ $section-max-width: 1224px;
width: 100%;
}
}
+
+
+ }
+
+ .components-base-control {
+ margin: 0 !important;
}
.navigation-header-title {
@@ -111,12 +118,24 @@ $section-max-width: 1224px;
align-items: center;
justify-content: space-between;
}
+
+ .site-performance__page-selector-search-icon {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ align-self: start;
+ z-index: 2;
+ height: 100%;
+ margin-top: 6px;
+ pointer-events: none;
+ }
}
.site-performance__navigation-header.navigation-header {
width: auto;
padding-bottom: 0;
- margin-bottom: 16px;
.gridicon {
fill: var(--color-neutral-100);
@@ -139,15 +158,28 @@ $section-max-width: 1224px;
.site-performance__page-selector-drowdown {
max-width: 240px;
min-width: 240px;
+ margin: 0;
.components-combobox-control__suggestions-container {
position: relative;
z-index: 1;
background: var(--color-surface);
+
+ .components-flex {
+ height: 36px;
+ }
+
+ }
+
+ input.components-combobox-control__input[type="text"] {
+ height: 34px;
+ padding-right: 30px;
+ font-size: 0.875rem;
}
.components-form-token-field__suggestions-list {
max-height: initial !important;
+ box-shadow: inset 0 -1px 0 0 var(--color-neutral-50);
}
.components-form-token-field__suggestions-list li {
@@ -158,3 +190,12 @@ $section-max-width: 1224px;
max-width: unset;
}
}
+
+.site-performance__page-selector-container {
+ position: relative;
+ display: flex;
+
+ @media (max-width: $break-medium) {
+ width: 100%;
+ }
+}
diff --git a/client/performance-profiler/components/metric-tab-bar/style_v2.scss b/client/performance-profiler/components/metric-tab-bar/style_v2.scss
index b39cd3269f490..f53437c3202fa 100644
--- a/client/performance-profiler/components/metric-tab-bar/style_v2.scss
+++ b/client/performance-profiler/components/metric-tab-bar/style_v2.scss
@@ -13,6 +13,7 @@ $blueberry-color: #3858e9;
button {
color: inherit;
}
+
}
.metric-tab-bar-v2__tab {
@@ -22,25 +23,33 @@ $blueberry-color: #3858e9;
flex-grow: 1;
padding: 16px 22px 16px 22px;
width: 100%;
-
+ border: 1px solid transparent;
&:not(.active) {
border-bottom: 1px solid var(--gutenberg-gray-100, #f0f0f0);
+ &:not(:nth-child(-n+2)) {
+ border-top-color: transparent;
+ }
+
&:last-child {
- border-bottom: unset;
+ border-bottom-color: transparent;
+ }
+
+ &.metric-tab-bar-v2__performance {
+ border-bottom-color: transparent;
}
+
}
&.active {
/* stylelint-disable-next-line scales/radii */
border-radius: 6px;
- border: 1.5px solid $blueberry-color;
+ border-color: transparent;
+ outline: 1.5px solid $blueberry-color;
position: relative;
- margin-left: -1px;
- width: 101%;
& + .metric-tab-bar-v2__tab {
- border-top: none;
+ border-top-color: transparent;
}
}
@@ -87,14 +96,7 @@ $blueberry-color: #3858e9;
margin-bottom: 16px;
/* stylelint-disable-next-line scales/radii */
border-radius: 6px;
- border: 1px solid var(--studio-gray-5);
- &:not(.active) {
- border-color: var(--studio-gray-5);
- }
- &.active {
- width: 100%;
- margin-left: unset;
- }
+ outline: 1px solid var(--studio-gray-5);
}
.metric-tab-bar-v2__tab-container {
@@ -103,6 +105,6 @@ $blueberry-color: #3858e9;
border-radius: 6px;
.metric-tab-bar-v2__tab:has(+ .metric-tab-bar-v2__tab.active) {
- border-bottom: none;
+ border-bottom-color: transparent;
}
}