From 7b03799838cba224c41eaca60342db21d535bf8c Mon Sep 17 00:00:00 2001
From: Pedro Augusto <109992671+aug-dev@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:43:08 -0300
Subject: [PATCH] fix(google): fix positioning of control header on Google
 desktop (#478)

* Fix spacing issue on #slim_appbar control (Google Desktop)

* Fix control overlap on Google Desktop

* Remove margin from control when there is no blocked entries

* Fix small issue with spacing

* Remove unnecessary code repetition on Control Handlers (Google Desktop)

* Fix rule using :not() selector

* Fix controls when there is an additional label bar

* Remove additional :scope pseudo-class
---
 src/scripts/search-engines/google-desktop.ts | 89 ++++++++++++++------
 1 file changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/scripts/search-engines/google-desktop.ts b/src/scripts/search-engines/google-desktop.ts
index 6960e9c90..7b28209e9 100644
--- a/src/scripts/search-engines/google-desktop.ts
+++ b/src/scripts/search-engines/google-desktop.ts
@@ -1,6 +1,7 @@
 import { type CSSAttribute, css } from "../styles.ts";
 import type { SerpHandler } from "../types.ts";
 import {
+  type ControlHandler,
   type EntryHandler,
   handleSerp,
   hasDarkBackground,
@@ -100,6 +101,64 @@ const regularEntryHandler: Pick<
   },
 };
 
+const regularControlHandlers: ControlHandler[] = [
+  {
+    target: "#result-stats",
+    style: {
+      // Displays on the next line when part of the "Tools" bar
+      "#hdtbMenus :is(.BfdGL.ZkEmPc + div) &": {
+        display: "block",
+      },
+      "&:not(#hdtbMenus &)": {
+        paddingLeft: "8px",
+      },
+    },
+  },
+  {
+    target: "#slim_appbar:empty",
+    style: (controlRoot) => {
+      controlRoot.className = css({
+        "#slim_appbar > &:not(:only-child)": {
+          display: "none",
+        },
+      });
+      // Set appropriate margin when "Tools" bar is present:
+      controlRoot.closest("#appbar")?.classList.add(
+        css({
+          // Not present
+          "&:not(.hdtb-ab-o)": {
+            margin: "16px 0",
+          },
+          // Present
+          "&:is(.hdtb-ab-o)": {
+            margin: "42px 0 -12px",
+          },
+          // Remove margin when no entry has been blocked
+          "&:has(.ub-hidden)": {
+            margin: "0 !important",
+          },
+        }),
+      );
+      // Set appropriate margin when there is an additional labels bar
+      if (controlRoot.matches(":is(:is(div + #tU52Vb) :scope)")) {
+        controlRoot.closest("#appbar")?.classList.add(
+          css({
+            margin: "0 0 24px 0 !important",
+          }),
+        );
+        controlRoot.closest("#slim_appbar")?.classList.add(
+          css({
+            ".hdtb-ab-o &": {
+              padding: "48px 0 0 0",
+            },
+            padding: "24px 0 0 0",
+          }),
+        );
+      }
+    },
+  },
+];
+
 const desktopSerpHandlers: Record<string, SerpHandler> = {
   // All
   "": handleSerp({
@@ -124,17 +183,7 @@ const desktopSerpHandlers: Record<string, SerpHandler> = {
       },
     },
     controlHandlers: [
-      {
-        target: "#result-stats",
-      },
-      {
-        target: "#slim_appbar:empty",
-        style: {
-          "#slim_appbar > &:not(:only-child)": {
-            display: "none",
-          },
-        },
-      },
+      ...regularControlHandlers,
       {
         target: "#botabar",
         position: "afterend",
@@ -548,11 +597,7 @@ const desktopSerpHandlers: Record<string, SerpHandler> = {
   // Books
   bks: handleSerp({
     globalStyle: desktopGlobalStyle,
-    controlHandlers: [
-      {
-        target: "#result-stats",
-      },
-    ],
+    controlHandlers: [...regularControlHandlers],
     entryHandlers: [
       {
         target: ".Yr5TG",
@@ -631,11 +676,7 @@ const desktopSerpHandlers: Record<string, SerpHandler> = {
         whiteSpace: "nowrap",
       },
     },
-    controlHandlers: [
-      {
-        target: "#result-stats",
-      },
-    ],
+    controlHandlers: [...regularControlHandlers],
     entryHandlers: [
       // Regular
       {
@@ -684,11 +725,7 @@ const desktopSerpHandlers: Record<string, SerpHandler> = {
   // Videos
   vid: handleSerp({
     globalStyle: desktopGlobalStyle,
-    controlHandlers: [
-      {
-        target: "#result-stats",
-      },
-    ],
+    controlHandlers: [...regularControlHandlers],
     entryHandlers: [
       {
         target: ".g, .iHxmLe",