- The following website {{websiteDesire}}
+ This site {{websiteDesire}}
0 && viewportHeight > 0 && outerHeight > 0)) {
+ return 0;
+ }
+
+ // ignore sub-pixel noise from fractional layout metrics
+ const deficit = Math.round(contentHeight - viewportHeight);
+ if(Math.abs(deficit) <= 1) {
+ return 0;
+ }
+
+ // the chrome is whatever the window has beyond its viewport; it stays
+ // constant as the window resizes, so the largest viewport available is the
+ // screen minus that chrome
+ const chromeHeight = Math.max(0, outerHeight - viewportHeight);
+ const maxViewport = Math.max(0, (availableHeight || 0) - chromeHeight);
+
+ let adjustment = deficit;
+ // never exceed the screen (a window taller than the display is worse than
+ // a scrolling one -- its footer would be unreachable)
+ if(maxViewport > 0) {
+ adjustment = Math.min(adjustment, maxViewport - viewportHeight);
+ }
+ // keep the window usable, and bound how far a single correction can move it
+ adjustment = Math.max(adjustment, MIN_POPUP_HEIGHT - viewportHeight);
+ adjustment = Math.max(-MAX_POPUP_HEIGHT_ADJUSTMENT,
+ Math.min(MAX_POPUP_HEIGHT_ADJUSTMENT, adjustment));
+
+ return Math.abs(adjustment) <= 1 ? 0 : adjustment;
+}
+
+/**
+ * Resizes a script-opened popup so its content fits without clipping.
+ *
+ * The imperative shell around `getWindowHeightAdjustment`. Safe to call in a
+ * regular tab: `resizeBy` is a no-op on windows the script did not open, and
+ * any failure is swallowed -- a popup that cannot be resized still works, it
+ * just scrolls.
+ *
+ * @param {object} options - The options to use.
+ * @param {Window} [options.win=window] - The window to fit.
+ *
+ * @returns {number} The adjustment actually applied, in px.
+ */
+export function fitWindowToContent({win = window} = {}) {
+ try {
+ const {documentElement: html, body} = win.document;
+ /* The document's own `scrollHeight` is not enough. The 1p dialog is laid
+ out to exactly fill the popup with one internally scrolling region, so
+ content that does not fit is clipped *inside* that region and the document
+ itself never overflows -- `html.scrollHeight` equals `innerHeight` no
+ matter how badly the greeting is cut off. Add the largest overflow found
+ among scrolling descendants so the window grows by enough to reveal it. */
+ const documentHeight = Math.max(
+ html.scrollHeight, body ? body.scrollHeight : 0);
+ const contentHeight = documentHeight + _getMaxInnerOverflow(win);
+ const adjustment = getWindowHeightAdjustment({
+ contentHeight,
+ viewportHeight: win.innerHeight,
+ outerHeight: win.outerHeight,
+ availableHeight: win.screen && win.screen.availHeight
+ });
+ if(adjustment !== 0) {
+ win.resizeBy(0, adjustment);
+ }
+ return adjustment;
+ } catch {
+ // cross-origin, no permission to resize, or nothing to measure
+ return 0;
+ }
+}
+
+/* Largest vertical overflow among the document's scrollable elements.
+Exported for testing only.
+
+The wallet hint list is intentionally scrollable and can be arbitrarily long,
+so it is skipped: growing the window to fit every wallet is not the goal (the
+hint chooser has its own taller popup height for that). What this looks for is
+a region that is clipped only because the popup is too short for its fixed
+content -- the greeting and footer. */
+export function _getMaxInnerOverflow(win) {
+ let max = 0;
+ const elements = win.document.querySelectorAll('.wrm-modal-content *');
+ for(const el of elements) {
+ if(el.classList.contains('wrm-hint-list')) {
+ continue;
+ }
+ const overflow = el.scrollHeight - el.clientHeight;
+ // ignore elements with no content box (inline elements report 0/0) and
+ // sub-pixel noise
+ if(el.clientHeight > 0 && overflow > max) {
+ max = overflow;
+ }
+ }
+ return Math.round(max);
+}
+
export function getOriginName({origin, manifest} = {}) {
const {host} = new URL(origin);
if(!manifest) {
diff --git a/web/routes/TestWalletChooser.vue b/web/routes/TestWalletChooser.vue
index 03e279b..42d53b4 100644
--- a/web/routes/TestWalletChooser.vue
+++ b/web/routes/TestWalletChooser.vue
@@ -2,7 +2,7 @@
route.query.origin || 'https://verifier.example');
+ /* A manifest makes `WrmOriginCard` render its full form: the large icon
+ plus a name line stacked above the origin line, instead of the origin
+ alone. That taller card is what the real dialog shows for any site with a
+ web app manifest, so the no-manifest default under-reports the greeting's
+ height. `name=` sets the displayed name; `manifest=0` forces the bare
+ origin form. */
+ const credentialRequestOriginManifest = computed(() => {
+ const {manifest, name} = route.query;
+ if(manifest === '0' || manifest === 'false') {
+ return null;
+ }
+ return {
+ name: name || 'Demo Wallet',
+ /* A loadable icon so the card renders at its real (tallest) height.
+ Without `icons`, the icon falls back to `/favicon.ico`, which
+ cannot load for a fake test origin and collapses to a small default
+ glyph — under-reporting the greeting height for any real wallet that
+ does have an icon. */
+ icons: [{
+ src: ICON_URL,
+ sizes: '48x48',
+ type: 'image/svg+xml'
+ }]
+ };
+ });
+
/* mirror `FirstPartyMediatorWizard`: the chooser is shown for every
request type except a permission request (which shows the allow/deny
greeting instead). This is what surfaces the chooser with zero hints. */
@@ -91,8 +125,8 @@ export default {
const noop = () => {};
return {
- credentialRequestOrigin, hints, interactionUrl, noop, requestType,
- showHintChooser
+ credentialRequestOrigin, credentialRequestOriginManifest, hints,
+ interactionUrl, noop, requestType, showHintChooser
};
}
};