Fixes for issues where Extent is not revealed correctly in walkthrough

(closes #1527, closes #1408)

This can happen because
- We were caching rectangles for the map size and container size, and these things could
  be off by a little bit after the user resizes or the sidebar changes size, so we don't
  cache them anymore, we just call getBoundingClientRect() at the time we need the rectangle

This also changes how we treat `revealExtent`:
- These were previously just treated as rectangles, which would be wrong when
  the map rotates. This wasn't too much of an issue, because we didn't ask the
  user to rotate the map during the steps where we would reveal an Extent.
- But now we treat them as polygons and project each corner, so they can
  handle being rotated and resized much better than before.

css/80_app.css

@@ -939,6 +939,7 @@ a.hide-toggle {
   display: flex;
   flex: 0 0 0px;
   flex-flow: column nowrap;
+  order: 99;
 
   padding: 3px 15px;
   border-top: 1px solid #ccc;
@@ -5458,16 +5459,19 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 /* Intro walkthrough
  ----------------------------------------------------- */
 .curtain {
-    z-index: 1000;
-    pointer-events: none;
-    position: absolute;
+  position: absolute;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
 }
 
 .curtain-darkness {
-    pointer-events: all;
-    fill-opacity: 0.7;
-    fill: #222;
-    fill-rule: evenodd;
+  pointer-events: all;
+  fill-opacity: 0.7;
+  fill: #222;
+  fill-rule: evenodd;
 }
 
 .intro-nav-wrap {
@@ -5585,29 +5589,24 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 
 .curtain-tooltip.intro-points-describe ,
 .curtain-tooltip.intro-lines-name_road {
-    top: 133px !important;
+  top: 133px !important;
 }
 
 .tooltip-illustration {
-    height: 80px;
-    width: 200px;
-    margin-left: -20px;
-    margin-top: -10px;
-}
-.ideditor[dir='rtl'] .tooltip-illustration {
-    margin-left: auto;
-    margin-right: -20px;
+  height: 80px;
+  width: 200px;
+  margin-top: -20px;
 }
 
 .huge-modal-button {
-    width: 100%;
-    padding: 20px;
+  width: 100%;
+  padding: 20px;
 }
 
 .huge-modal-button .illustration {
-    height: 100px;
-    width: 100px;
-    color: #7092ff;
+  height: 100px;
+  width: 100px;
+  color: #7092ff;
 }
 
 /* overrides that will only be active during the walkthrough */

modules/ui/UiSidebar.js

@@ -398,43 +398,43 @@ export class UiSidebar {
   /**
    * expand
    * Expands the sidebar
+   * @param  {boolean}  animate? - whether to animate the pane
    */
-  expand(moveMap) {
+  expand(animate) {
     const $sidebar = this.$sidebar;
     if (!$sidebar) return;  // called too early?
 
     if ($sidebar.classed('collapsed')) {
-      this.toggle(moveMap);
+      this.toggle(animate);
     }
   }
 
 
   /**
    * collapse
    * Collapses the sidebar
+   * @param  {boolean}  animate? - whether to animate the pane
    */
-  collapse(moveMap) {
+  collapse(animate) {
     const $sidebar = this.$sidebar;
     if (!$sidebar) return;  // called too early?
 
     if (!$sidebar.classed('collapsed')) {
-      this.toggle(moveMap);
+      this.toggle(animate);
     }
   }
 
 
   /**
    * toggle
    * Toggles the sidebar between expanded/collapsed states
+   * @param  {boolean}  animate? - whether to animate the pane
    */
-  toggle(moveMap) {
+  toggle(animate = true) {
     const $sidebar = this.$sidebar;
     if (!$sidebar) return;  // called too early?
 
-    // Don't allow sidebar to toggle when the user is in the walkthrough.
     const context = this.context;
-    if (context.inIntro) return;
-
     const ui = context.systems.ui;
     const $container = context.container();
 
@@ -451,39 +451,52 @@ export class UiSidebar {
     this._startWidth = startWidth;
     this._lastWidth = startWidth;
 
-    $sidebar
-      .transition()
-      .tween('inspector.toggler', () => {
-        return t => {
-          const setWidth = lerp(t);
+    if (animate) {
+      $sidebar
+        .transition()
+        .tween('inspector.toggler', () => {
+          return t => {
+            const setWidth = lerp(t);
+
+            $sidebar
+              .classed('collapsing', setWidth < MIN_WIDTH)
+              .style('flex-basis', `${setWidth}px`);
+
+            ui.resize();
+            this._lastWidth = setWidth;
+          };
+        })
+        .on('start', () => {
+          $container.classed('resizing', true);
 
           $sidebar
-            .classed('collapsing', setWidth < MIN_WIDTH)
-            .style('flex-basis', `${setWidth}px`);
+            .classed('collapsing', startWidth < MIN_WIDTH)
+            .classed('collapsed', false)
+            .style('flex-basis', `${startWidth}px`);
+        })
+        .on('end interrupt', () => {
+          $container.classed('resizing', false);
+
+          $sidebar
+            .classed('collapsing', false)
+            .classed('collapsed', endCollapsed)
+            .style('flex-basis', `${expandWidth}px`);  // done resize, put expanded width back here
 
           ui.resize();
-          this._lastWidth = setWidth;
-        };
-      })
-      .on('start', () => {
-        $container.classed('resizing', true);
+          this._storePreferences();
+        });
 
-        $sidebar
-          .classed('collapsing', startWidth < MIN_WIDTH)
-          .classed('collapsed', false)
-          .style('flex-basis', `${startWidth}px`);
-      })
-      .on('end interrupt', () => {
-        $container.classed('resizing', false);
+    } else {  // no animation
+      $container.classed('resizing', false);
 
-        $sidebar
-          .classed('collapsing', false)
-          .classed('collapsed', endCollapsed)
-          .style('flex-basis', `${expandWidth}px`);  // done resize, put expanded width back here
+      $sidebar
+        .classed('collapsing', false)
+        .classed('collapsed', endCollapsed)
+        .style('flex-basis', `${expandWidth}px`);  // done resize, put expanded width back here
 
-        ui.resize();
-        this._storePreferences();
-      });
+      ui.resize();
+      this._storePreferences();
+    }
   }