tor-browser

commit 0dd03dceb8a1fcc0f584acad0fa0348122af3c63
parent ea18f3782f55eb028c944684f0f0d439f4d52304
Author: Thomas Wisniewski <twisniewski@mozilla.com>
Date:   Wed,  8 Oct 2025 22:50:22 +0000

Bug 1936429 - add a CSS intervention for diadora.com to hide extra scrollbars; r=webcompat-reviewers,ksenia

Differential Revision: https://phabricator.services.mozilla.com/D268000

Diffstat:
M
browser/extensions/webcompat/data/interventions.json
 | 
17
+++++++++++++++++
A
browser/extensions/webcompat/injections/css/bug1936429-diadora.com-fix-doubled-scrollbars.css
 | 
19
+++++++++++++++++++
A
testing/webcompat/interventions/tests/test_1936429_diadora_com.py
 | 
38
++++++++++++++++++++++++++++++++++++++

3 files changed, 74 insertions(+), 0 deletions(-)
diff --git a/browser/extensions/webcompat/data/interventions.json b/browser/extensions/webcompat/data/interventions.json
@@ -4085,6 +4085,23 @@
       }
     ]
   },
+  "1936429": {
+    "label": "diadora.com",
+    "bugs": {
+      "1936429": {
+        "issue": "extra-scrollbars",
+        "matches": ["*://www.diadora.com/*"]
+      }
+    },
+    "interventions": [
+      {
+        "platforms": ["all"],
+        "content_scripts": {
+          "css": ["bug1936429-diadora.com-fix-doubled-scrollbars.css"]
+        }
+      }
+    ]
+  },
   "1939248": {
     "label": "rosasthai.com",
     "bugs": {
diff --git a/browser/extensions/webcompat/injections/css/bug1936429-diadora.com-fix-doubled-scrollbars.css b/browser/extensions/webcompat/injections/css/bug1936429-diadora.com-fix-doubled-scrollbars.css
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * diadora.com - doubled scrollbars on the site's page selector.
+ *
+ * Bug #1936429 - https://bugzilla.mozilla.org/show_bug.cgi?id=1936429
+ *
+ * The site uses -webkit-scrollbar to hide extra scrollbars, rather than the
+ * standard CSS to do that. We can do it for them to improve UX on the site.
+ */
+.select2-results {
+  scrollbar-width: none;
+}
+.select2-container--default .select2-results > .select2-results__options {
+  scrollbar-width: thin;
+  overflow-x: none;
+}
diff --git a/testing/webcompat/interventions/tests/test_1936429_diadora_com.py b/testing/webcompat/interventions/tests/test_1936429_diadora_com.py
@@ -0,0 +1,38 @@
+import pytest
+
+URL = "https://www.diadora.com/en/us/men/?srule=sorting-in-season&prefn1=descrizioneCategoriaMerceologica&prefv1=Shoes"
+
+POPUPS_CSS = "#CybotCookiebotDialog, #CybotCookiebotDialog *, #modal-geolocation-change, #modal-geolocation-change *, .modal-backdrop, .modal-backdrop *"
+SELECT_CSS = ".paginationNumbers .select2.select2-container"
+CONTAINER_CSS = ".select2-results"
+
+
+async def get_container_width_difference(client):
+    await client.navigate(URL, wait="none")
+    client.hide_elements(POPUPS_CSS)
+    client.click(client.await_css(SELECT_CSS, is_displayed=True))
+    container = client.await_css(CONTAINER_CSS)
+    return client.execute_script(
+        """
+      return arguments[0].getBoundingClientRect().width - arguments[0].firstChild.getBoundingClientRect().width;
+    """,
+        container,
+    )
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.need_visible_scrollbars
+@pytest.mark.asyncio
+@pytest.mark.with_interventions
+async def test_enabled(client):
+    # the site applies 10px of padding to the scrollable area.
+    assert 10 == await get_container_width_difference(client)
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.need_visible_scrollbars
+@pytest.mark.asyncio
+@pytest.mark.without_interventions
+async def test_disabled(client):
+    # the inner container will be more than 10px smaller if there is an extra scrollbar.
+    assert 10 < await get_container_width_difference(client)