@kubex/zinc 1.1.72 → 1.1.74

package/src/components/preview-frame/preview-frame.test.ts

@@ -51,6 +51,13 @@ describe('<zn-preview-frame>', () => {
     window.fetch = realFetch;
   });
 
+  // ShadowRoot.elementFromPoint resolves inside the shadow tree, where
+  // document.elementFromPoint would only ever hand back the host.
+  function hitTest(el: Element, target: Element) {
+    const {left, top, width, height} = target.getBoundingClientRect();
+    return el.shadowRoot!.elementFromPoint(left + width / 2, top + height / 2);
+  }
+
   function ready(el: Element, origin = 'https://site.example') {
     const iframe = el.shadowRoot!.querySelector('iframe')!;
     window.dispatchEvent(new MessageEvent('message', {
@@ -501,6 +508,183 @@ describe('<zn-preview-frame>', () => {
     expect(getComputedStyle(preview).backgroundImage).to.equal('none');
   });
 
+  it('takes no pointer input by default, so nothing clicks through to the embed', async () => {
+    const el = await fixture(FIXTURE);
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    expect(getComputedStyle(iframe).pointerEvents).to.equal('none');
+    // hit-testing inside the shadow root: a click over the frame lands on the
+    // stage behind it, never the iframe
+    expect(hitTest(el, iframe)).to.not.equal(iframe);
+  });
+
+  it('lets pointer input through when interactive is set', async () => {
+    const el = await fixture(html`
+      <zn-preview-frame
+        src="about:blank"
+        frame-origin="https://site.example"
+        data-uri="/payload"
+        interactive></zn-preview-frame>`);
+
+    const iframe = el.shadowRoot!.querySelector('iframe')!;
+    expect(getComputedStyle(iframe).pointerEvents).to.equal('auto');
+    expect(hitTest(el, iframe)).to.equal(iframe);
+  });
+
+  describe('overflowing content', () => {
+    function reportHeight(el: Element, height: unknown, type = 'hp-preview:rendered') {
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      window.dispatchEvent(new MessageEvent('message', {
+        data: {type, height},
+        origin: 'https://site.example',
+        source: iframe.contentWindow
+      }));
+    }
+
+    it('scrolls the panel rather than the frame when the embed reports a taller page', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+
+      reportHeight(el, 1400);
+      await waitUntil(() => iframe.style.height === '1400px');
+
+      // the frame is laid out at full content height, so it never scrolls itself
+      expect(stage.style.height).to.equal('1400px');
+      expect(panel.style.height).to.equal('480px');
+      expect(panel.scrollHeight).to.be.greaterThan(panel.clientHeight);
+
+      // a wheel over the frame hit-tests to the stage, whose only user-scrollable
+      // ancestor is the panel — so the gesture scrolls the panel
+      const hit = hitTest(el, panel);
+      expect(hit).to.not.equal(iframe);
+      expect(panel.contains(hit!)).to.equal(true);
+      expect(getComputedStyle(stage).overflowY).to.equal('hidden');
+
+      panel.scrollTop = 200;
+      expect(panel.scrollTop).to.equal(200);
+    });
+
+    it('scrolls vertically only, so a zoomed-out frame gets no horizontal bar', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          zoom="0.5"
+          min-height="400"></zn-preview-frame>`);
+
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      expect(getComputedStyle(panel).overflowX).to.equal('hidden');
+      expect(getComputedStyle(panel).overflowY).to.equal('auto');
+
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      reportHeight(el, 1600);
+      await waitUntil(() => iframe.style.height === '1600px');
+
+      // the stage tracks the frame's *visible* height (1600 × 0.5), so scrolling
+      // stops at the end of the page instead of at the oversized layout box
+      const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+      expect(stage.style.height).to.equal('800px');
+      expect(panel.scrollWidth).to.equal(panel.clientWidth);
+    });
+
+    it('accepts a later hp-preview:height message when the page grows', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      reportHeight(el, 900);
+      await waitUntil(() => iframe.style.height === '900px');
+
+      reportHeight(el, 1300, 'hp-preview:height');
+      await waitUntil(() => iframe.style.height === '1300px');
+    });
+
+    it('keeps filling the panel for a page shorter than it', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+
+      reportHeight(el, 120);
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      expect(iframe.style.height).to.equal('480px');
+      expect(panel.scrollHeight).to.equal(panel.clientHeight);
+    });
+
+    it('ignores a height that is missing, zero, negative or not a number', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      for (const height of [undefined, 0, -400, 'tall', NaN, Infinity]) {
+        reportHeight(el, height);
+        await new Promise(resolve => setTimeout(resolve, 20));
+        expect(iframe.style.height, `height: ${String(height)}`).to.equal('480px');
+      }
+    });
+
+    it('ignores the reported height while the error overlay is up', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      reportHeight(el, 1400);
+      await waitUntil(() => iframe.style.height === '1400px');
+
+      reportHeight(el, 1400, 'hp-preview:error');
+      await waitUntil(() => el.shadowRoot!.querySelector('[part="error"]'));
+      expect(iframe.style.height).to.equal('480px');
+
+      // clears again once the embed reports a good render
+      reportHeight(el, 1400);
+      await waitUntil(() => iframe.style.height === '1400px');
+    });
+
+    it('drops the reported height when src changes', async () => {
+      const el = await fixture(FIXTURE);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      reportHeight(el, 1400);
+      await waitUntil(() => iframe.style.height === '1400px');
+
+      (el as HTMLElement & {src: string}).src = 'about:blank?next';
+      await waitUntil(() => iframe.style.height === '480px');
+    });
+
+    it('measures a same-origin embed without it reporting anything', async () => {
+      const src = URL.createObjectURL(new Blob([
+        '<!doctype html><html><body style="margin:0"><div style="height:1200px"></div></body></html>'
+      ], {type: 'text/html'}));
+
+      const el = await fixture(html`
+        <zn-preview-frame src="${src}" frame-origin="https://site.example"></zn-preview-frame>`);
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+
+      await waitUntil(() => parseInt(iframe.style.height, 10) >= 1200, 'never measured the embed');
+      const panel = el.shadowRoot!.querySelector<HTMLDivElement>('.preview')!;
+      expect(panel.scrollHeight).to.be.greaterThan(panel.clientHeight);
+      URL.revokeObjectURL(src);
+    });
+
+    it('fills the panel when a fill frame has no known content height', async () => {
+      const el = await fixture(html`
+        <zn-preview-frame
+          src="about:blank"
+          frame-origin="https://site.example"
+          data-uri="/payload"
+          fill></zn-preview-frame>`);
+
+      const iframe = el.shadowRoot!.querySelector('iframe')!;
+      expect(iframe.style.height).to.equal('100%');
+
+      reportHeight(el, 1500);
+      await waitUntil(() => iframe.style.height !== '100%');
+      // a floor of the panel height, so a short page still fills a stretched column
+      expect(iframe.style.height).to.equal('max(1500px, 100%)');
+      const stage = el.shadowRoot!.querySelector<HTMLDivElement>('.preview__stage')!;
+      expect(stage.style.height).to.equal('max(1500px, 100%)');
+    });
+  });
+
   it('skips the config fetch when data-uri is empty', async () => {
     const el = await fixture(html`
       <zn-preview-frame src="about:blank" frame-origin="https://site.example"></zn-preview-frame>`);

package/src/components/tabs/tabs-navigation.ts

@@ -0,0 +1,197 @@
+// A tab selection belongs to a visit: one starts the first time a tab is
+// recorded at a location and ends when that location is left. A reload continues
+// the visit it interrupted, so the tab stays open and Back still steps through
+// the tabs the visit opened; navigating away ends it, so returning starts from
+// the default tab with no tab history behind it.
+//
+// Selections are remembered in two places, because neither is sufficient alone:
+//
+// - Every history entry carries the tab each container was showing when the
+//   entry was created, so a tab change is its own Back step. Entries are always
+//   merged into, never replaced, so nested pages keep their own records.
+// - Session storage keyed by location survives a reload, which history state
+//   does not: the console pushes a fresh `{uri}` state on every document load,
+//   discarding whatever the reloaded entry held before a page can read it.
+//
+// Both name the visit they were written for. Ending a visit deletes its stored
+// tabs outright; the tabs left on its history entries cannot be rewritten, so
+// they are retired instead - the visit they name no longer exists.
+
+export const TAB_STORE_PREFIX = 'zntab:';
+
+const RESTORING_NAVIGATION_TYPES = ['reload', 'back_forward'];
+
+const VISIT_STORE_KEY = '__znTabsVisit';
+
+const TABS_HISTORY_KEY = '__znTabs';
+
+interface TabsHistoryRecord {
+  visit: string;
+  tabs: Record<string, string>;
+}
+
+interface TabsHistoryState {
+  [TABS_HISTORY_KEY]?: TabsHistoryRecord;
+}
+
+const restorableLocations = new Set<string>();
+
+let visitCount = 0;
+
+function sessionStore(): Storage | null {
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+function locationKey(): string {
+  return window.location.pathname + window.location.search;
+}
+
+function documentNavigationType(): string {
+  const entries = window.performance?.getEntriesByType('navigation') as PerformanceNavigationTiming[] | undefined;
+  return entries?.[0]?.type ?? '';
+}
+
+/** Scopes a store key to the current location, so each page keeps its own tab. */
+export function locationScopedKey(key: string): string {
+  return `${key}@${locationKey()}`;
+}
+
+function visitStoreKey(): string {
+  return TAB_STORE_PREFIX + locationScopedKey(VISIT_STORE_KEY);
+}
+
+/** The visit the current location is on, or an empty string before one starts. */
+function currentVisit(): string {
+  return sessionStore()?.getItem(visitStoreKey()) ?? '';
+}
+
+// Starts a visit for the current location, unless one is already under way - a
+// reload lands mid visit and must continue it rather than begin a new one.
+function startLocationVisit(): void {
+  const store = sessionStore();
+  if (store === null || currentVisit() !== '') {
+    return;
+  }
+
+  visitCount += 1;
+  store.setItem(visitStoreKey(), `${Date.now()}-${visitCount}`);
+}
+
+/**
+ * Ends the visits to every location other than the one on screen, discarding
+ * the tabs they were left showing. Called whenever the location may have
+ * changed, so the only tabs ever remembered are the current page's.
+ */
+export function endVisitsToOtherLocations(): void {
+  const store = sessionStore();
+  if (store === null) {
+    return;
+  }
+
+  const suffix = `@${locationKey()}`;
+  for (let index = store.length - 1; index >= 0; index--) {
+    const key = store.key(index);
+    if (key !== null && key.startsWith(TAB_STORE_PREFIX) && !key.endsWith(suffix)) {
+      store.removeItem(key);
+    }
+  }
+}
+
+if (RESTORING_NAVIGATION_TYPES.includes(documentNavigationType())) {
+  restorableLocations.add(locationKey());
+}
+
+// A document load lands on the only location still worth remembering: every
+// other one was navigated away from, whether or not a page was around to see it.
+endVisitsToOtherLocations();
+
+window.addEventListener('popstate', () => {
+  restorableLocations.add(locationKey());
+  endVisitsToOtherLocations();
+}, {passive: true});
+
+/**
+ * Whether the current location was reached in a way that should replay the tab
+ * it was last left on: a reload, or a history traversal. A fresh navigation -
+ * including a client side one to a location visited earlier - returns false.
+ */
+export function isRestorableLocation(): boolean {
+  return restorableLocations.has(locationKey());
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === 'object' ? value as Record<string, unknown> : null;
+}
+
+function historyRecord(): TabsHistoryRecord | null {
+  const state = asRecord(window.history.state);
+  const record = state === null ? null : asRecord((state as TabsHistoryState)[TABS_HISTORY_KEY]);
+  const tabs = record === null ? null : asRecord(record.tabs);
+
+  if (record === null || tabs === null || typeof record.visit !== 'string') {
+    return null;
+  }
+
+  return {visit: record.visit, tabs: tabs as Record<string, string>};
+}
+
+/** The tab the current history entry was left showing, if it recorded one for the visit under way. */
+export function getHistoryTab(key: string): string | null {
+  if (!key) {
+    return null;
+  }
+
+  const visit = currentVisit();
+  const record = historyRecord();
+  if (visit === '' || record === null || record.visit !== visit) {
+    return null;
+  }
+
+  const tab = record.tabs[key];
+  return typeof tab === 'string' ? tab : null;
+}
+
+// The host's own state is carried over so its entry stays intact - the console
+// reads `state.uri` on popstate - and the url is left exactly as it is.
+function writeHistoryTab(key: string, tab: string, push: boolean): void {
+  startLocationVisit();
+
+  const visit = currentVisit();
+  if (!key || visit === '') {
+    return;
+  }
+
+  const record = historyRecord();
+  const tabs = record !== null && record.visit === visit ? record.tabs : {};
+
+  // Re-recording what the entry already says would be a wasted history write,
+  // and browsers cap how many of those a page may make.
+  if (!push && tabs[key] === tab) {
+    return;
+  }
+
+  const state = {
+    ...asRecord(window.history.state),
+    [TABS_HISTORY_KEY]: {visit, tabs: {...tabs, [key]: tab}}
+  };
+
+  if (push) {
+    window.history.pushState(state, '', window.location.href);
+  } else {
+    window.history.replaceState(state, '');
+  }
+}
+
+/** Adds a history entry for a tab change, making it its own Back step. */
+export function pushHistoryTab(key: string, tab: string): void {
+  writeHistoryTab(key, tab, true);
+}
+
+/** Records the tab on the current entry without adding a Back step. */
+export function replaceHistoryTab(key: string, tab: string): void {
+  writeHistoryTab(key, tab, false);
+}