From 5e93775d26995e1b7685a53825bed5b1064d4493 Mon Sep 17 00:00:00 2001
From: falkTX <falktx@falktx.com>
Date: Fri, 8 Jul 2022 12:04:41 +0100
Subject: [PATCH] Handle all wasm ddpx/dpi targets known

Signed-off-by: falkTX <falktx@falktx.com>
---
 src/CardinalModuleWidget.cpp |   8 +-
 src/emscripten/shell.html    | 395 +++++++++++++++++++++++++++++++----
 2 files changed, 366 insertions(+), 37 deletions(-)

diff --git a/src/CardinalModuleWidget.cpp b/src/CardinalModuleWidget.cpp
index bf589ef..06550c1 100644
--- a/src/CardinalModuleWidget.cpp
+++ b/src/CardinalModuleWidget.cpp
@@ -406,7 +406,13 @@ void appendSelectionContextMenu(ui::Menu* const menu)
     }, false, true));
 
     // Save
-    menu->addChild(createMenuItem("Save selection as", "", [w]() {
+    menu->addChild(createMenuItem(
+       #ifdef DISTRHO_OS_WASM
+        "Save selection",
+       #else
+        "Save selection as...",
+       #endif
+        "", [w]() {
         CardinalModuleWidget__saveSelectionDialog(w);
     }, n == 0));
 
diff --git a/src/emscripten/shell.html b/src/emscripten/shell.html
index 1b2fa58..de4eefe 100644
--- a/src/emscripten/shell.html
+++ b/src/emscripten/shell.html
@@ -30,74 +30,397 @@
         width: 100vw;
         height: 100vh;
       }
-      @media (min-resolution: 1.05dppx) { /* FIXME unused by FF?? */
+
+      /* automatically generated */
+      @media (min-resolution: 0.29dppx) {
         #canvas_wrapper {
-          scale: calc(1/1.1);
-          left: -4.5vw;
-          top: -4.5vh;
+          scale: calc(1 / 0.3);
+          left: 0;
+          top: calc((1 - (1 / 0.3)) / 2 * -100vh);
         }
       }
+
+      @media (min-resolution: 0.39dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.4);
+          left: 0;
+          top: calc((1 - (1 / 0.4)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.49dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.5);
+          left: 0;
+          top: calc((1 - (1 / 0.5)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.59dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.6);
+          left: 0;
+          top: calc((1 - (1 / 0.6)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.665dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.666);
+          left: 0;
+          top: calc((1 - (1 / 0.666)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.69dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.7);
+          left: 0;
+          top: calc((1 - (1 / 0.7)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.79dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.8);
+          left: 0;
+          top: calc((1 - (1 / 0.8)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 0.89dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 0.9);
+          left: 0;
+          top: calc((1 - (1 / 0.9)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 1.0dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 1.0);
+          left: calc((1 - (1 / 1.0)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.0)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 1.1dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 1.1);
+          left: calc((1 - (1 / 1.1)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.1)) / 2 * -100vh);
+        }
+      }
+
       @media (min-resolution: 1.2dppx) {
         #canvas_wrapper {
-          scale: calc(1/1.2);
-          left: -8.333vw;
-          top: -8.333vh;
+          scale: calc(1 / 1.2);
+          left: calc((1 - (1 / 1.2)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.2)) / 2 * -100vh);
         }
       }
-      @media (min-resolution: 1.333dppx) {
+
+      @media (min-resolution: 1.3dppx) {
         #canvas_wrapper {
-          scale: calc(1/1.333);
-          left: -12.5vw;
-          top: -12.5vh;
+          scale: calc(1 / 1.3);
+          left: calc((1 - (1 / 1.3)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.3)) / 2 * -100vh);
         }
       }
+
+      @media (min-resolution: 1.4dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 1.4);
+          left: calc((1 - (1 / 1.4)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.4)) / 2 * -100vh);
+        }
+      }
+
       @media (min-resolution: 1.5dppx) {
         #canvas_wrapper {
-          scale: calc(1/1.5);
-          left: calc(-100vw / 6);
-          top: calc(-100vh / 6);
+          scale: calc(1 / 1.5);
+          left: calc((1 - (1 / 1.5)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.5)) / 2 * -100vh);
         }
       }
+
+      @media (min-resolution: 1.6dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 1.6);
+          left: calc((1 - (1 / 1.6)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.6)) / 2 * -100vh);
+        }
+      }
+
       @media (min-resolution: 1.7dppx) {
         #canvas_wrapper {
-          scale: calc(1/1.7);
-          left: -20.5vw;
-          top: -20.5vh;
+          scale: calc(1 / 1.7);
+          left: calc((1 - (1 / 1.7)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.7)) / 2 * -100vh);
         }
       }
-      @media (min-resolution: 2dppx) {
+
+      @media (min-resolution: 1.8dppx) {
         #canvas_wrapper {
-          scale: calc(1/2);
-          left: calc(-100vw / 4);
-          top: calc(-100vh / 4);
+          scale: calc(1 / 1.8);
+          left: calc((1 - (1 / 1.8)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.8)) / 2 * -100vh);
         }
       }
+
+      @media (min-resolution: 1.9dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 1.9);
+          left: calc((1 - (1 / 1.9)) / 2 * -100vw);
+          top: calc((1 - (1 / 1.9)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.0dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.0);
+          left: calc((1 - (1 / 2.0)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.0)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.1dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.1);
+          left: calc((1 - (1 / 2.1)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.1)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.2dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.2);
+          left: calc((1 - (1 / 2.2)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.2)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.3dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.3);
+          left: calc((1 - (1 / 2.3)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.3)) / 2 * -100vh);
+        }
+      }
+
       @media (min-resolution: 2.4dppx) {
         #canvas_wrapper {
-          scale: calc(1/2.4);
-          left: -29.1937vw;
-          top: -29.1937vh;
+          scale: calc(1 / 2.4);
+          left: calc((1 - (1 / 2.4)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.4)) / 2 * -100vh);
         }
       }
-      @media (min-resolution: 3dppx) {
+
+      @media (min-resolution: 2.5dppx) {
         #canvas_wrapper {
-          scale: calc(1/3);
-          left: -33.333vw;
-          top: -33.333vh;
+          scale: calc(1 / 2.5);
+          left: calc((1 - (1 / 2.5)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.5)) / 2 * -100vh);
         }
       }
-      @media (min-resolution: 4dppx) {
+
+      @media (min-resolution: 2.6dppx) {
         #canvas_wrapper {
-          scale: calc(1/4q);
-          left: -37.5vw;
-          top: -37.5vh;
+          scale: calc(1 / 2.6);
+          left: calc((1 - (1 / 2.6)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.6)) / 2 * -100vh);
         }
       }
-      @media (min-resolution: 5dppx) {
+
+      @media (min-resolution: 2.7dppx) {
         #canvas_wrapper {
-          scale: calc(1/5);
-          left: -40vw;
-          top: -40vh;
+          scale: calc(1 / 2.7);
+          left: calc((1 - (1 / 2.7)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.7)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.8dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.8);
+          left: calc((1 - (1 / 2.8)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.8)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 2.9dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 2.9);
+          left: calc((1 - (1 / 2.9)) / 2 * -100vw);
+          top: calc((1 - (1 / 2.9)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.0dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.0);
+          left: calc((1 - (1 / 3.0)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.0)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.1dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.1);
+          left: calc((1 - (1 / 3.1)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.1)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.2dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.2);
+          left: calc((1 - (1 / 3.2)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.2)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.3dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.3);
+          left: calc((1 - (1 / 3.3)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.3)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.4dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.4);
+          left: calc((1 - (1 / 3.4)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.4)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.5dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.5);
+          left: calc((1 - (1 / 3.5)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.5)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.6dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.6);
+          left: calc((1 - (1 / 3.6)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.6)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.7dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.7);
+          left: calc((1 - (1 / 3.7)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.7)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.8dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.8);
+          left: calc((1 - (1 / 3.8)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.8)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 3.9dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 3.9);
+          left: calc((1 - (1 / 3.9)) / 2 * -100vw);
+          top: calc((1 - (1 / 3.9)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.0dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.0);
+          left: calc((1 - (1 / 4.0)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.0)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.1dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.1);
+          left: calc((1 - (1 / 4.1)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.1)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.2dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.2);
+          left: calc((1 - (1 / 4.2)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.2)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.3dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.3);
+          left: calc((1 - (1 / 4.3)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.3)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.4dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.4);
+          left: calc((1 - (1 / 4.4)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.4)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.5dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.5);
+          left: calc((1 - (1 / 4.5)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.5)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.6dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.6);
+          left: calc((1 - (1 / 4.6)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.6)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.7dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.7);
+          left: calc((1 - (1 / 4.7)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.7)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.8dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.8);
+          left: calc((1 - (1 / 4.8)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.8)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 4.9dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 4.9);
+          left: calc((1 - (1 / 4.9)) / 2 * -100vw);
+          top: calc((1 - (1 / 4.9)) / 2 * -100vh);
+        }
+      }
+
+      @media (min-resolution: 5.0dppx) {
+        #canvas_wrapper {
+          scale: calc(1 / 5.0);
+          left: calc((1 - (1 / 5.0)) / 2 * -100vw);
+          top: calc((1 - (1 / 5.0)) / 2 * -100vh);
         }
       }