Drupal.displace() should set CSS Variables indicating displacement values

+1, we should update the css variables before the event though

Not sure what happened with the files here.

reupdating the patch from #4

it was on purpose, it got deleted somehow from the issue summary.

moved the prop change before the event trigger + small refactor

I do wonder if there is a performance hit.

We have a debounce on the resize event but are the props updated fast enough. Going to the style props is pretty slow. Might want to figure out which edge changed (if any) to avoid needless updates.

forgot to update a patch for #10. anyway going with an other approach.

I tried to use the new css variable to handle the toolbar offset of the body/html element. Went mostly well but ran into troubles because of how tableheader interracts with the offsets object. That means i went with a different approach, making Drupal.displace.offsets smarter and making sure that whenever a value is assigned to top/left/bottom/right the corresponding CSS custom variable is also updated. With this code it's possible to replace a bit of code from the toolbar and move that piece from the JS to the CSS:

body { padding-top: var(--drupal-displace--offset-top, 0px); }
html { scroll-padding-top: var(--drupal-displace--offset-top, 0px); }

this is not part of this patch because toolbar should use it's own variable to mess with the body padding because not everything that displace the offset top might move the body down (I guess).

One question is around the naming. Do we have a naming convention for css variables yet? Should we use logical properties names (start/end) instead of left/right?

That being said, I'm assuming it's possible to make the change here, and then when/if there are formal conventions for naming the CSS variables, we can then update the code at that time (assuming its before beta)?

That works for me, we'll need to check with Lauriii. It opens the box of how to document/expose custom css variables names (scope?) and purpose

Reviewed patch #15 and +1 for RTBC, but leaving the status as postponed per #16.

There are 2 main followup issues I'd recommend here:

1. Add support for CSS logical properties (block/inline-start/end). This would allow projects to utilize the displacement library without having to account for language direction differences.
2. Use the calculated displacement values to set scroll-padding values, which would allow the displacment library to work more seamlessly with the CSS scroll-snap properties and JavaScript scrolling methods

I updated the variable name on displace.es6.js and ran yarn run build:js to rebuild displace.js automatically.

Still needs work for adding tests though.

Tests looks good to me! can't RTBC the whole patch but the test part is good to go.

Screenshots of patch #24 in place:

Admin toolbar sets displacement of 39px.

Opening the manage menu adds another 40px to our custom property.

Shrinking the window reduces offset-top back to 39px and sets the offset-left to 240 (239px width + 1px border-right).

Inspecting Drupal.displace.offsets object shows 4 values with getters & setters.

Trying to add a new custom value doesn't error, but also doesn't succeed.

RTBC, pending tests

1. +++ b/core/misc/displace.es6.js
   @@ -26,22 +26,64 @@
       *
   

   Nit: I guess we could remove the extra newline.

2. +++ b/core/misc/displace.es6.js
   @@ -139,31 +181,21 @@
   +   * @param {bool} [broadcast=true]
       *   When true or undefined, causes the recalculated offsets values to be
       *   broadcast to listeners.
   

   The comment should be updated as well

Committed f8c91fd and pushed to 10.0.x. Thanks!