Scrollbar size is Fixed inside Replay browser and Firefox in windows

[anikdhabal]

closes: #8905
currently ::-webkit-scrollbar is not supported by firefox. Currently, styling scrollbars for Firefox is available with scrollbar-width and scrollbar-color properties.
Replay:-
https://app.replay.io/recording/scrollbar-size-is-fixed--cd001945-9e6d-47b8-87d9-8819df900c96

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 11, 2023 at 8:24PM (UTC)

[replay-io]

E2E Tests

58 replays were recorded for 92d0f79.

1 Failed

object_preview-01: expressions in the console after time warping

    ```
    locator.waitFor: Timeout 15000ms exceeded.
    =========================== logs ===========================
    waiting for selector "[data-test-name="Message"]:has-text('Proxy{}') >> [data-test-name="LogContents"] >> [data-test-name="ExpandableChildren"] [data-test-name="KeyValue"] >> nth=0" to be visible
    ============================================================
    ```
  </ol>
</details>

57 Passed

• cypress-01: Test basic cypress reporter functionality
• breakpoints-01: Test basic breakpoint functionality
• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint
• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one
• breakpoints-05: Test interaction of breakpoints with debugger statements
• breakpoints-06: Test log point in a sourcemapped file
• breakpoints-07: rewind and seek using command bar and console messages
• breakpoints-08: should be temporarily disabled
console_async: support console evaluations in async frames

    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/c6cc0d52-15d0-4efa-ae3b-692434885ffe>console_dock_node: Should show the correct docking behavior for recordings without video</a></li>
<li><a href=https://app.replay.io/recording/c2f5493b-c4f9-4f13-ae98-aed8b35f2b17>console_dock: Should show the correct docking behavior for recordings with video</a></li>
<li><a href=https://app.replay.io/recording/076e5a26-0ef8-4b8e-9a56-08440fb2d574>console_errors: Test that errors and warnings from various sources are shown in the console</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/8c34d250-aa9a-4ee3-a641-ce46a19e635b>console_eval: support console evaluations</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/0c07c782-8b23-45cd-8a17-b38ac8accf72>console_warp-01: should support warping to console messages</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/612a3124-8da3-4921-938b-501b02a9c3f8>console_warp-02: support pausing, warping, stepping and evaluating console messages</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/4bd65313-e872-4512-bac0-91a75e6da553>console-expressions-01: should cache input eager eval and terminal expressions per instance</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/44fee606-f84b-4a14-a01c-3d20f1254596>focus_mode-01: should filter messages as regions based on the active focus mode</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/6c9b8f0d-5803-4cb1-9c18-4dabb9ca0a46>highlighter: element highlighter works everywhere</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/74c44fe9-d47b-4b52-823f-4a6fa5140d85>inspector-01: Test that scopes are rerendered</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/cab48bb5-e398-46c8-a3f2-7dece2c35985>inspector-02: element picker and iframe behavior</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/80d6e8bb-110c-4883-a6b5-227211f9502a>inspector-03: Test that styles for elements can be viewed</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/f03bcfc1-9425-4318-8217-12857c409e9f>inspector-04: Test that styles for elements can be viewed</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/c809d27c-cf7a-468a-b48a-43f029f8b8e3>inspector-05: Test that styles for elements can be viewed</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/5714b058-8319-487b-9e12-dd45d00d02a2>inspector-06: Test that styles for elements can be viewed</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/42681dd2-3383-49eb-8da3-c9b29a28002b>inspector-07: Test that styles for elements can be viewed</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/10d2af56-15c1-4052-9321-482b7550e36b>logpoints-01: log-points appear in the correct order and allow time warping</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/0c5f6030-42aa-4a49-abbd-05bed38ab76d>logpoints-02: conditional log-points</a></li>
<li><a href=https://app.replay.io/recording/e6b75b67-ee28-4e31-8395-2a5bc52d9c6a>logpoints-03: should display event properties in the console</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/e95302d8-4cdf-420c-9927-fd0a6b40a45b>logpoints-04: should display exceptions in the console</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/5529afa3-8043-4994-a42d-95c6b02c6541>logpoints-05: should auto-complete based on log point location</a></summary>
  <ol type="1">
    
    ```
    expect(received).toContain(expected) // indexOf
    
    Expected value: "arrayGlobal"
    Received array: []
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/89ff0c0b-3da6-4830-95b1-4c29d8cb0200>logpoints-06: should be temporarily disabled</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/c0bba713-c78e-46e8-bc0b-6d58593b7c6b>logpoints-07: should use the correct scope in auto-complete</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/197ecdc3-b19f-4a8e-8c24-7f058f344d26>logpoints-08: should support jumping directly to a hit point via the capsule input</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/87a5b149-b487-4a3c-bab7-b9b12dfedd46>node_console-01: Basic node console behavior</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/ceaee738-a375-4be2-aeb5-43af32c2c919>node_console-02: uncaught exceptions should show up</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/978953d6-98df-41fe-8852-d6343cbe5b77>node_logpoint-01: Basic node logpoints</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/95a4815f-9384-42c1-a6cf-5ed3f120edfe>node_logpoint-02: Node exception logpoints</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/32402a04-5896-4885-8f26-bdea148ed774>node_object_preview: Showing console objects in node</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/5cc15273-6abf-485a-8601-be6f57854f45>node_spawn: Basic subprocess spawning</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/7820dcac-9b7e-4c02-9b26-863f8197b598>node_stepping-01: Test stepping in async frames and async call stacks</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: 5
    Received: 2
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/26c55e65-8d42-4ab0-99c6-f686e11124b3>node_worker-01: make sure node workers don't cause crashes</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/9fe500f7-afa0-4b57-adc7-c15a7da929e7>object_preview-02: should allow objects in scope to be inspected</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/600e7891-2e44-4148-95ee-a53478985798>object_preview-03: Test previews when switching between frames and stepping</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBeGreaterThan(expected)
    
    Expected: > 0
    Received:   0
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/5ee741e2-bd5e-4a61-acda-f6f65221049f>object_preview-04: Test scope mapping and switching between generated/original sources</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/f37eba7a-25d8-4b4c-84bb-377e52bfc02c>object_preview-05: Should support logging objects as values</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/5fc3c91c-d192-47a5-9b51-1fe02d4e13ff>react_devtools: Test React DevTools.</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/5a899ccf-60aa-4cd2-aa82-79f3af1ef5b0>repaint: repaints the screen screen when stepping over code that modifies the DOM</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/8b0af35a-21bb-4705-841b-f8417d90f864>resizable-panels-01: Left side Toolbar should be collapsible</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/71d2cdd1-4f5a-4c33-94a6-2b1910642213>scopes_rerender: Test that scopes are rerendered</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/750f97e9-b1b8-4e3f-9ab7-7707b9625162>sourcemap_stacktrace: Test that stacktraces are sourcemapped</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/c96c8aea-f1e1-4a5a-9add-3878381318ab>stacking: Element highlighter selects the correct element when they overlap</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<li><a href=https://app.replay.io/recording/94875dd1-6365-4433-80f3-02efb9a29a27>stepping-01: Test basic step-over/back functionality</a></li>
<details>
  <summary><a href=https://app.replay.io/recording/9bb265db-0dc9-4ced-8a5d-472caa8815b8>stepping-02: Test fixes for some simple stepping bugs</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/0ecb4753-f813-4676-9192-956a417d5051>stepping-03: Stepping past the beginning or end of a frame should act like a step-out</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/72329c59-e69a-4727-b6f1-482c7f89a5d7>stepping-04: Test stepping in a frame other than the top frame</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: "true"
    Received: "false"
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/245f5734-6814-4d39-b555-f40227516f17>stepping-05: Test stepping in pretty-printed code</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBeGreaterThan(expected)
    
    Expected: > 0
    Received:   0
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/98087954-7a6d-4fc3-990f-c9ca72c7ea89>stepping-06: Test stepping in async frames and async call stacks</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBe(expected) // Object.is equality
    
    Expected: true
    Received: false
    ```
  </ol>
