Overriding CSS style

[Antoine Musso]

Hello,

I am trying to customize the voting chips to change the font weight and size. My last attempt was with Gerrit 2.x and I went to edit the GerritSite.css:

/** Vote scores, trying to improve accessibility */
.voteChip {
  font-size: 1.1em;
  font-weight: bold;
}

And eventually I found out that GerritSite.css is only for styling the header/footer, aka the main document. I have learned the hard way that everything else are in shadow dom (new concept to me) which completely isolate those DOM from the main stylesheet.

The html for the component seems to be defined in polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts

    .voteChip {
      display: flex;
      justify-content: center;
      margin-right: var(--spacing-s);
      padding: 1px;
      @apply --vote-chip-styles;
      border: 1px solid var(--border-color);
    }

Looking a bit at Polymer documentation, it seems the sole way to style a component is to have them define each of the css property that can be stylable using a variable and the end user can then override the var. So I would need to add to Gerrit core:

      .voteChip {
    +    font-size: var(--font-size);
    +    font-weight: var(--font-weight);
      }

I am suspicious that any style tweak that has not been envisioned in Gerrit core would require a code adjust and a new release of Gerrit.  There must be another way to override a Polymer component styling but I haven't found any lead.

Maybe that is how Polymer is thought about: locking down customization of components?

An alternative is to crawl through the levels of shadow dom to find the component and dynamically adjust its style, but that sounds like "a lot" of effort.

Have I missed a Polymer API that would let me easily retrieve the defined component (ie without crawling the dom) and then adjust its style?

Any guidance welcome :]

-- 
Antoine "hashar" Musso
Release Engineering

[Luca Milanesio]

On 17 Mar 2021, at 09:59, Antoine Musso <amu...@wikimedia.org> wrote:

Hello,

I am trying to customize the voting chips to change the font weight and size. My last attempt was with Gerrit 2.x and I went to edit the GerritSite.css:

/** Vote scores, trying to improve accessibility */
.voteChip {
  font-size: 1.1em;
  font-weight: bold;
}

And eventually I found out that GerritSite.css is only for styling the header/footer, aka the main document. I have learned the hard way that everything else are in shadow dom (new concept to me) which completely isolate those DOM from the main stylesheet.

The html for the component seems to be defined in polygerrit-ui/app/elements/shared/gr-label-info/gr-label-info_html.ts

    .voteChip {
      display: flex;
      justify-content: center;
      margin-right: var(--spacing-s);
      padding: 1px;
      @apply --vote-chip-styles;
      border: 1px solid var(--border-color);
    }

Looking a bit at Polymer documentation, it seems the sole way to style a component is to have them define each of the css property that can be stylable using a variable and the end user can then override the var. So I would need to add to Gerrit core:

      .voteChip {
    +    font-size: var(--font-size);
    +    font-weight: var(--font-weight);
      }

I am suspicious that any style tweak that has not been envisioned in Gerrit core would require a code adjust and a new release of Gerrit.  There must be another way to override a Polymer component styling but I haven't found any lead.

Hi Antoine,

We had exactly the same problem when migrating from v3.0 to v3.1, when Shadow-DOM was introduced.

An issue somehow related is [1] where we tried to do the same for other style we needed to customise.

At the moment, the only supported solution is to use a CDN path for static assets (see [2]).

It requires a bit of preparation where you inject the changes on the Polymer component definition by tweaking the CSS parts of it, but it works.

Also, it is problematic for upgrades, because you would need to repeat the tweak every time you install a new version of Gerrit.

It has been raised already, also at ESC level, and discussions are ongoing: we do not have an official answer/solution yet, apart from introducing yet another variable, which would require a new change in Gerrit and a new release.

HTH

Luca.

[1] https://bugs.chromium.org/p/gerrit/issues/detail?id=13836

[2] https://gerrit-documentation.storage.googleapis.com/Documentation/3.3.2/config-gerrit.html#gerrit.cdnPath

Maybe that is how Polymer is thought about: locking down customization of components?

An alternative is to crawl through the levels of shadow dom to find the component and dynamically adjust its style, but that sounds like "a lot" of effort.

Have I missed a Polymer API that would let me easily retrieve the defined component (ie without crawling the dom) and then adjust its style?

Any guidance welcome :]

-- 
Antoine "hashar" Musso
Release Engineering

--
--
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/42e15c12-6568-ecd2-d19c-2f756e8a95f4%40wikimedia.org.

[Ben Rohlfs]

Hi Antoine,

 I am trying to customize the voting chips to change the font weight and size.

Why is that important to you? I would be interested in understanding the underlying use-case. Maybe there is something else that we can do about it other than style tweaks. 

We want to get rid of @apply support, but as long as it still exists, you can make use of

@apply --vote-chip-styles;

https://gerrit.googlesource.com/gerrit/+/master/polygerrit-ui/app/styles/gr-voting-styles.ts

So you can add this rule to a document style tag:

  --vote-chip-styles: {
    font-size: 1.1em;
    font-weight: bold;

  }

But yes, if you want arbitrary customization, then you would typically have to add a new css variable to the Gerrit codebase.

Crawling through all the levels of shadow DOM is actually not that hard. It is a bit of a hack, but easy to do and maybe a good option, if you don't want to go the official route. Plugin endpoints sometimes get you a bit closer to the correct shadow root, so you can call hook() or registerCustomComponent().

