Fix animation of the inspector's details popup when transitioning int…

…o full-screen mode

CHANGELOG.md

@@ -19,6 +19,7 @@
 - Fixed a sticky tooltip for "Enable view inspection" button on inspecting start
 - Fixed the delayed popup display after calling the `hide()` method
 - Fixed positioning of popups with `position: pointer`
+- Fixed animation of the inspector's details popup when transitioning into full-screen mode
 
 ## 1.0.0-beta.81 (06-03-2024)
 

src/extensions/inspector.js

@@ -175,8 +175,22 @@ export default (host) => {
         selectedTreeViewLeaf = leaf || null;
 
         if (leaf) {
-            popup.show();
-            popup.freeze();
+            const { innerWidth, innerHeight } = window;
+            const { left, top, width, height } = popup.el.getBoundingClientRect();
+
+            // lock current popup's position
+            popup.el.style.top = `${top}px`;
+            popup.el.style.left = `${left}px`;
+            popup.el.style.right = `${innerWidth - (left + width)}px`;
+            popup.el.style.bottom = `${innerHeight - (top + height)}px`;
+            popup.frozen = true;
+
+            // use rAF to make a transition work
+            requestAnimationFrame(() => {
+                popup.show();
+                popup.freeze();
+            });
+
             delete cancelHintEl.dataset.alt;
         } else if (inspectByQuick) {
             host.inspectMode.set(false);
@@ -255,7 +269,7 @@ export default (host) => {
                 cursor = cursor.parent;
             }
 
-            host.view.render(el, {
+            return host.view.render(el, {
                 view: 'context',
                 modifiers: [viewTree(el, {
                     selectTreeViewLeaf,

src/extensions/inspector/popup.css

@@ -4,10 +4,11 @@
     max-width: 650px !important;
     display: grid;
     grid-template-areas:
-        "toolbar toolbar"
-        "props-config data-context";
-    grid-template-columns: 4fr 6fr;
+        "sidebar toolbar toolbar"
+        "sidebar props-config data-context";
     grid-template-rows: auto 1fr;
+    grid-template-columns: 0px 4fr 6fr;
+
     gap: 1px;
     padding: 1px;
     border-radius: 2px;
@@ -34,14 +35,10 @@
     left: 20px !important;
     right: 20px !important;
     bottom: 20px !important;
-    height: calc(100vh - 52px); /* Safari scrolls popup content otherwise */
     max-height: none !important;
     max-width: none !important;
-    transition: .1s ease-in-out;
-    transition-property: top, left, right, bottom;
-    grid-template-areas:
-        "sidebar toolbar toolbar"
-        "sidebar props-config data-context";
+    transition: .125s ease;
+    transition-property: top, left, right, bottom, grid-template-rows, grid-template-columns;
     grid-template-rows: auto minmax(20%, 1fr);
     grid-template-columns: minmax(290px, 25%) 4fr 6fr;
 }

src/views/layout/popup.js

@@ -322,7 +322,7 @@ export default function(host) {
         updatePosition() {
             const pointerPosition = this.position === 'pointer';
 
-            if (!this.visible || (!pointerPosition && !this.lastTriggerEl)) {
+            if (!this.visible || (pointerPosition ? this.frozen : !this.lastTriggerEl)) {
                 return;
             }