From 3628e62348c0cdedb00ce1c9b55f05e2d8fee1fe Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 14:06:17 +0100
Subject: [PATCH 01/17] Debug logging
---
src/common/VisualViewportCSSVariables.tsx | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/common/VisualViewportCSSVariables.tsx b/src/common/VisualViewportCSSVariables.tsx
index 88a3c3853..ca265748e 100644
--- a/src/common/VisualViewportCSSVariables.tsx
+++ b/src/common/VisualViewportCSSVariables.tsx
@@ -25,9 +25,11 @@ const VisualViewPortCSSVariables = () => {
useEffect(() => {
// If we remove the iOS check then we should look carefully at resize performance.
if (!window.visualViewport || !isIOS()) {
+ console.log("not iOS");
return;
}
const resizeHandler = () => {
+ console.log("resizeHandler");
const { width, height } = window.visualViewport ?? {};
let style = document.getElementById(styleId);
if (!style) {
From 5848e9efe6177be328b7580f52aec64f680f3b8f Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 15:09:08 +0100
Subject: [PATCH 02/17] Set overflow as hidden
---
src/App.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/App.css b/src/App.css
index 4e75be2c2..8f1103d49 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,6 +36,7 @@ body,
width: 100%;
/* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */
height: var(--ios-vvh, var(--webkit-vvh, 100vh));
+ overflow: hidden;
}
body {
overflow: hidden;
From 55b5d3c748618a2816048693d37f215ef80c6bb5 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 15:12:41 +0100
Subject: [PATCH 03/17] Use visual viewport css for Android
not only iOS
---
src/common/VisualViewportCSSVariables.tsx | 11 +----------
1 file changed, 1 insertion(+), 10 deletions(-)
diff --git a/src/common/VisualViewportCSSVariables.tsx b/src/common/VisualViewportCSSVariables.tsx
index ca265748e..7954b94ed 100644
--- a/src/common/VisualViewportCSSVariables.tsx
+++ b/src/common/VisualViewportCSSVariables.tsx
@@ -7,29 +7,20 @@ import { useEffect } from "react";
const styleId = "vvp-style";
-const isIOS = (): boolean =>
- /iPad|iPhone|iPod/.test(navigator.platform) ||
- (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-
/**
* Maintains CSS variables for the visual viewport width and height.
* Use with fallbacks, e.g. var(--ios-vvh, 100vh)
* https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
*
- * This is important for iOS where we want to avoid the keyboard being
- * drawn over the toolbar at the bottom.
- *
* We skip it on other platforms and rely on the fallback.
*/
const VisualViewPortCSSVariables = () => {
useEffect(() => {
// If we remove the iOS check then we should look carefully at resize performance.
- if (!window.visualViewport || !isIOS()) {
- console.log("not iOS");
+ if (!window.visualViewport) {
return;
}
const resizeHandler = () => {
- console.log("resizeHandler");
const { width, height } = window.visualViewport ?? {};
let style = document.getElementById(styleId);
if (!style) {
From be63ccaf4c93c501e10f4a8b29642c2d2ea22c23 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 15:21:00 +0100
Subject: [PATCH 04/17] Try using 100svh for height
---
src/App.css | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/App.css b/src/App.css
index 8f1103d49..bf4c29d21 100644
--- a/src/App.css
+++ b/src/App.css
@@ -35,7 +35,8 @@ body,
.Workbench {
width: 100%;
/* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */
- height: var(--ios-vvh, var(--webkit-vvh, 100vh));
+ height: 100svh;
+ /* height: var(--ios-vvh, var(--webkit-vvh, 100vh)); */
overflow: hidden;
}
body {
From a9759d6645218b3fdd636c1dbe7142218a44a70f Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 16:13:24 +0100
Subject: [PATCH 05/17] Add resize content config in viewport
---
index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 149dbcbe5..0368c8820 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%BASE_URL%favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
<meta name="theme-color" content="#6c4bc1" />
<title>micro:bit Python Editor</title>
<meta property="og:title" content="micro:bit Python Editor" />
From 2f49f26e6341e8ac2534416faffb21f24c72cb62 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 16:29:39 +0100
Subject: [PATCH 06/17] Apply svh and fallback
---
src/App.css | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/App.css b/src/App.css
index bf4c29d21..de13894a8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,6 +16,13 @@
format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
+/* Needed for the height below */
+@supports (height: 100svh) {
+ :root {
+ --full-svh: 100svh;
+ }
+}
+
/* Needed for the fallbacks below */
@supports (height: -webkit-fill-available) {
:root {
@@ -35,8 +42,7 @@ body,
.Workbench {
width: 100%;
/* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */
- height: 100svh;
- /* height: var(--ios-vvh, var(--webkit-vvh, 100vh)); */
+ height: var(--full-svh, var(--ios-vvh, var(--webkit-vvh, 100vh)));
overflow: hidden;
}
body {
From acaa12b780238eac15ce5c6426820fed614c00d9 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 16:57:28 +0100
Subject: [PATCH 07/17] Set 100svh for height for non-iOS
---
src/App.css | 11 ++-------
src/common/VisualViewportCSSVariables.tsx | 30 +++++++++++++++--------
2 files changed, 22 insertions(+), 19 deletions(-)
diff --git a/src/App.css b/src/App.css
index de13894a8..f6e01dd71 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,13 +16,6 @@
format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
-/* Needed for the height below */
-@supports (height: 100svh) {
- :root {
- --full-svh: 100svh;
- }
-}
-
/* Needed for the fallbacks below */
@supports (height: -webkit-fill-available) {
:root {
@@ -41,8 +34,8 @@ body,
.WorkbenchContainer,
.Workbench {
width: 100%;
- /* --ios-vvh set by VisualViewPortCSSVariables on iOS only. */
- height: var(--full-svh, var(--ios-vvh, var(--webkit-vvh, 100vh)));
+ /* --vvh set by VisualViewPortCSSVariables */
+ height: var(--vvh, var(--webkit-vvh, 100vh));
overflow: hidden;
}
body {
diff --git a/src/common/VisualViewportCSSVariables.tsx b/src/common/VisualViewportCSSVariables.tsx
index 7954b94ed..84b35b706 100644
--- a/src/common/VisualViewportCSSVariables.tsx
+++ b/src/common/VisualViewportCSSVariables.tsx
@@ -7,27 +7,37 @@ import { useEffect } from "react";
const styleId = "vvp-style";
+const isIOS = (): boolean =>
+ /iPad|iPhone|iPod/.test(navigator.platform) ||
+ (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+
/**
* Maintains CSS variables for the visual viewport width and height.
- * Use with fallbacks, e.g. var(--ios-vvh, 100vh)
+ * Use with fallbacks, e.g. var(--vvh, 100vh)
* https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
- *
- * We skip it on other platforms and rely on the fallback.
*/
const VisualViewPortCSSVariables = () => {
+ const addStyleInnerText = (innerText: string) => {
+ let style = document.getElementById(styleId);
+ if (!style) {
+ style = document.head.appendChild(document.createElement("style"));
+ style.id = styleId;
+ }
+ style.innerText = innerText;
+ };
+
useEffect(() => {
- // If we remove the iOS check then we should look carefully at resize performance.
+ // svh on Safari in iOS does not resize when virtual keyboard is present
+ if (CSS.supports("height: 100svh") && !isIOS) {
+ addStyleInnerText(":root { --vvh: 100svh }");
+ return;
+ }
if (!window.visualViewport) {
return;
}
const resizeHandler = () => {
const { width, height } = window.visualViewport ?? {};
- let style = document.getElementById(styleId);
- if (!style) {
- style = document.head.appendChild(document.createElement("style"));
- style.id = styleId;
- }
- style.innerText = `:root { --ios-vvw: ${width}px; --ios-vvh: ${height}px; }`;
+ addStyleInnerText(`:root { --vvw: ${width}px; --vvh: ${height}px; }`);
};
window.visualViewport.addEventListener("resize", resizeHandler);
resizeHandler();
From 43ccb90fecba2ff8184a8d0bcd367898cc19821f Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Wed, 3 Apr 2024 17:16:38 +0100
Subject: [PATCH 08/17] Update comments
---
src/common/VisualViewportCSSVariables.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/common/VisualViewportCSSVariables.tsx b/src/common/VisualViewportCSSVariables.tsx
index 84b35b706..485f94523 100644
--- a/src/common/VisualViewportCSSVariables.tsx
+++ b/src/common/VisualViewportCSSVariables.tsx
@@ -14,7 +14,7 @@ const isIOS = (): boolean =>
/**
* Maintains CSS variables for the visual viewport width and height.
* Use with fallbacks, e.g. var(--vvh, 100vh)
- * https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
+ * https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport
*/
const VisualViewPortCSSVariables = () => {
const addStyleInnerText = (innerText: string) => {
@@ -35,6 +35,8 @@ const VisualViewPortCSSVariables = () => {
if (!window.visualViewport) {
return;
}
+ // We use visual viewport API as fallback
+ // https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
const resizeHandler = () => {
const { width, height } = window.visualViewport ?? {};
addStyleInnerText(`:root { --vvw: ${width}px; --vvh: ${height}px; }`);
From 86d25a22c67d43e4eb13d2333c70435dd8cc7ebe Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 09:58:25 +0100
Subject: [PATCH 09/17] Use full height of screen even when keyboard triggered
---
src/App.css | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/App.css b/src/App.css
index f6e01dd71..08044063a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,6 +16,12 @@
format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
+@supports (height: 100svh) {
+ :root {
+ --full-svh: 100svh;
+ }
+}
+
/* Needed for the fallbacks below */
@supports (height: -webkit-fill-available) {
:root {
@@ -34,9 +40,7 @@ body,
.WorkbenchContainer,
.Workbench {
width: 100%;
- /* --vvh set by VisualViewPortCSSVariables */
- height: var(--vvh, var(--webkit-vvh, 100vh));
- overflow: hidden;
+ height: var(--full-svh, 100vh);
}
body {
overflow: hidden;
From 70ba3eebc3305fc5dd580b2c4c37b1759ef02476 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 12:02:25 +0100
Subject: [PATCH 10/17] Add overflow hidden and 100% height
---
index.html | 2 +-
src/App.css | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index 0368c8820..149dbcbe5 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%BASE_URL%favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#6c4bc1" />
<title>micro:bit Python Editor</title>
<meta property="og:title" content="micro:bit Python Editor" />
diff --git a/src/App.css b/src/App.css
index 08044063a..0897ee2bf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -40,8 +40,8 @@ body,
.WorkbenchContainer,
.Workbench {
width: 100%;
- height: var(--full-svh, 100vh);
+ height: 100%;
}
-body {
+html, body {
overflow: hidden;
}
From 640c5e4682097660b8cb0375a2258cfa1afd133a Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 13:18:51 +0100
Subject: [PATCH 11/17] Do not render simulator when collapsed
Removes extra space on the right of HTML when the simulator is closed
---
src/App.css | 2 +-
src/simulator/Simulator.tsx | 4 ++++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/App.css b/src/App.css
index 0897ee2bf..ea46d8878 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,6 +42,6 @@ body,
width: 100%;
height: 100%;
}
-html, body {
+body {
overflow: hidden;
}
diff --git a/src/simulator/Simulator.tsx b/src/simulator/Simulator.tsx
index 47b30cf60..67e1dde77 100644
--- a/src/simulator/Simulator.tsx
+++ b/src/simulator/Simulator.tsx
@@ -89,6 +89,10 @@ const Simulator = ({
}
}, [previouslyShown, showSimulatorButtonRef, shown, simFocus]);
+ if (!shown) {
+ return null;
+ }
+
return (
<DeviceContextProvider value={simulator.current}>
<Flex
From e6313d04199457c0d5045fb58982f9de8134ca2a Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 13:31:48 +0100
Subject: [PATCH 12/17] Use min height of sidebar as the workbench min height
---
src/App.css | 19 ++-----------------
1 file changed, 2 insertions(+), 17 deletions(-)
diff --git a/src/App.css b/src/App.css
index ea46d8878..8be3b9907 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,19 +16,6 @@
format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
-@supports (height: 100svh) {
- :root {
- --full-svh: 100svh;
- }
-}
-
-/* Needed for the fallbacks below */
-@supports (height: -webkit-fill-available) {
- :root {
- --webkit-vhh: -webkit-fill-available;
- }
-}
-
:root {
/* Seems to fix a Safari glitch: https://github.com/microbit-foundation/python-editor-v3/issues/369 */
font-size: 16px;
@@ -40,8 +27,6 @@ body,
.WorkbenchContainer,
.Workbench {
width: 100%;
- height: 100%;
-}
-body {
- overflow: hidden;
+ /* 516px is the min height of the sidebar */
+ height: max(100%, 516px);
}
From 70e4dd68edcd93d49c46397551ea4b4cf6fdf299 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 14:21:15 +0100
Subject: [PATCH 13/17] Set min-width and min-height
---
src/App.css | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/App.css b/src/App.css
index 8be3b9907..b1a9e1ff2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,6 +27,9 @@ body,
.WorkbenchContainer,
.Workbench {
width: 100%;
+ height: 100%;
/* 516px is the min height of the sidebar */
- height: max(100%, 516px);
+ min-height: 516px;
+ /* 372px is the sidebar width + simulator width */
+ min-width: 372px;
}
From 0800b1dc2cd1174e2b4505b4e48fae9c5f60ac10 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 14:22:13 +0100
Subject: [PATCH 14/17] Remove visual viewport CSS variable component
---
src/App.tsx | 2 -
src/common/VisualViewportCSSVariables.tsx | 57 -----------------------
2 files changed, 59 deletions(-)
delete mode 100644 src/common/VisualViewportCSSVariables.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 1e2187d5a..71c5f9dcf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import { polyfill } from "mobile-drag-drop";
import { useEffect } from "react";
import "./App.css";
import { DialogProvider } from "./common/use-dialogs";
-import VisualViewPortCSSVariables from "./common/VisualViewportCSSVariables";
import { deployment, useDeployment } from "./deployment";
import { MicrobitWebUSBConnection } from "./device/webusb";
import { DeviceContextProvider } from "./device/device-hooks";
@@ -65,7 +64,6 @@ const App = () => {
const { ConsentProvider } = deployment.compliance;
return (
<>
- <VisualViewPortCSSVariables />
<ChakraProvider theme={deployment.chakraTheme}>
<LoggingProvider value={logging}>
<SettingsProvider>
diff --git a/src/common/VisualViewportCSSVariables.tsx b/src/common/VisualViewportCSSVariables.tsx
deleted file mode 100644
index 485f94523..000000000
--- a/src/common/VisualViewportCSSVariables.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * (c) 2021, Micro:bit Educational Foundation and contributors
- *
- * SPDX-License-Identifier: MIT
- */
-import { useEffect } from "react";
-
-const styleId = "vvp-style";
-
-const isIOS = (): boolean =>
- /iPad|iPhone|iPod/.test(navigator.platform) ||
- (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-
-/**
- * Maintains CSS variables for the visual viewport width and height.
- * Use with fallbacks, e.g. var(--vvh, 100vh)
- * https://developer.mozilla.org/en-US/docs/Glossary/Visual_Viewport
- */
-const VisualViewPortCSSVariables = () => {
- const addStyleInnerText = (innerText: string) => {
- let style = document.getElementById(styleId);
- if (!style) {
- style = document.head.appendChild(document.createElement("style"));
- style.id = styleId;
- }
- style.innerText = innerText;
- };
-
- useEffect(() => {
- // svh on Safari in iOS does not resize when virtual keyboard is present
- if (CSS.supports("height: 100svh") && !isIOS) {
- addStyleInnerText(":root { --vvh: 100svh }");
- return;
- }
- if (!window.visualViewport) {
- return;
- }
- // We use visual viewport API as fallback
- // https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
- const resizeHandler = () => {
- const { width, height } = window.visualViewport ?? {};
- addStyleInnerText(`:root { --vvw: ${width}px; --vvh: ${height}px; }`);
- };
- window.visualViewport.addEventListener("resize", resizeHandler);
- resizeHandler();
- return () => {
- window.visualViewport?.removeEventListener("resize", resizeHandler);
- const style = document.getElementById(styleId);
- if (style) {
- style.remove();
- }
- };
- }, []);
- return null;
-};
-
-export default VisualViewPortCSSVariables;
From bb77f91c6f49324c4b2953896594df9b11293ee4 Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 15:30:24 +0100
Subject: [PATCH 15/17] Revert "Do not render simulator when collapsed"
This reverts commit 640c5e4682097660b8cb0375a2258cfa1afd133a.
---
src/simulator/Simulator.tsx | 4 ----
1 file changed, 4 deletions(-)
diff --git a/src/simulator/Simulator.tsx b/src/simulator/Simulator.tsx
index 67e1dde77..47b30cf60 100644
--- a/src/simulator/Simulator.tsx
+++ b/src/simulator/Simulator.tsx
@@ -89,10 +89,6 @@ const Simulator = ({
}
}, [previouslyShown, showSimulatorButtonRef, shown, simFocus]);
- if (!shown) {
- return null;
- }
-
return (
<DeviceContextProvider value={simulator.current}>
<Flex
From 11886ee1713dcbf04fc121e0d9a34067e44f6a8f Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 16:16:48 +0100
Subject: [PATCH 16/17] Display simulator none when collapsed
---
src/common/SplitView/SplitViewSized.tsx | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/common/SplitView/SplitViewSized.tsx b/src/common/SplitView/SplitViewSized.tsx
index 83f8d9f24..83137368b 100644
--- a/src/common/SplitView/SplitViewSized.tsx
+++ b/src/common/SplitView/SplitViewSized.tsx
@@ -6,6 +6,7 @@
import { createRef, useEffect } from "react";
import { dimensionPropName, useSplitViewContext } from "./context";
import { Box } from "@chakra-ui/layout";
+import { Collapse } from "@chakra-ui/react";
interface SizedPaneProps {
children: JSX.Element;
@@ -38,6 +39,7 @@ const SplitViewSized = ({ children }: SizedPaneProps) => {
return (
<Box
pointerEvents={dragging ? "none" : "unset"}
+ display={mode === "collapsed" ? "none" : undefined}
visibility={mode === "collapsed" ? "hidden" : undefined}
ref={ref}
>
From 5ef82f8cfabe57f602bfc58d0cf40aa607a7577c Mon Sep 17 00:00:00 2001
From: Grace <grace@microbit.org>
Date: Thu, 4 Apr 2024 16:18:47 +0100
Subject: [PATCH 17/17] Organise imports
---
src/common/SplitView/SplitViewSized.tsx | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/common/SplitView/SplitViewSized.tsx b/src/common/SplitView/SplitViewSized.tsx
index 83137368b..44f79d67e 100644
--- a/src/common/SplitView/SplitViewSized.tsx
+++ b/src/common/SplitView/SplitViewSized.tsx
@@ -3,10 +3,9 @@
*
* SPDX-License-Identifier: MIT
*/
+import { Box } from "@chakra-ui/layout";
import { createRef, useEffect } from "react";
import { dimensionPropName, useSplitViewContext } from "./context";
-import { Box } from "@chakra-ui/layout";
-import { Collapse } from "@chakra-ui/react";
interface SizedPaneProps {
children: JSX.Element;