DEV: Remove body docked class and its scroll event listener (#29515)

Docking is a leftover from older header code, it looks like it is no
longer used in the app. This helper was registering a scroll event
listener to check if the header should be docked or not. Initially, a
"docked" class was added to the body element. This class persisted
through the lifecycle of the app and the scroll event was doing no
useful work.

Some older themes may still use it in CSS, that will cause a regression,
from a quick look at existing code, the surface area should be small
(2-3 themes). It's worth removing the event listener for performance
reasons. We could possibly add the class "docked" statically to the body
element, but it's redundant. It's best to clean up the relevant CSS in
themes, where applicable.

app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs

@@ -1,9 +1,8 @@
 import Component from "@glimmer/component";
 import { DEBUG } from "@glimmer/env";
-import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { cancel, schedule } from "@ember/runloop";
+import { schedule } from "@ember/runloop";
 import { service } from "@ember/service";
 import { waitForPromise } from "@ember/test-waiters";
 import ItsATrap from "@discourse/itsatrap";
@@ -30,22 +29,18 @@ export default class GlimmerSiteHeader extends Component {
   @service site;
   @service header;
 
-  docking;
   pxClosed;
   headerElement;
 
-  @tracked _dockedHeader = false;
   _animate = false;
   _headerWrap;
   _mainOutletWrapper;
   _swipeMenuOrigin;
   _applicationElement;
   _resizeObserver;
-  _docAt;
 
   constructor() {
     super(...arguments);
-    this.docking = new Docking(this.dockCheck);
 
     if (this.currentUser?.staff) {
       document.body.classList.add("staff");
@@ -238,32 +233,6 @@ export default class GlimmerSiteHeader extends Component {
     });
   }
 
-  @bind
-  dockCheck() {
-    if (this._docAt === undefined || this._docAt === null) {
-      if (!this.headerElement) {
-        return;
-      }
-      this._docAt = this.headerElement.offsetTop;
-    }
-
-    const main = (this._applicationElement ??=
-      document.querySelector(".ember-application"));
-    const offsetTop = main?.offsetTop ?? 0;
-    const offset = window.pageYOffset - offsetTop;
-    if (offset >= this._docAt) {
-      if (!this._dockedHeader) {
-        document.body.classList.add("docked");
-        this._dockedHeader = true;
-      }
-    } else {
-      if (this._dockedHeader) {
-        document.body.classList.remove("docked");
-        this._dockedHeader = false;
-      }
-    }
-  }
-
   @bind
   _animateOpening(panel, event = null) {
     const cloakElement = document.querySelector(".header-cloak");
@@ -394,7 +363,6 @@ export default class GlimmerSiteHeader extends Component {
 
   willDestroy() {
     super.willDestroy(...arguments);
-    this.docking.destroy();
     this.appEvents.off("user-menu:rendered", this, this.animateMenu);
 
     if (this.dropDownHeaderEnabled) {
@@ -442,37 +410,6 @@ export default class GlimmerSiteHeader extends Component {
   </template>
 }
 
-const INITIAL_DELAY_MS = 50;
-const DEBOUNCE_MS = 5;
-class Docking {
-  dockCheck = null;
-  _initialTimer = null;
-  _queuedTimer = null;
-
-  constructor(dockCheck) {
-    this.dockCheck = dockCheck;
-    window.addEventListener("scroll", this.queueDockCheck, { passive: true });
-
-    // dockCheck might happen too early on full page refresh
-    this._initialTimer = discourseLater(this, this.dockCheck, INITIAL_DELAY_MS);
-  }
-
-  @debounce(DEBOUNCE_MS)
-  queueDockCheck() {
-    this._queuedTimer = this.dockCheck;
-  }
-
-  @action
-  destroy() {
-    if (this._queuedTimer) {
-      cancel(this._queuedTimer);
-    }
-
-    cancel(this._initialTimer);
-    window.removeEventListener("scroll", this.queueDockCheck);
-  }
-}
-
 function menuPanelContainsClass(menuPanel) {
   if (!_menuPanelClassesToForceDropdown) {
     return false;

app/assets/stylesheets/common/base/header.scss

@@ -2,10 +2,6 @@
   @include sticky;
   top: 0;
   z-index: z("header");
-
-  .footer-nav-ipad & {
-    top: var(--footer-nav-height, 0px);
-  }
 }
 
 .d-header {

app/assets/stylesheets/common/components/footer-nav.scss

@@ -91,7 +91,7 @@ html.footer-nav-ipad {
     z-index: z("ipad-header-nav") + 1;
   }
 
-  &.docked .d-header-wrap {
+  .d-header-wrap {
     top: var(--footer-nav-height);
   }
 }

spec/system/header_spec.rb

@@ -110,18 +110,6 @@ RSpec.describe "Glimmer Header", type: :system do
     expect(header.get_computed_style_value(".d-header", "--header-offset")).to eq("60px")
   end
 
-  it "body document is permanently docked regardless of scroll positioning" do
-    Fabricate.times(20, :topic)
-    sign_in(current_user)
-    visit "/"
-
-    expect(page).to have_selector("body.docked")
-    page.execute_script("window.scrollBy(0, 1000)")
-    expect(page).to have_selector("body.docked")
-    page.execute_script("window.scrollTo(0, 0)")
-    expect(page).to have_selector("body.docked")
-  end
-
   it "moves focus between tabs using arrow keys" do
     sign_in(current_user)
     visit "/"