From 3628e62348c0cdedb00ce1c9b55f05e2d8fee1fe Mon Sep 17 00:00:00 2001 From: Grace 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 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 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 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 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 @@ - + micro:bit Python Editor From 2f49f26e6341e8ac2534416faffb21f24c72cb62 Mon Sep 17 00:00:00 2001 From: Grace 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 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 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 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 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 @@ - + 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 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 ( 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 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 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 ( <> - 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 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 ( 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 ( From 5ef82f8cfabe57f602bfc58d0cf40aa607a7577c Mon Sep 17 00:00:00 2001 From: Grace 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;