</details>

View test run on Replay ↗︎

Snapshot Tests

2 replays were recorded for 92d0f79.

2 Failed

should handle too many points to find

    ```
    locator.getAttribute: Timeout 5000ms exceeded.
    =========================== logs ===========================
    waiting for selector "[data-test-id=PointPanel-68] >> [data-test-name=BadgePickerButton]"
    ============================================================
    ```
  </ol>
</details>
<details>
  <summary><a href=https://app.replay.io/recording/1e8f71ec-60fd-4eb6-a916-157b840badcc>should render search results properly for lines with multiple breakable column positions</a></summary>
  <ol type="1">
    
    ```
    expect(received).toBeFocused()
    ```
  </ol>
</details>

0 Passed

View test run on Replay ↗︎

[jasonLaster]

Thanks @anikdhabal this looks like a promising solution. Could you share before/after screenshots as well?

NOTE: I don't think that this will fix this issue, but seems related
replayio/gecko-dev#746

[anikdhabal]

Before:-

After:-

@jasonLaster

[anikdhabal]

Thanks @anikdhabal this looks like a promising solution. Could you share before/after screenshots as well?

NOTE: I don't think that this will fix this issue, but seems related replayio/gecko-dev#746

Yes It will not fix this issue, but I've checked that this styling property can fixed it.

[jasonLaster]

@anikdhabal could you provide another before/after that more similar? For instance same window, viewport, theme...

[anikdhabal]

Before:-

@anikdhabal could you provide another before/after that more similar? For instance same window, viewport, theme...

Before:-

After:-

[bvaughn]

I wish there was a better way to scope this than * but I don't suppose there is.