Vomnibar sizes: add options to compute dynamic sizes

Then usages like #57 can even declare a different height for suggestion items.
gdh1995 · Aug 1, 2019 · bf6deb2 · bf6deb2
1 parent db0cd58
commit bf6deb2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 24 deletions.
diff --git a/background/settings.ts b/background/settings.ts
@@ -25,9 +25,10 @@ var Settings_ = {
     c: "",
     m: 0,
     i: 0,
+    n: "",
     s: ""
   } : {
-    c: "", m: 0, i: 0, s: ""
+    c: "", m: 0, i: 0, n: "", s: ""
   }) as VomnibarPayload,
   newTabs_: BgUtils_.safeObj_() as ReadonlySafeDict<Urls.NewTabType>,
   extWhiteList_: null as never as SafeDict<boolean>,
@@ -317,34 +318,41 @@ var Settings_ = {
       const a = this as typeof Settings_, defaultOptions = a.defaults_.vomnibarOptions,
       payload = a.omniPayload_;
       let isSame = true;
-      let { maxMatches, queryInterval, styles } = defaultOptions;
+      let { maxMatches, queryInterval, styles, sizes } = defaultOptions;
       if (options !== defaultOptions && options && typeof options === "object") {
         const newMaxMatches = Math.max(3, Math.min((options.maxMatches | 0) || maxMatches
             , GlobalConsts.MaxLimitOfVomnibarMatches)),
         newInterval = +options.queryInterval,
         newStyles = ((options.styles || "") + "").trim(),
+        // use `<=` in case of further updates
+        newSizes = ((options.sizes || "") + "").trim(),
         newQueryInterval = Math.max(0, Math.min(newInterval >= 0 ? newInterval : queryInterval, 1200));
         isSame = maxMatches === newMaxMatches && queryInterval === newQueryInterval
+                  && newSizes === sizes
                   && styles === newStyles;
         if (!isSame) {
           maxMatches = newMaxMatches;
           queryInterval = newQueryInterval;
+          sizes = newSizes;
           styles = newStyles;
         }
         options.maxMatches = newMaxMatches;
         options.queryInterval = newQueryInterval;
+        options.sizes = newSizes;
         options.styles = newStyles;
       }
       (a.cache_ as Writable<typeof a.cache_>).vomnibarOptions = options = isSame ? defaultOptions
         : options as NonNullable<typeof options>;
       payload.m = maxMatches;
       payload.i = queryInterval;
+      payload.n = sizes;
       payload.s = styles;
       a.updateOmniStyles_(MediaNS.kName.PrefersReduceMotion, 1);
       a.updateOmniStyles_(MediaNS.kName.PrefersColorScheme, 1);
       a.broadcastOmni_({ N: kBgReq.omni_updateOptions, d: {
         m: maxMatches,
         i: queryInterval,
+        n: sizes,
         s: payload.s
       } });
     }
@@ -442,7 +450,11 @@ v.m|v\\:math: vimium://math\\ $S re= Calculate
     vomnibarOptions: {
       maxMatches: 10,
       queryInterval: 500,
-      styles: "mono-url",
+      sizes: VomnibarNS.PixelData.OthersIfEmpty + ","
+          + (VomnibarNS.PixelData.OthersIfNotEmpty - VomnibarNS.PixelData.OthersIfEmpty) + ","
+          + VomnibarNS.PixelData.Item
+          ,
+      styles: "mono-url"
     },
     userDefinedCss: "",
     vimSync: null,

diff --git a/content/base.d.ts b/content/base.d.ts
@@ -261,19 +261,6 @@ declare namespace VomnibarNS {
     onmessage (this: void, msg: { data: CReq[keyof CReq] }): void | 1;
   }
   type FgOptionsToFront = CReq[kCReq.activate];
-  const enum PixelData {
-    MarginTop = 64,
-    InputBar = 54, InputBarWithLine = InputBar + 1,
-    Item = 44, LastItemDelta = 46 - Item,
-    MarginV1 = 9, MarginV2 = 10, ShadowOffset = 2, MarginV = MarginV1 + MarginV2 + ShadowOffset * 2,
-    OthersIfEmpty = InputBar + MarginV,
-    OthersIfNotEmpty = InputBarWithLine + MarginV + LastItemDelta,
-    ListSpaceDelta = MarginTop + MarginV1
-      + InputBarWithLine + LastItemDelta + ((MarginV2 / 2) | 0) + GlobalConsts.MaxScrollbarWidth,
-    MarginH = 24, AllHNotUrl = 20 * 2 + 20 + 2 + MarginH,
-    MeanWidthOfMonoFont = 7.7, MeanWidthOfNonMonoFont = 4,
-    WindowSizeX = 0.8, AllHNotInput = AllHNotUrl,
-  }
 }
 
 declare type ScrollByY = 0 | 1;

