insin / control-panel-for-twitter

Browser extension which gives you more control over your Twitter timeline and adds missing features and UI improvements - available for desktop and mobile browsers

Home Page:https://jbscript.dev/control-panel-for-twitter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hide the non-dismissable streaming/spaces indicator in the timeline on mobile

insin opened this issue · comments

With the indicator

Indicator DOM

Screenshot 2024-04-06 at 2 12 32 am

Timeline DOM

The height of the header is adjusted to offset timeline contents to make room for the indicator

Screenshot 2024-04-06 at 2 13 27 am

Without the indicator

Indicator DOM

The [role="grid"] element has [aria-hidden="true"]

Screenshot 2024-04-06 at 2 17 16 am

Timeline DOM

Header height when there's nothing to offset timeline contents to display

Screenshot 2024-04-06 at 2 18 08 am

Implementation

  • While on the timeline. observe the [role="grid"] element for changes to its [aria-hidden] attribute
  • Toggle a Live class on <body> based on the presence of an [aria-hidden] attribute (missing = on, present = off)
  • Use body.Live as a hook to hide the indicator and adjust the timeline header back to its non-indicator height

This is what displays ion desktop when someone is streaming

The Live on X box appears dynamically, popping back into existence every time you change page

Home:

Other pages:

DOM: