[#65872] Switch to flexbox layout to improve performance on Chromium

antmicro · Sep 23, 2024 · e765632 · e765632
1 parent 5e000f2
commit e765632
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 41 deletions.
diff --git a/src/MystEditor.js b/src/MystEditor.js
@@ -28,15 +28,15 @@ const EditorParent = styled.div`
   ${(props) => {
     switch (props.mode) {
       case "Preview":
-        return ".myst-main-editor { display: none } .myst-resolved { display: none }";
+        return "#editor-wrapper { display: none } #resolved-wrapper { display: none }";
       case "Source":
-        return ".myst-preview { display: none } .myst-resolved { display: none }";
+        return "#preview-wrapper { display: none } #resolved-wrapper { display: none }";
       case "Diff":
-        return ".myst-main-editor { display: none }; .myst-preview { display: none } .myst-resolved { display: none }";
+        return "#editor-wrapper { display: none }; #preview-wrapper { display: none } #resolved-wrapper { display: none }";
       case "Both":
-        return ".myst-resolved { display: none }";
+        return "#resolved-wrapper { display: none }";
       case "Resolved":
-        return ".myst-preview { display: none };";
+        return "#preview-wrapper { display: none };";
       default:
         return ``;
     }
@@ -45,9 +45,7 @@ const EditorParent = styled.div`
 
 const MystWrapper = styled.div`
   padding: 20px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(50%, 1fr);
+  display: flex;
   box-sizing: border-box;
   height: calc(100% - 60px);
   width: 100%;
@@ -71,6 +69,15 @@ const StatusBanner = styled.div`
   font-weight: 600;
 `;
 
+/** CSS flexbox takes the content size of elements to determine the layout and ignores padding.
+ * This wrapper is here to make sure the padding is added one element deeper and elements are equal width.
+ * Ideally we would use CSS Grid but that has some performance issues with CodeMirror on Chromium. */
+const FlexWrapper = styled.div`
+  flex: 1;
+  height: 100%;
+  min-height: 500px;
+`;
+
 const createExtraScopePlugin = (scope) => {
   const plugin = (element, index, children) => {
     if (element.type == "rule") {
@@ -190,35 +197,41 @@ const MystEditor = ({
         ${error && html`<${StatusBanner} error> ${typeof error == "string" ? error : "No connection to the collaboration server"} <//>`}
         ${collaboration.enabled && !ready && !error && html`<${StatusBanner}>Connecting to the collaboration server ...<//>`}
         <${MystWrapper} fullscreen=${fullscreen}>
-          <${CodeMirror}
-            ...${{
-              mode,
-              text,
-              id,
-              spellcheckOpts,
-              root: parent,
-              highlights: transforms,
-              preview,
-              syncScroll,
-              collaboration: {
-                opts: collaboration,
-                setUsers,
-                provider,
-                undoManager,
-                ytext,
-                ydoc,
-                ready,
-                error,
-                ycomments,
-              },
-              unfoldedHeadings,
-            }}
-          />
-          <${Preview} ref=${preview} mode=${mode} onClick=${(ev) => handlePreviewFold(ev, text.lineMap)}
-            ><${PreviewFocusHighlight} className="cm-previewFocus"
-          /><//>
-          ${mode === "Diff" && html`<${Diff} root=${parent} oldText=${initialText} text=${text} />`}
-          ${collaboration.commentsEnabled && collaboration.resolvingCommentsEnabled && !error && html`<${ResolvedComments} ycomments=${ycomments} />`}
+          <${FlexWrapper} id="editor-wrapper">
+            <${CodeMirror}
+              ...${{
+                mode,
+                text,
+                id,
+                spellcheckOpts,
+                root: parent,
+                highlights: transforms,
+                preview,
+                syncScroll,
+                collaboration: {
+                  opts: collaboration,
+                  setUsers,
+                  provider,
+                  undoManager,
+                  ytext,
+                  ydoc,
+                  ready,
+                  error,
+                  ycomments,
+                },
+                unfoldedHeadings,
+              }}
+            />
+          <//>
+          <${FlexWrapper} id="preview-wrapper"
+            ><${Preview} ref=${preview} mode=${mode} onClick=${(ev) => handlePreviewFold(ev, text.lineMap)}
+              ><${PreviewFocusHighlight} className="cm-previewFocus" /><//
+          ><//>
+          ${mode === "Diff" && html`<${FlexWrapper}><${Diff} root=${parent} oldText=${initialText} text=${text} /><//>`}
+          ${collaboration.commentsEnabled &&
+          collaboration.resolvingCommentsEnabled &&
+          !error &&
+          html`<${FlexWrapper} id="resolved-wrapper"><${ResolvedComments} ycomments=${ycomments} /><//>`}
         <//>
       <//>
     <//>

diff --git a/src/components/CodeMirror.js b/src/components/CodeMirror.js
@@ -19,7 +19,8 @@ const CodeEditor = styled.div`
   resize: none;
   border: 0;
   padding: 20px;
-  min-height: 500px;
+  box-sizing: border-box;
+  height: 100%;
   scrollbar-width: thin;
   overflow-y: auto;
   color: black;

diff --git a/src/components/Diff.js b/src/components/Diff.js
@@ -10,6 +10,8 @@ const DiffContainer = styled.div`
   grid-auto-flow: column;
   grid-template-rows: max-content;
   width: 100%;
+  height: 100%;
+  scrollbar-width: thin;
   overflow-y: auto;
 `;
 

diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -4,14 +4,15 @@ const Preview = styled.div`
   background-color: white;
   padding: 20px;
   padding-left: 40px;
-  min-height: 150px;
+  box-sizing: border-box;
+  height: 100%;
   border: 1px solid var(--gray-400);
   border-left: 1px solid var(--gray-600);
   box-shadow: inset 0px 0px 4px var(--gray-600);
   border-radius: var(--border-radius);
   vertical-align: top;
   color: var(--gray-900);
-  word-break: unset;
+  word-break: break-all;
   position: relative;
   overflow-y: auto;
   scrollbar-width: thin;

diff --git a/src/components/Resolved.js b/src/components/Resolved.js
@@ -7,7 +7,8 @@ import CommentIcon from "../icons/comment.svg";
 const ResolvedWrapper = styled.div`
   background-color: white;
   padding: 20px 0;
-  min-height: 150px;
+  box-sizing: border-box;
+  height: 100%;
   border: 1px solid var(--gray-400);
   border-left: 1px solid var(--gray-600);
   box-shadow: inset 0px 0px 4px var(--gray-600);