Browse Source

fix: improve+simplify popup max-height logic

tophf 1 year ago
parent
commit
b6ddf2a2ea
2 changed files with 12 additions and 19 deletions
  1. 3 0
      src/popup/style.css
  2. 9 19
      src/popup/views/app.vue

+ 3 - 0
src/popup/style.css

@@ -21,6 +21,9 @@ $DARKhoverColor: var(--fill-15);
 $DARKhoverBack: #404c5c;
 $DARKhoverButtonInactiveBack: #5b6979;
 
+html {
+  scrollbar-width: none; /* Vivaldi: preventing the full-body scrollbar before size-adjustment kicks in */
+}
 body {
   width: 320px;
   max-width: 100%;

+ 9 - 19
src/popup/views/app.vue

@@ -548,25 +548,15 @@ function showButtons(item) {
 onMounted(() => {
   const $el = $root.value;
   const style = $el.style;
-  // Chrome bug: the popup's initial devicePixelRatio equals zoom level of a normal extension page
-  const ratio = !IS_FIREFOX && devicePixelRatio;
-  if (ratio && ratio !== 1) {
-    self.onresize = () => {
-      if (ratio !== devicePixelRatio) {
-        style.maxHeight = parseInt(style.maxHeight) * ratio + 'px';
-        self.onresize = null;
-      }
-    };
-  }
-  /* Popup is auto-sized by the browser, so we force it to expand to extract the maximum height.
-   * Doing it at startup helps avoid glitchy re-adjustments later. */
-  style.height = screen.height + 'px';
-  new IntersectionObserver(([e], obs) => {
-    obs.disconnect();
-    // rootBounds may be 0 in old Firefox, so we'll use clientHeight as fallback
-    style.maxHeight = ((e.rootBounds.height | 0) || document.documentElement.clientHeight) + 'px';
-    style.height = '';
-  }).observe($el);
+  const setMaxHeightOnResize = () => {
+    // 1. Ignoring initial empty popup
+    // 2. Ignoring initial devicePixelRatio which is based on page zoom in this extension's tabs
+    if (document.readyState !== 'loading' && $el.clientHeight > innerHeight) {
+      removeEventListener('resize', setMaxHeightOnResize);
+      style.maxHeight = innerHeight + 'px';
+    }
+  };
+  addEventListener('resize', setMaxHeightOnResize);
   focusMe($el);
   keyboardService.enable();
   keyboardService.register('escape', () => {