Gin Compatibility: Account for "open" vertical toolbar

Working on a patch.

MR15 replaces --gin-toolbar-width-collapsed with --gin-toolbar-x-offset and removes -4px/-3px margin adjustments which seem no longer necessary.

Gin actually uses --gin-toolbar-x-offset to position sub-menus. It is calculated using --gin-toolbar-width (for open toolbar) and --gin-toolbar-width-collapsed (for closed toolbar), and it also takes the screen width into account.

This change also (mostly) fixed another issue I noticed. Before the change, sub-menus had excessive margin/indentation with Environment Indicator enabled at screen widths < 976px — basically the "tablet" breakpoint (below, left). The extra margin was replaced, though, with a small negative margin that caused sub-menus to slightly overlap the border (below, middle). To resolve that, I removed the "-4px" margin adjustment that was previously introduced by #3309626: Integration with Gin Toolbar and Admin Toolbar → (below, right).

This worked well at all screen widths, at least with Gin 3.0-rc1. So much so, that I also removed the (seemingly redundant?) -3px margin adjustment that was being added to <li>s by environment_indicator.js.

I still plan to test with Gin 3.0-beta5, but it seems like the margin adjustments are no longer needed. I can only assume something in Gin changed that addressed the extra margin described in #3309626: Integration with Gin Toolbar and Admin Toolbar → .

I'm hoping someone else on Gin 3.0-rc1 can test these changes.

After testing with Gin 3.0-beta5, here's what I've learned:

The extra margin described in #3309626: Integration with Gin Toolbar and Admin Toolbar → still appears in beta5, but is no longer an issue in Gin 3.0-rc1. So, Environment Indicator no longer needs to include the negative margin adjustment for sites on Gin 3.0-rc1+. We can still support earlier versions with a fallback value:

/* TODO: Remove this when it's no longer necessary to support Gin 3.0@beta. */
@media (min-width: 61em) {
  [dir="ltr"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
    margin-left: var(--gin-toolbar-x-offset, calc(var(--ginVerticalToolbarOffset) - 7px));
  }

  [dir="rtl"] .gin--vertical-toolbar .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
    margin-right: var(--gin-toolbar-x-offset, calc(var(--ginVerticalToolbarOffset) - 7px));
  }
}

This consolidates the previous negative margin adjustments (-7px in total) in CSS, rather than having -4px in CSS, and -3px in JS. The media query prevents the margin issues at smaller breakpoints described in #4.

The margin adjustment is only applied to the fallback value (--ginVerticalToolbarOffset for beta5 and earlier), since RC1's --gin-toolbar-x-offset doesn't need it. In fact, when we use --gin-toolbar-x-offset, we're doing exactly what Gin is doing (as of RC1), so this block becomes redundant once it's no longer necessary to support older versions, and it can be removed entirely (per the TODO comment).

There is a more recent issue #3367093-8: Gin compatibility: Small screen vertical toolbar submenu items margin too big → where the css has been removed along with the js to support the latest versions of Gin, which is currently at 3.0.0-rc5.