Changing style of dropdown menu items

Kenyon Ralph

unread,

Jan 28, 2022, 9:37:23 PM1/28/22

to repo-d...@googlegroups.com

On Gerrit 3.5.0.1, I can change the header background color and dropdown
menu background color by setting --header-background-color and
--dropdown-background-color in an html block like shown in the example
here:
https://gerrit-review.googlesource.com/Documentation/pg-plugin-dev.html#low-level-style

But I can't figure out how to change the text color of dropdown menu
items. --gr-dropdown-item-color [0] seems like the right variable, but
doesn't do anything.

I'm able to manually change the color with Firefox's developer tools by
changing the color value in this rule:

li.itemAction {
color: var(--gr-dropdown-item_-_color);
}

The underscores in the variable seem odd. I've also tried setting the
color in a way like this in the theme-plugin.js file:

styleElement.innerHTML =
`<template>
<style>
li.itemAction {
color: white;
}
</style>
</template>`;

That doesn't do anything either. Neither does this:

gr-dropdown {
--gr-dropdown-item_-_color: white;
}

Any ideas what I'm doing wrong?

Thanks!

[0]
https://gerrit.googlesource.com/gerrit/+/refs/heads/stable-3.5/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts

Ben Rohlfs

unread,

Jan 31, 2022, 3:49:50 AM1/31/22

to Kenyon Ralph, repo-d...@googlegroups.com

css properties such as --gr-dropdown-item_-_color are an artifact of Polymer betting on css mixins being eventually well supported in browsers:

https://polymer-library.polymer-project.org/1.0/docs/devguide/styling#custom-css-mixins

Unfortunately, css mixins are not and will no be well supported in browsers: https://caniuse.com/?search=%40apply

That is why Polymer has to "polyfill" (different meaning of "poly" here!) this feature. Gerrit 3.5 still has a couple of instances of

--something: {

...some rules...

}

and

@apply something

We are actively migrating away from @apply mixins and from Polymer generally. In fact, --gr-dropdown-item_-_color does not exist anymore at head.

But even at head the color --gr-dropdown-item-color is not meant to be a theme variable. It just allows parent components to provide different values depending on where the dropdown is used. For the main header the variable is set here (at head):

http://google3/third_party/javascript/polygerrit/elements/core/gr-main-header/gr-main-header.ts;l=269;rcl=420721088

Are you trying to change the color of dropdowns everywhere or just in the header?

Anyway, customizing the dropdown text color just seems unsupported. :-( Introducing a --dropdown-text-color var would probably make sense, because otherwise --dropdown-background-color does not make a lot of sense. So you are welcome to file a feature request: https://bugs.chromium.org/p/gerrit/issues/entry. But even if we can prioritize this, then it will only be available in 3.6.

Hope that helps clarify the situation, even though the answer is not great.

-Ben

--
--
To unsubscribe, email repo-discuss...@googlegroups.com
More info at http://groups.google.com/group/repo-discuss?hl=en

---
You received this message because you are subscribed to the Google Groups "Repo and Gerrit Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to repo-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/repo-discuss/49c6bd7f-1cc9-1cbc-435c-d3b352d51788%40codeaurora.org.

Kenyon Ralph

unread,

Jan 31, 2022, 4:08:22 PM1/31/22

to repo-d...@googlegroups.com

We use the color of the Gerrit header (--header-background-color) to
differentiate Gerrit instances.

For example, I'm setting --header-background-color to purple (#800080).
To make the header text more readable on a purple background, I set
--header-text-color to white. But --header-text-color also changes the
text color of the account dropdown menu items (but not the other
dropdown menus), so now the account dropdown menu items are unreadable,
white on white.

So then I set --dropdown-background-color to purple, which changes the
account dropdown menu background to purple making that readable, but the
other dropdown menus still have black text, which is a bit hard to read
on a purple background.

I think this could be fixed either of these ways:

1) --header-background-color does not change the background color of the
account dropdown menu items; or,

2) --header-text-color affects the color of all menu dropdown items, not
just the account dropdown menu.

I think for now my best solution is to use a lighter shade of purple
like #ce93d8 instead of #800080 so that I don't have to change any text
colors.

