Handle offcanvas differently at lower widths

@nod_ maybe it offcanvas was badly named. And we should address that but...
A big part of the approved UX designs were that you could see the entire screen when the tray was opened.
We added #2782885: No indication what page element is being configured with Outside In so you could see the active element.
On smaller widths this is just not possible. The admin toolbar menu also does where at smaller widths it doesn't tried to displace the body.

I think because the forms in offcanvas are going to be wider that the admin menu we should let it take over the entire screen at smaller widths.

Here is a first try at that. It has to explicitly set the width of the tray to 100% to get around dialog.css which does

@media all and (max-width: 48em) { /* 768px */
  .ui-dialog {
    width: 92% !important;
  }
}

Whoops! Fixed the JavaScript error

Putting under parent to organize separating offcanvas into core dialog system.

The patch work but it has the weird effect of when you open the tray and the tray doesn't have a vertical scroll(most of the time?) the page behind the dialog scrolls.

@drpal nice fix. I just changed the class name from
js-stop-scrolling to js-tray-open.

Thought we should a more general name so we could use it for other css we would want when the tray is open.

Ok I gave a try at the test but it doesn't seem to work.

Ok. It looks the resizing is actually working. isVisible doesn't seem to be working

I have left a couple debugging lines in this patch that makes screenshots(you will have to update path to use)

Here are the resulting screenshots
Narrow width without tray open

Narrow width with tray open

So maybe isVisible is the wrong thing to check here

Ok I re-wrote the test to check for the padding on the main-canvas-wrapper element instead or isVisible(). Basically the main-canvas-wrapper element should NOT have padding when at more narrow width.

I had to test for +-20px on the actual breakpoint because stark theme failed exactly on the break point. I wanted to test 2 themes like the rest of the tests in this module.

@tim.plunkett thanks for review.
fixed comment
Also here is a test only patch.
/me crosses fingers

Upload patches in wrong order. TEST_ONLY patch failed which was expected.

@alexpott thanks for the review and screenshots!

The content is totally squashed on the right if just above the width

This was caused by the dialog.css

@media all and (max-width: 48em) { /* 768px */
  .ui-dialog {
    width: 92% !important;
  }
}

It forces all dialogs to 92% at lower widths.

I have changed our css to override 92% to 100% for our dialog at max-width: 48em. Really it doesn't make sense at a lower width. Sense our css is loaded later it will override dialog.css

if you start editing at really low width and then expand out the settings tray doesn't pad right

I realized that on 'dialogContentResize.outsidein' we also need to pad the body. Fixed

In #26 I forgot to update the width used in the test. There also unrelated failures b/c 8.3.x was broken but hopefully that is fixed.

Random test failure,ArgumentPlaceholderUpdatePathTest, back to RTBC, rinse and repeat ;)

Just a re-roll b/c #2784571: Outside-in Accessibility: Allow escape from edit mode with ESC key was just committed and it changed all event namespaces in offcanvas.js from ".outside_in" to ".offcanvas.js"

Re-roll was wrong. There were few commits to this module happening very quickly on Friday.

Added to comments to document minDisplaceWidth and related css as per #39

Ok, I see what happened. Even though from #37 to #41 there was only a comment change in the meantime #2815831: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas got committed and that css selector needed to select the "main-canvas" from an id to a class.

The test needed to updated. This patch does that.

Since this was reverted it needs to go back to 8.3.x.

Test failed in #52 because #2815831: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas
was not backported to 8.2.x. I added comment on that issue.

Here is patch the fixes the comment lengths. I somehow messed up my eslint settings :(

For any reviewers and committers, I think this is ready to be RTBC again for 8.3.x but can't be committed to 8.2.x until #2815831: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas is backported to 8.2.x

@Wim Leers thanks!

Ok for any committers out there. #2815831: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas should probably be committed to 8.2.x first. then this issue can be committed to 8.3.x and 8.2.x.
Right now this only applies to 8.3.x because #2815831 was not committed to 8.2.x.

Great #2815831: Move Off-canvas related CSS from drupal.outside_in library to drupal.off_canvas was committed to 8.2.x also

So now outside_in should identical again for 8.2.x and 8.3.x. Can do git check just in case:
git diff 8.2.x..8.3.x core/modules/outside_in/

This should now be good to go for both branches.

Changing to new settings_tray.module component. @drpal thanks for script help! :)