From 21285db89d24144969f901b8594518530ffcacb0 Mon Sep 17 00:00:00 2001 From: Gijs Kruitbosch Date: Thu, 18 Feb 2021 16:33:20 +0000 Subject: [PATCH] Bug 1693406 - fix select dropdown styling in proton when the page customizes it, r=emilio Differential Revision: https://phabricator.services.mozilla.com/D105642 --- browser/base/content/browser.css | 4 + .../test/forms/browser_selectpopup_colors.js | 415 ++++++++++-------- toolkit/actors/SelectParent.jsm | 19 +- toolkit/content/widgets/menupopup.js | 1 + 4 files changed, 241 insertions(+), 198 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index e2195c0d9ccd..1898510fb506 100644 --- a/browser/base/content/browser.css +++ b/browser/base/content/browser.css @@ -1035,6 +1035,10 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbut scrollbar-width: var(--content-select-scrollbar-width, auto); } +#ContentSelectDropdown > menupopup::part(arrowscrollbox) { + background-image: var(--content-select-background-image, none); +} + /* Indent options in optgroups */ .contentSelectDropdown-ingroup .menu-iconic-text { padding-inline-start: 2em; diff --git a/browser/base/content/test/forms/browser_selectpopup_colors.js b/browser/base/content/test/forms/browser_selectpopup_colors.js index 2f60c80f7c38..30bfc42e6dae 100644 --- a/browser/base/content/test/forms/browser_selectpopup_colors.js +++ b/browser/base/content/test/forms/browser_selectpopup_colors.js @@ -1,175 +1,180 @@ -const PAGECONTENT_COLORS = - "" + - ""; +const gSelects = { + PAGECONTENT_COLORS: + "" + + "", -const PAGECONTENT_COLORS_ON_SELECT = - "" + - ""; + PAGECONTENT_COLORS_ON_SELECT: + "" + + "", -const TRANSPARENT_SELECT = - "" + - ""; + TRANSPARENT_SELECT: + "" + + "", -const OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT = - "" + - ""; + OPTION_COLOR_EQUAL_TO_UABACKGROUND_COLOR_SELECT: + "" + + "", -const GENERIC_OPTION_STYLED_AS_IMPORTANT = - "" + - ""; + GENERIC_OPTION_STYLED_AS_IMPORTANT: + "" + + "", -const TRANSLUCENT_SELECT_BECOMES_OPAQUE = - "" + - ""; + TRANSLUCENT_SELECT_BECOMES_OPAQUE: + "" + + "", -const TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR = - "" + - ""; + TRANSLUCENT_SELECT_APPLIES_ON_BASE_COLOR: + "" + + "", -const DISABLED_OPTGROUP_AND_OPTIONS = - "" + - ""; + DISABLED_OPTGROUP_AND_OPTIONS: + "" + + "", -const SELECT_CHANGES_COLOR_ON_FOCUS = - "" + - ""; + SELECT_CHANGES_COLOR_ON_FOCUS: + "" + + "", -const SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS = - "" + - ""; + SELECT_BGCOLOR_ON_SELECT_COLOR_ON_OPTIONS: + "" + + "", -const SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT = - "" + - ""; + SELECT_STYLE_OF_OPTION_IS_BASED_ON_FOCUS_OF_SELECT: + "" + + "", -const SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT = - "" + - " var select = document.getElementById('one');" + - " select.addEventListener('focus', () => select.style.color = 'red');" + - ""; + SELECT_STYLE_OF_OPTION_CHANGES_AFTER_FOCUS_EVENT: + "" + + " var select = document.getElementById('one');" + + " select.addEventListener('focus', () => select.style.color = 'red');" + + "", -const SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND = - ""; + SELECT_COLOR_OF_OPTION_CHANGES_AFTER_TRANSITIONEND: + "", -const SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND = - ""; + SELECT_TEXTSHADOW_OF_OPTION_CHANGES_AFTER_TRANSITIONEND: + "", -const SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW = - ""; + SELECT_TRANSPARENT_COLOR_WITH_TEXT_SHADOW: + "", -let SELECT_LONG_WITH_TRANSITION = - ""; + SELECT_LONG_WITH_TRANSITION: + ""; + return rv; + })(), -const SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT = ` + SELECT_INHERITED_COLORS_ON_OPTIONS_DONT_GET_UNIQUE_RULES_IF_RULE_SET_ON_SELECT: ` -`; +`, -const SELECT_SCROLLBAR_PROPS = ` + SELECT_SCROLLBAR_PROPS: ` -`; +`, +}; function getSystemColor(color) { // Need to convert system color to RGB color. @@ -282,17 +288,26 @@ async function openSelectPopup(select) { return { tab, menulist, selectPopup }; } -async function testSelectColors(select, itemCount, options) { +async function testSelectColors(selectID, itemCount, options) { + let select = gSelects[selectID]; let { tab, menulist, selectPopup } = await openSelectPopup(select); + let arrowSB = selectPopup.shadowRoot.querySelector( + ".menupopup-arrowscrollbox" + ); if (options.waitForComputedStyle) { let property = options.waitForComputedStyle.property; let value = options.waitForComputedStyle.value; await TestUtils.waitForCondition(() => { + let node = ["background-image", "background-color"].includes(property) + ? arrowSB + : selectPopup; info( - ` to have ${property}: ${value}`); + return getComputedStyle(node)[property] == value; + }, `${selectID} - Waiting for element has styles applied to