Fix native STL Blob Preview (#260)

* Fix existing STL Preview tab

* Add linux snapshots (height 500 and new stl one)

* Add comment

src/components/viewer/CadBlob.tsx

@@ -36,7 +36,7 @@ export function CadBlob({ blob }: FileBlob): React.ReactElement {
         <>
             {geometry && (
                 <Box position="relative">
-                    <Box height={300} backgroundColor="canvas.subtle">
+                    <Box height={500} backgroundColor="canvas.subtle">
                         <Viewer3D
                             geometry={geometry}
                             boundingSphere={boundingSphere}

src/components/viewer/CadBlobPage.tsx

@@ -45,6 +45,19 @@ function CadBlobPortal({
             )
         }
 
+        const isPreviewAlreadyEnabled =
+            existingToggle && existingToggle.childElementCount > 2 // Preview, Code, Blame
+        if (isPreviewAlreadyEnabled) {
+            const existingPreview = element.querySelector<HTMLElement>('iframe')
+            blob = existingPreview?.parentElement
+            if (blob && blob.parentElement) {
+                setBlobContainer(blob.parentElement)
+                blob.style.display = 'none'
+            }
+            // No toolbar, no sourceElements. Only a replacement of the existing (STL) preview
+            return
+        }
+
         if (toolbar != null) {
             setToolbarContainer(toolbar)
             if (existingToggle) {
@@ -110,7 +123,12 @@ function CadBlobPortal({
                 )}
             {blobContainer &&
                 createPortal(
-                    <Box sx={{ display: richSelected ? 'block' : 'none' }}>
+                    <Box
+                        sx={{
+                            display: richSelected ? 'block' : 'none',
+                            width: '100%',
+                        }}
+                    >
                         {richBlob ? (
                             <CadBlob blob={richBlob.blob} />
                         ) : (

tests/extension.spec.ts

@@ -99,3 +99,13 @@ test('blob preview with an .obj file', async ({
     const screenshot = await getBlobPreviewScreenshot(page, url)
     expect(screenshot).toMatchSnapshot()
 })
+
+test('blob preview with an .stl file', async ({
+    page,
+    authorizedBackground,
+}) => {
+    const url =
+        'https://github.com/KittyCAD/diff-samples/blob/fd9eec79f0464833686ea6b5b34ea07145e32734/models/box.stl'
+    const screenshot = await getBlobPreviewScreenshot(page, url)
+    expect(screenshot).toMatchSnapshot()
+})