> Anyway, customizing the dropdown text color just seems unsupported. :-(
> Introducing a --dropdown-text-color var would probably make sense,
> because otherwise --dropdown-background-color does not make a lot of
> sense. So you are welcome to file a feature request:
> https://bugs.chromium.org/p/gerrit/issues/entry

> <https://bugs.chromium.org/p/gerrit/issues/entry>. But even if we can

> prioritize this, then it will only be available in 3.6.
>
> Hope that helps clarify the situation, even though the answer is not great.
>
> -Ben

That helped, thanks!

> <mailto:repo-discuss%2Bunsu...@googlegroups.com>

> More info at http://groups.google.com/group/repo-discuss?hl=en
> <http://groups.google.com/group/repo-discuss?hl=en>
>
> ---
> You received this message because you are subscribed to the Google
> Groups "Repo and Gerrit Discussion" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to repo-discuss...@googlegroups.com

> <mailto:repo-discuss%2Bunsu...@googlegroups.com>.

> To view this discussion on the web visit
> https://groups.google.com/d/msgid/repo-discuss/49c6bd7f-1cc9-1cbc-435c-d3b352d51788%40codeaurora.org

> <https://groups.google.com/d/msgid/repo-discuss/49c6bd7f-1cc9-1cbc-435c-d3b352d51788%40codeaurora.org>.
>

Ben Rohlfs

unread,

Feb 1, 2022, 5:42:41 AM2/1/22

to Kenyon Ralph, repo-d...@googlegroups.com

On https://gerrit-review.googlesource.com/ we are using

--header-text-color: #fff;

It does not affect the account dropdown. Is there a 3.5.0.1 version of Gerrit running somewhere that I can poke at?

-Ben

To unsubscribe from this group and stop receiving emails from it, send an email to repo-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/repo-discuss/7b204f06-19b2-f337-1c72-8d82a3400030%40codeaurora.org.

David Ostrovsky

unread,

Feb 1, 2022, 7:10:31 AM2/1/22

to Repo and Gerrit Discussion

bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:

On https://gerrit-review.googlesource.com/ we are using

--header-text-color: #fff;

It does not affect the account dropdown. Is there a 3.5.0.1 version of Gerrit running somewhere that I can poke at?

Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.

[1] https://review.gerrithub.io/q/status:open+-is:wip

Kenyon Ralph

unread,

Feb 1, 2022, 4:47:18 PM2/1/22

to Repo and Gerrit Discussion

On 2022-02-01 04:10, David Ostrovsky wrote:
> bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:
>
> On https://gerrit-review.googlesource.com/
> <https://gerrit-review.googlesource.com/> we are using
>
> --header-text-color: #fff;
>
> It does not affect the account dropdown. Is there a 3.5.0.1 version
> of Gerrit running somewhere that I can poke at?
>
>
> Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.
>
> [1] https://review.gerrithub.io/q/status:open+-is:wip

In fact review.gerrithub.io is currently displaying the exact situation
that I described. Screenshot attached or at <https://imgur.com/U4osr2D>.

> <https://gerrit.googlesource.com/gerrit/+/refs/heads/stable-3.5/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts <https://gerrit.googlesource.com/gerrit/+/refs/heads/stable-3.5/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_html.ts>>

Screenshot 2022-02-01 at 13-42-02 My Reviews · Gerrit Code Review.png

David Ostrovsky

unread,

Feb 2, 2022, 2:08:19 AM2/2/22

to Repo and Gerrit Discussion

Please don't top post on this list; it's hard to follow the discussion.

kra...@codeaurora.org schrieb am Dienstag, 1. Februar 2022 um 22:47:18 UTC+1:

On 2022-02-01 04:10, David Ostrovsky wrote:
> bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:
>
> On https://gerrit-review.googlesource.com/
> <https://gerrit-review.googlesource.com/> we are using
>
> --header-text-color: #fff;
>
> It does not affect the account dropdown. Is there a 3.5.0.1 version
> of Gerrit running somewhere that I can poke at?
>
>
> Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.
>
> [1] https://review.gerrithub.io/q/status:open+-is:wip

In fact review.gerrithub.io is currently displaying the exact situation
that I described. Screenshot attached or at <https://imgur.com/U4osr2D>.

There is a workaround though: switch to using dark theme: [1],

perform preferences changes and switch to normal theme back.

[1] https://imgur.com/a/Zwjwwfw

Chris Poucet

unread,

Feb 2, 2022, 2:18:34 AM2/2/22

to David Ostrovsky, Ben Rohlfs, Luca Milanesio, Repo and Gerrit Discussion

On Wed, Feb 2, 2022 at 8:08 AM David Ostrovsky <david.o...@gmail.com> wrote:

Please don't top post on this list; it's hard to follow the discussion.

kra...@codeaurora.org schrieb am Dienstag, 1. Februar 2022 um 22:47:18 UTC+1:
On 2022-02-01 04:10, David Ostrovsky wrote:
> bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:
>
> On https://gerrit-review.googlesource.com/
> <https://gerrit-review.googlesource.com/> we are using
>
> --header-text-color: #fff;
>
> It does not affect the account dropdown. Is there a 3.5.0.1 version
> of Gerrit running somewhere that I can poke at?
>
>
> Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.
>
> [1] https://review.gerrithub.io/q/status:open+-is:wip

In fact review.gerrithub.io is currently displaying the exact situation
that I described. Screenshot attached or at <https://imgur.com/U4osr2D>.

There is a workaround though: switch to using dark theme: [1],
perform preferences changes and switch to normal theme back.

[1] https://imgur.com/a/Zwjwwfw

According to Ben this is fixed at head in

https://gerrit-review.googlesource.com/c/gerrit/+/322888

Luca: What does it take to backport this change to 3.5?

- simply chris

--

--
To unsubscribe, email repo-discuss...@googlegroups.com
More info at http://groups.google.com/group/repo-discuss?hl=en

---
You received this message because you are subscribed to the Google Groups "Repo and Gerrit Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to repo-discuss...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/repo-discuss/5558f510-64a2-49f5-8558-3674dbe59604n%40googlegroups.com.

Chris Poucet

unread,

Feb 2, 2022, 2:23:25 AM2/2/22

to David Ostrovsky, Ben Rohlfs, Luca Milanesio, Repo and Gerrit Discussion

On Wed, Feb 2, 2022 at 8:18 AM Chris Poucet <pou...@google.com> wrote:

On Wed, Feb 2, 2022 at 8:08 AM David Ostrovsky <david.o...@gmail.com> wrote:

Please don't top post on this list; it's hard to follow the discussion.

kra...@codeaurora.org schrieb am Dienstag, 1. Februar 2022 um 22:47:18 UTC+1:
On 2022-02-01 04:10, David Ostrovsky wrote:
> bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:
>
> On https://gerrit-review.googlesource.com/
> <https://gerrit-review.googlesource.com/> we are using
>
> --header-text-color: #fff;
>
> It does not affect the account dropdown. Is there a 3.5.0.1 version
> of Gerrit running somewhere that I can poke at?
>
>
> Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.
>
> [1] https://review.gerrithub.io/q/status:open+-is:wip

In fact review.gerrithub.io is currently displaying the exact situation
that I described. Screenshot attached or at <https://imgur.com/U4osr2D>.

There is a workaround though: switch to using dark theme: [1],
perform preferences changes and switch to normal theme back.

[1] https://imgur.com/a/Zwjwwfw

According to Ben this is fixed at head in
https://gerrit-review.googlesource.com/c/gerrit/+/322888

Luca: What does it take to backport this change to 3.5?

Ben told me how to do it. Cherry pick can be found in https://gerrit-review.googlesource.com/c/gerrit/+/329619

David Ostrovsky

unread,

Feb 2, 2022, 3:11:44 PM2/2/22

to Repo and Gerrit Discussion

Chris Poucet schrieb am Mittwoch, 2. Februar 2022 um 08:23:25 UTC+1:

On Wed, Feb 2, 2022 at 8:18 AM Chris Poucet <pou...@google.com> wrote:

On Wed, Feb 2, 2022 at 8:08 AM David Ostrovsky <david.o...@gmail.com> wrote:

Please don't top post on this list; it's hard to follow the discussion.

kra...@codeaurora.org schrieb am Dienstag, 1. Februar 2022 um 22:47:18 UTC+1:
On 2022-02-01 04:10, David Ostrovsky wrote:
> bro...@google.com schrieb am Dienstag, 1. Februar 2022 um 11:42:41 UTC+1:
>
> On https://gerrit-review.googlesource.com/
> <https://gerrit-review.googlesource.com/> we are using
>
> --header-text-color: #fff;
>
> It does not affect the account dropdown. Is there a 3.5.0.1 version
> of Gerrit running somewhere that I can poke at?
>
>
> Gerrit version deployed here: [1] is: 3.5.0.1-4-g1faf95c5d.
>
> [1] https://review.gerrithub.io/q/status:open+-is:wip

In fact review.gerrithub.io is currently displaying the exact situation
that I described. Screenshot attached or at <https://imgur.com/U4osr2D>.

There is a workaround though: switch to using dark theme: [1],
perform preferences changes and switch to normal theme back.

[1] https://imgur.com/a/Zwjwwfw

According to Ben this is fixed at head in
https://gerrit-review.googlesource.com/c/gerrit/+/322888

Luca: What does it take to backport this change to 3.5?
Ben told me how to do it. Cherry pick can be found in https://gerrit-review.googlesource.com/c/gerrit/+/329619

Thanks for the cherry-pick, Chris!

Just to confirm, that with this build: [1], that corresponds to Milutin's commit: [2],

with this version: 3.5.0.1-57-g6481476e5b, account dropdown font is rendered as

expected in both themes.

[1] https://gerrit-ci.gerritforge.com/view/Gerrit/job/Gerrit-bazel-java11-stable-3.5/50/

[2] https://gerrit-review.googlesource.com/c/gerrit/+/329619

Reply all

Reply to author

Forward