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
PostHog · Mar 12, 2024 · ef3b213 · ef3b213
1 parent fb8b5b5
commit ef3b213
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 30 deletions.
diff --git 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
@@ -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<number>): 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<serializedNodeWithId> | 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
@@ -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