If we had a list of use-cases that allows us to understand better why such customizations are important to the community, then we could also come up with a dedicated plugin API for that. But we are reluctant to do that, because 50% of the 77 plugin API methods were just built for one customer with one use-case (see spring cleaning email from last week). 

-Ben

 

I am suspicious that any style tweak that has not been envisioned in Gerrit core would require a code adjust and a new release of Gerrit.  There must be another way to override a Polymer component styling but I haven't found any lead.

Maybe that is how Polymer is thought about: locking down customization of components?

An alternative is to crawl through the levels of shadow dom to find the component and dynamically adjust its style, but that sounds like "a lot" of effort.

Have I missed a Polymer API that would let me easily retrieve the defined component (ie without crawling the dom) and then adjust its style?

Any guidance welcome :]

-- 
Antoine "hashar" Musso
Release Engineering

--

[Antoine Musso]

Le 17/03/2021 à 11:07, Luca Milanesio a écrit :
> We had exactly the same problem when migrating from v3.0 to v3.1, when
> Shadow-DOM was introduced.
> An issue somehow related is [1] where we tried to do the same for
> other style we needed to customise.
>
> At the moment, the only supported solution is to use a CDN path for
> static assets (see [2]).
> It requires a bit of preparation where you inject the changes on the
> Polymer component definition by tweaking the CSS parts of it, but it
> works.
> Also, it is problematic for upgrades, because you would need to repeat
> the tweak every time you install a new version of Gerrit.
>
> It has been raised already, also at ESC level, and discussions are
> ongoing: we do not have an official answer/solution yet, apart from
> introducing yet another variable, which would require a new change in
> Gerrit and a new release.
>
> HTH
>
> Luca.
>
> [1] https://bugs.chromium.org/p/gerrit/issues/detail?id=13836
> <https://bugs.chromium.org/p/gerrit/issues/detail?id=13836>
> [2]
> https://gerrit-documentation.storage.googleapis.com/Documentation/3.3.2/config-gerrit.html#gerrit.cdnPath

> <https://gerrit-documentation.storage.googleapis.com/Documentation/3.3.2/config-gerrit.html#gerrit.cdnPath>

Hello Luca,

Thank you for the answer, that indeed sounds like extra CSS variable
just have to be defined in Gerrit code itself.  Given everything should
probably not be customizable, I guess for my specific use case (make
votes nicer) I will circle back with people that knows about
accessibility / colorblindness  and see whether we can craft a proposal
to enhance Gerrit itself.  After all, that would benefit everyone.

I wasn't aware of the gerrit.cdnPath , that is a nice hack to maintain a
fork of the UI thanks for suggesting it.  Then we are moving toward
using the released Gerrit as-is, experience has shown we don't have
quite the bandwith to maintain a fork copy of the Java code and I don't
see up maintaining hacks on top of PolyGerrit :]

I am happy to see the topic is being discussed via ESC. It surely
doesn't have an easy solution. I will come back with a patch for Gerrit
core I guess, that sounds like the saner way right now.

Thx!

[Luca Milanesio]

> On 26 Mar 2021, at 10:49, Antoine Musso <amu...@wikimedia.org> wrote:
>
> Le 17/03/2021 à 11:07, Luca Milanesio a écrit :
>> We had exactly the same problem when migrating from v3.0 to v3.1, when Shadow-DOM was introduced.
>> An issue somehow related is [1] where we tried to do the same for other style we needed to customise.
>>
>> At the moment, the only supported solution is to use a CDN path for static assets (see [2]).
>> It requires a bit of preparation where you inject the changes on the Polymer component definition by tweaking the CSS parts of it, but it works.
>> Also, it is problematic for upgrades, because you would need to repeat the tweak every time you install a new version of Gerrit.
>>
>> It has been raised already, also at ESC level, and discussions are ongoing: we do not have an official answer/solution yet, apart from introducing yet another variable, which would require a new change in Gerrit and a new release.
>>
>> HTH
>>
>> Luca.
>>
>> [1] https://bugs.chromium.org/p/gerrit/issues/detail?id=13836 <https://bugs.chromium.org/p/gerrit/issues/detail?id=13836>
>> [2] https://gerrit-documentation.storage.googleapis.com/Documentation/3.3.2/config-gerrit.html#gerrit.cdnPath <https://gerrit-documentation.storage.googleapis.com/Documentation/3.3.2/config-gerrit.html#gerrit.cdnPath>
>
> Hello Luca,
>
> Thank you for the answer, that indeed sounds like extra CSS variable just have to be defined in Gerrit code itself. Given everything should probably not be customizable, I guess for my specific use case (make votes nicer) I will circle back with people that knows about accessibility / colorblindness and see whether we can craft a proposal to enhance Gerrit itself. After all, that would benefit everyone.
>
> I wasn't aware of the gerrit.cdnPath , that is a nice hack to maintain a fork of the UI thanks for suggesting it.

It can be also “scripted” so that you don’t have to maintain a fork at all.
The injection of extra CSS variable is a trivial addition that can be fully automated.

> Then we are moving toward using the released Gerrit as-is, experience has shown we don't have quite the bandwith to maintain a fork copy of the Java code and I don't see up maintaining hacks on top of PolyGerrit :]

Sure, nobody like doing that, agreed.

>
> I am happy to see the topic is being discussed via ESC. It surely doesn't have an easy solution. I will come back with a patch for Gerrit core I guess, that sounds like the saner way right now.

No problem, I’ll add to the agenda.

Luca.