diff --git a/front/vomnibar.ts b/front/vomnibar.ts
@@ -74,7 +74,10 @@ var VCID_: string | undefined = VCID_ || "", Vomnibar_ = {
               && (!(Build.BTypes & ~BrowserType.Chrome)
                   || Build.BTypes & BrowserType.Chrome && a.browser_ === BrowserType.Chrome)
               ? scale : 1)
-        - PixelData.ListSpaceDelta) / PixelData.Item), a.maxMatches_));
+          - a.baseHeightIfNotEmepty_
+          - (PixelData.MarginTop - ((PixelData.MarginV2 / 2 + 1) | 0) - PixelData.ShadowOffset * 2
+             + GlobalConsts.MaxScrollbarWidth)
+        ) / a.itemHeight_), a.maxMatches_));
     a.mode_.r = max;
     a.init_ && a.preInit_(options.t);
     if (Build.BTypes & ~BrowserType.Firefox) {
@@ -168,6 +171,9 @@ var VCID_: string | undefined = VCID_ || "", Vomnibar_ = {
   browserVer_: Build.BTypes & BrowserType.Chrome ? BrowserVer.assumedVer : BrowserVer.assumedVer,
   maxMatches_: 0,
   queryInterval_: 0,
+  heightIfEmepty_: VomnibarNS.PixelData.OthersIfEmpty,
+  baseHeightIfNotEmepty_: VomnibarNS.PixelData.OthersIfNotEmpty,
+  itemHeight_: VomnibarNS.PixelData.Item,
   styles_: "",
   styleEl_: null as HTMLStyleElement | null,
   darkBtn_: null as HTMLElement | null,
@@ -705,7 +711,7 @@ var VCID_: string | undefined = VCID_ || "", Vomnibar_ = {
     const a = Vomnibar_;
     const len = a.completions_.length, notEmpty = len > 0, oldH = a.height_, list = a.list_;
     const height = a.height_
-      = Math.ceil(notEmpty ? len * PixelData.Item + PixelData.OthersIfNotEmpty : PixelData.OthersIfEmpty),
+      = Math.ceil(notEmpty ? len * a.itemHeight_ + a.baseHeightIfNotEmepty_ : a.heightIfEmepty_),
     needMsg = height !== oldH, earlyPost = height > oldH || a.sameOrigin_,
     wdZoom = Build.MinCVer < BrowserVer.MinEnsuredChildFrameUseTheSameDevicePixelRatioAsParent
           && (!(Build.BTypes & ~BrowserType.Chrome)
@@ -714,7 +720,7 @@ var VCID_: string | undefined = VCID_ || "", Vomnibar_ = {
     msg: VomnibarNS.FReq[VomnibarNS.kFReq.style] & VomnibarNS.Msg<VomnibarNS.kFReq.style> = {
       N: VomnibarNS.kFReq.style, h: height * wdZoom
     };
-    oldH || (msg.m = Math.ceil(a.mode_.r * PixelData.Item + PixelData.OthersIfNotEmpty) * wdZoom);
+    oldH || (msg.m = Math.ceil(a.mode_.r * a.itemHeight_ + a.baseHeightIfNotEmepty_) * wdZoom);
     if (needMsg && earlyPost) { VPort_.postToOwner_(msg); }
     a.completions_.forEach(a.parse_, a);
     a.renderItems_(a.completions_, list);
@@ -796,14 +802,23 @@ var VCID_: string | undefined = VCID_ || "", Vomnibar_ = {
   },
   updateOptions_ (response: Req.bg<kBgReq.omni_updateOptions>): void {
     const delta = VUtils_.safer_(response.d),
-    { c: css_, m: maxMatches_, i: queryInterval_, s: styles } = delta;
+    { c: css_, m: maxMatches_, i: queryInterval_, n: sizes_str, s: styles } = delta;
     if (styles != null && Vomnibar_.styles_ !== styles) {
       Vomnibar_.styles_ = styles;
       Vomnibar_.onStyleUpdate_(styles);
     }
     css_ != null && Vomnibar_.css_(css_);
     maxMatches_ != null && (Vomnibar_.maxMatches_ = maxMatches_);
     queryInterval_ != null && (Vomnibar_.queryInterval_ = queryInterval_);
+    if (sizes_str != null) {
+      let sizes = sizes_str.split(","), n = +sizes[0], m = Math.min, M = Math.max;
+      Vomnibar_.heightIfEmepty_ = M(24, m(n || VomnibarNS.PixelData.OthersIfEmpty, 320));
+      n = +sizes[1];
+      Vomnibar_.baseHeightIfNotEmepty_ = M(24, m(Vomnibar_.heightIfEmepty_
+          + (n || (VomnibarNS.PixelData.OthersIfNotEmpty - VomnibarNS.PixelData.OthersIfEmpty)), 320));
+      n = +sizes[2];
+      Vomnibar_.itemHeight_ = M(14, m(n || VomnibarNS.PixelData.Item, 120));
+    }
   },
   OnWndFocus_ (this: void, event: Event): void {
     const a = Vomnibar_, byCode = a.codeFocusTime_ && performance.now() - a.codeFocusTime_ < 120,
@@ -1307,10 +1322,10 @@ if (!(Build.BTypes & ~BrowserType.Chrome) ? false : !(Build.BTypes & BrowserType
     if (Build.BTypes & BrowserType.Chrome) {
       Vomnibar_.browserVer_ = payload.v as NonNullable<typeof payload.v>;
     }
-    Vomnibar_.maxMatches_ = payload.m;
-    Vomnibar_.queryInterval_ = payload.i;
     Vomnibar_.styles_ = payload.s;
-    Vomnibar_.css_(payload.c);
+    Vomnibar_.updateOptions_({ N: kBgReq.omni_updateOptions, d: {
+      c: payload.c, m: payload.m, i: payload.i, n: payload.n
+    } });
     const { s: secret } = request;
     _sec = secret;
     for (const i of unsafeMsg) {

diff --git a/types/messages.d.ts b/types/messages.d.ts
@@ -134,6 +134,7 @@ interface VomnibarPayload {
   /** css */ c: string;
   /** maxMatches */ m: number;
   /** queryInterval */ i: number;
+  /** comma-joined size numbers */ n: string;
   /** styles */ s: string;
 }
 
@@ -339,7 +340,7 @@ interface FgReq {
     /** url */ u: string;
   };
   [kFgReq.parseUpperUrl]: FgReqWithRes[kFgReq.parseUpperUrl] & {
-    /** execute */ E: true;
+    /** execute */ E: boolean;
   };
   [kFgReq.findQuery]: {
     /** query */ q: string;

diff --git a/types/vimium_c.d.ts b/types/vimium_c.d.ts
@@ -245,6 +245,7 @@ declare namespace SettingsNS {
     vomnibarOptions: {
       maxMatches: number;
       queryInterval: number;
+      sizes: string; // comma-joined size numbers
       styles: string;
     };
   }
@@ -318,6 +319,18 @@ declare namespace VomnibarNS {
     inner = 0, ext = 1, web = 2,
     Default = inner,
   }
+  const enum PixelData {
+    MarginTop = 64,
+    InputBar = 54, InputBarWithLine = InputBar + 1,
+    Item = 44, LastItemDelta = 46 - Item,
+    MarginV1 = 9, MarginV2 = 10, ShadowOffset = 2, MarginV = MarginV1 + MarginV2 + ShadowOffset * 2,
+    OthersIfEmpty = InputBar + MarginV,
+    OthersIfNotEmpty = InputBarWithLine + MarginV + LastItemDelta,
+    ListSpaceDeltaWithoutScrollbar = MarginTop + MarginV1 + InputBarWithLine + LastItemDelta + ((MarginV2 / 2) | 0),
+    MarginH = 24, AllHNotUrl = 20 * 2 + 20 + 2 + MarginH,
+    MeanWidthOfMonoFont = 7.7, MeanWidthOfNonMonoFont = 4,
+    WindowSizeX = 0.8, AllHNotInput = AllHNotUrl,
+  }
   interface GlobalOptions {
     mode: string;
     currentWindow?: boolean;