From ef3b2137380004420a92dd0aff77caeed86d9d97 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Tue, 12 Mar 2024 08:03:24 +0000 Subject: [PATCH] feat: keyboard color matches nav bar color (#20842) * feat: keyboard color matches nav bar color * update snapshots * don't set colours unless they're provided --- .../__snapshots__/transform.test.ts.snap | 2 +- .../transformer/screen-chrome.ts | 64 ++++++++++++++++++- .../mobile-replay/transformer/transformers.ts | 34 +++------- 3 files changed, 70 insertions(+), 30 deletions(-) diff --git a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap index c12c4d7de72d8..45a3fe627f7fa 100644 --- a/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap +++ b/ee/frontend/mobile-replay/__snapshots__/transform.test.ts.snap @@ -258,7 +258,7 @@ exports[`replay/transform transform can convert navigation bar 1`] = ` { "attributes": { "data-rrweb-id": 12345, - "style": "border-width: 4px;border-radius: 10px;border-color: #ee3ee4;border-style: solid;color: #ee3ee4;width: 100px;height: 30px;position: fixed;left: 11px;top: 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-around;color:white;", + "style": "border-width: 4px;border-radius: 10px;border-color: #ee3ee4;border-style: solid;color: #ee3ee4;width: 100px;height: 30px;position: fixed;left: 11px;top: 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-around;color:black;", }, "childNodes": [ { diff --git a/ee/frontend/mobile-replay/transformer/screen-chrome.ts b/ee/frontend/mobile-replay/transformer/screen-chrome.ts index fd64712e9a224..16274ca85383e 100644 --- a/ee/frontend/mobile-replay/transformer/screen-chrome.ts +++ b/ee/frontend/mobile-replay/transformer/screen-chrome.ts @@ -1,9 +1,25 @@ -import { NodeType, serializedNodeWithId, wireframeNavigationBar, wireframeStatusBar } from '../mobile.types' +import { + keyboardEvent, + NodeType, + serializedNodeWithId, + wireframeNavigationBar, + wireframeStatusBar, +} from '../mobile.types' import { isLight } from './colors' -import { NAVIGATION_BAR_ID, STATUS_BAR_ID } from './transformers' +import { + _isPositiveInteger, + BACKGROUND, + KEYBOARD_ID, + makePlaceholderElement, + NAVIGATION_BAR_ID, + STATUS_BAR_ID, +} from './transformers' import { ConversionContext, ConversionResult } from './types' import { asStyleString, makeStylesString } from './wireframeStyle' +export let navigationBackgroundColor: string | undefined = undefined +export let navigationColor: string | undefined = undefined + function spacerDiv(idSequence: Generator): serializedNodeWithId { const spacerId = idSequence.next().value return { @@ -45,6 +61,9 @@ export function makeNavigationBar( const homeCircle = makeFakeNavButton('⚪', context) const screenButton = makeFakeNavButton('⬜️', context) + navigationBackgroundColor = wireframe.style?.backgroundColor + navigationColor = isLight(navigationBackgroundColor || BACKGROUND) ? 'black' : 'white' + return { result: { type: NodeType.Element, @@ -56,7 +75,7 @@ export function makeNavigationBar( 'flex-direction:row', 'align-items:center', 'justify-content:space-around', - 'color:white', + 'color:' + navigationColor, ]), 'data-rrweb-id': _id, }, @@ -118,3 +137,42 @@ export function makeStatusBar( context, } } + +export function makeOpenKeyboardPlaceholder( + mobileCustomEvent: keyboardEvent & { + timestamp: number + delay?: number + }, + context: ConversionContext +): ConversionResult | null { + if (!mobileCustomEvent.data.payload.open) { + return null + } + + const shouldAbsolutelyPosition = + _isPositiveInteger(mobileCustomEvent.data.payload.x) || _isPositiveInteger(mobileCustomEvent.data.payload.y) + + return makePlaceholderElement( + { + id: KEYBOARD_ID, + type: 'placeholder', + label: 'keyboard', + height: mobileCustomEvent.data.payload.height, + width: _isPositiveInteger(mobileCustomEvent.data.payload.width) + ? mobileCustomEvent.data.payload.width + : '100vw', + style: { + backgroundColor: navigationBackgroundColor, + color: navigationBackgroundColor ? navigationColor : undefined, + }, + }, + [], + { + timestamp: context.timestamp, + idSequence: context.idSequence, + styleOverride: { + ...(shouldAbsolutelyPosition ? {} : { bottom: true }), + }, + } + ) +} diff --git a/ee/frontend/mobile-replay/transformer/transformers.ts b/ee/frontend/mobile-replay/transformer/transformers.ts index 03e3f7d782309..96aea3e36c06e 100644 --- a/ee/frontend/mobile-replay/transformer/transformers.ts +++ b/ee/frontend/mobile-replay/transformer/transformers.ts @@ -42,7 +42,7 @@ import { wireframeText, wireframeToggle, } from '../mobile.types' -import { makeNavigationBar, makeStatusBar } from './screen-chrome' +import { makeNavigationBar, makeOpenKeyboardPlaceholder, makeStatusBar } from './screen-chrome' import { ConversionContext, ConversionResult } from './types' import { asStyleString, @@ -56,7 +56,7 @@ import { makeStylesString, } from './wireframeStyle' -const BACKGROUND = '#f3f4ef' +export const BACKGROUND = '#f3f4ef' const FOREGROUND = '#35373e' /** @@ -93,7 +93,7 @@ const NAVIGATION_BAR_PARENT_ID = 7 export const NAVIGATION_BAR_ID = 8 // the keyboard so that it is still before the nav bar const KEYBOARD_PARENT_ID = 9 -const KEYBOARD_ID = 10 +export const KEYBOARD_ID = 10 export const STATUS_BAR_PARENT_ID = 11 export const STATUS_BAR_ID = 12 @@ -124,28 +124,10 @@ export const makeCustomEvent = ( const adds: addedNodeMutation[] = [] const removes = [] if (mobileCustomEvent.data.payload.open) { - const shouldAbsolutelyPosition = - _isPositiveInteger(mobileCustomEvent.data.payload.x) || - _isPositiveInteger(mobileCustomEvent.data.payload.y) - const keyboardPlaceHolder = makePlaceholderElement( - { - id: KEYBOARD_ID, - type: 'placeholder', - label: 'keyboard', - height: mobileCustomEvent.data.payload.height, - width: _isPositiveInteger(mobileCustomEvent.data.payload.width) - ? mobileCustomEvent.data.payload.width - : '100vw', - }, - [], - { - timestamp: mobileCustomEvent.timestamp, - idSequence: globalIdSequence, - styleOverride: { - ...(shouldAbsolutelyPosition ? {} : { bottom: true }), - }, - } - ) + const keyboardPlaceHolder = makeOpenKeyboardPlaceholder(mobileCustomEvent, { + timestamp: mobileCustomEvent.timestamp, + idSequence: globalIdSequence, + }) if (keyboardPlaceHolder) { adds.push({ parentId: KEYBOARD_PARENT_ID, @@ -272,7 +254,7 @@ function makeWebViewElement( return makePlaceholderElement(labelledWireframe, children, context) } -function makePlaceholderElement( +export function makePlaceholderElement( wireframe: wireframe, children: serializedNodeWithId[], context: ConversionContext