Merge pull request #3391 from lightpanda-io/resource-timing

webapi: resource-timing

Author: karlseguin

src/browser/Frame.zig

@@ -410,17 +410,6 @@ pub fn init(self: *Frame, frame_id: u32, page: *Page, opts: InitOpts) !void {
         ._http_owner = undefined,
     };
     self._queued_events = &self._queued_events_1;
-    self._http_owner = .{
-        .blob_urls = &page.blob_urls,
-        .origin = &self.origin,
-        .url = &self.url,
-        .parent = if (parent) |p| &p._http_owner else null,
-        .frame_id = frame_id,
-        .document_frame_id = frame_id,
-        .loader_id = self._loader_id,
-        .cookie_jar = &session.cookie_jar,
-        .notification = session.notification,
-    };
 
     var screen: *Screen = undefined;
     var visual_viewport: *VisualViewport = undefined;
@@ -442,7 +431,7 @@ pub fn init(self: *Frame, frame_id: u32, page: *Page, opts: InitOpts) !void {
         ._proto = undefined,
         ._document = self.document,
         ._location = undefined,
-        ._performance = .init(),
+        ._performance = .init(factory, arena),
         ._screen = screen,
         ._visual_viewport = visual_viewport,
         ._cross_origin_wrapper = undefined,
@@ -458,6 +447,19 @@ pub fn init(self: *Frame, frame_id: u32, page: *Page, opts: InitOpts) !void {
     }
     self.window._cross_origin_wrapper = .{ .window = self.window };
 
+    self._http_owner = .{
+        .blob_urls = &page.blob_urls,
+        .origin = &self.origin,
+        .url = &self.url,
+        .parent = if (parent) |p| &p._http_owner else null,
+        .frame_id = frame_id,
+        .document_frame_id = frame_id,
+        .loader_id = self._loader_id,
+        .cookie_jar = &session.cookie_jar,
+        .notification = session.notification,
+        .performance = &self.window._performance,
+    };
+
     self._style_manager = try StyleManager.init(self);
     errdefer self._style_manager.deinit();
 
@@ -472,6 +474,7 @@ pub fn init(self: *Frame, frame_id: u32, page: *Page, opts: InitOpts) !void {
         .local_arena = self.local_arena,
     });
     errdefer browser.env.destroyContext(self.js);
+    self.window._performance._scheduler = &self.js.scheduler;
 
     const location = try Location.init("about:blank", self);
     // We're holding a reference in Zig-side.

src/browser/tests/domexception.html

@@ -121,6 +121,20 @@
   <a id="link" href="foo" class="ok">OK</a>
 </div>
 
+<script id=custom_name_outlives_call>
+  // The constructor's strings come from the call arena: they must be copied.
+  window.__custom_exception = new DOMException('took too ' + 'long', 'Timeout' + 'Error');
+  testing.expectEqual('TimeoutError', window.__custom_exception.name);
+</script>
+
+<script id=custom_name_outlives_call_2>
+  const e = window.__custom_exception;
+  testing.expectEqual('TimeoutError', e.name);
+  testing.expectEqual('took too long', e.message);
+  testing.expectEqual(23, e.code);
+  testing.expectEqual('TimeoutError: took too long', e.toString());
+</script>
+
 <script id=hierarchy_error>
   let link = $('#link');
   let content = $('#content');

src/browser/tests/performance_observer/performance_observer.html

@@ -71,7 +71,7 @@
 </script>
 
 <script>
-  testing.expectEqual(['mark', 'measure'], PerformanceObserver.supportedEntryTypes);
+  testing.expectEqual(['mark', 'measure', 'resource'], PerformanceObserver.supportedEntryTypes);
 </script>
 
 <script id="list_get_entries_by_type">
@@ -174,3 +174,36 @@
   });
 }
 </script>
+
+<script id="observe_mode_is_fixed">
+{
+  const observer = new PerformanceObserver(() => {});
+  observer.observe({ entryTypes: ["mark"] });
+  testing.expectError("InvalidModificationError", () => observer.observe({ type: "mark" }));
+  observer.disconnect();
+
+  const single = new PerformanceObserver(() => {});
+  single.observe({ type: "mark" });
+  testing.expectError("InvalidModificationError", () => single.observe({ entryTypes: ["mark"] }));
+  testing.expectError("TypeError", () => single.observe({ type: "mark", entryTypes: ["mark"] }));
+  testing.expectError("TypeError", () => single.observe({}));
+  single.disconnect();
+}
+</script>
+
+<script id="buffered_ignored_with_entry_types" type=module>
+{
+  const state = await testing.async();
+  performance.mark("before_observer");
+  // Like every engine (and unlike the spec's TypeError), buffered is
+  // ignored alongside entryTypes: no past entry is delivered.
+  let delivered = 0;
+  const observer = new PerformanceObserver((list) => { delivered += list.getEntries().length; });
+  observer.observe({ entryTypes: ["mark"], buffered: true });
+  setTimeout(() => state.resolve(), 20);
+  await state.done(() => {
+    observer.disconnect();
+    testing.expectEqual(0, delivered);
+  });
+}
+</script>

src/browser/tests/performance_resource_timing.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<script src="testing.js"></script>
+
+<script id=parser_loaded_script>
+  // testing.js itself was fetched by the parser.
+  const url = testing.BASE_URL + 'testing.js';
+  const entries = performance.getEntriesByName(url);
+  testing.expectEqual(1, entries.length);
+  const e = entries[0];
+  testing.expectEqual(true, e instanceof PerformanceResourceTiming);
+  testing.expectEqual(true, e instanceof PerformanceEntry);
+  testing.expectEqual('resource', e.entryType);
+  testing.expectEqual(url, e.name);
+  testing.expectEqual('script', e.initiatorType);
+  testing.expectEqual(200, e.responseStatus);
+  testing.expectEqual(true, e.decodedBodySize > 1000);
+  testing.expectEqual(e.decodedBodySize, e.encodedBodySize);
+  testing.expectEqual(true, e.transferSize > e.encodedBodySize);
+  testing.expectEqual(1, performance.getEntriesByType('resource').length);
+  testing.expectEqual(e, performance.getEntries()[0]);
+</script>
+
+<script id=fetch_entry type=module>
+  {
+    const state = await testing.async();
+    const url = testing.ORIGIN + '/xhr';
+    const before = performance.now();
+    await (await fetch(url)).text();
+    const after = performance.now();
+    state.resolve();
+    await state.done(() => {
+      const list = performance.getEntriesByName(url, 'resource');
+      testing.expectEqual(1, list.length);
+      const e = list[0];
+      testing.expectEqual('fetch', e.initiatorType);
+      testing.expectEqual('http/1.1', e.nextHopProtocol);
+      testing.expectEqual('', e.deliveryType);
+      testing.expectEqual(0, e.workerStart);
+      testing.expectEqual(0, e.redirectStart);
+      testing.expectEqual(0, e.redirectEnd);
+      testing.expectEqual(true, e.startTime >= before);
+      testing.expectEqual(e.startTime, e.fetchStart);
+      testing.expectEqual(true, e.fetchStart <= e.domainLookupStart);
+      testing.expectEqual(true, e.domainLookupStart <= e.domainLookupEnd);
+      testing.expectEqual(true, e.domainLookupEnd <= e.connectStart);
+      testing.expectEqual(true, e.connectStart <= e.connectEnd);
+      testing.expectEqual(true, e.connectEnd <= e.requestStart);
+      testing.expectEqual(true, e.requestStart <= e.responseStart);
+      testing.expectEqual(true, e.responseStart <= e.responseEnd);
+      testing.expectEqual(true, e.responseEnd <= after);
+      testing.expectEqual(0, e.secureConnectionStart);
+      testing.expectEqual(e.responseEnd - e.startTime, e.duration);
+      testing.expectEqual(100, e.encodedBodySize);
+      testing.expectEqual(100, e.decodedBodySize);
+      testing.expectEqual(true, e.transferSize > 100);
+      testing.expectEqual(200, e.responseStatus);
+      testing.expectEqual('text/html', e.contentType);
+      testing.expectEqual('', e.contentEncoding);
+      testing.expectEqual(0, e.firstInterimResponseStart);
+      testing.expectEqual(e.responseStart, e.finalResponseHeadersStart);
+
+      const json = e.toJSON();
+      testing.expectEqual(url, json.name);
+      testing.expectEqual('resource', json.entryType);
+      testing.expectEqual('fetch', json.initiatorType);
+      testing.expectEqual(e.responseEnd, json.responseEnd);
+      testing.expectEqual(true, JSON.stringify(e).includes('"encodedBodySize":100'));
+    });
+  }
+</script>
+
+<script id=xhr_entry type=module>
+  {
+    const state = await testing.async();
+    const url = testing.ORIGIN + '/xhr/json';
+    await new Promise((resolve) => {
+      const xhr = new XMLHttpRequest();
+      xhr.onload = resolve;
+      xhr.open('GET', url);
+      xhr.send();
+    });
+    state.resolve();
+    await state.done(() => {
+      const e = performance.getEntriesByName(url)[0];
+      testing.expectEqual('xmlhttprequest', e.initiatorType);
+      testing.expectEqual('application/json', e.contentType);
+      testing.expectEqual(true, JSON.stringify(e).includes('"contentEncoding":""'));
+      testing.expectEqual(200, e.responseStatus);
+    });
+  }
+</script>
+
+<script id=redirect type=module>
+  {
+    const state = await testing.async();
+    const url = testing.ORIGIN + '/resource-timing/redirect';
+    const res = await fetch(url);
+    await res.text();
+    state.resolve();
+    await state.done(() => {
+      testing.expectEqual(testing.ORIGIN + '/resource-timing/plain', res.url);
+      // Named after the URL as requested, not the one it landed on.
+      testing.expectEqual(0, performance.getEntriesByName(res.url).length);
+      const list = performance.getEntriesByName(url);
+      testing.expectEqual(1, list.length);
+      const e = list[0];
+      testing.expectEqual(e.startTime, e.redirectStart);
+      testing.expectEqual(true, e.redirectEnd >= e.redirectStart);
+      testing.expectEqual(e.redirectEnd, e.fetchStart);
+      testing.expectEqual(true, e.responseStart >= e.fetchStart);
+      testing.expectEqual(true, e.responseEnd >= e.responseStart);
+      testing.expectEqual(200, e.responseStatus);
+      testing.expectEqual('window.__rt_plain = true;'.length, e.decodedBodySize);
+    });
+  }
+</script>
+
+<script id=cross_origin_opaque type=module>
+  {
+    const state = await testing.async();
+    // localhost is a different origin than the 127.0.0.1 test page; without
+    // Timing-Allow-Origin only the start, end and duration are exposed.
+    const url = 'http://localhost:9582/resource-timing/plain';
+    const before = performance.now();
+    await new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = url;
+      s.onload = resolve;
+      s.onerror = reject;
+      document.head.appendChild(s);
+    });
+    state.resolve();
+    await state.done(() => {
+      testing.expectEqual(true, window.__rt_plain);
+      const e = performance.getEntriesByName(url)[0];
+      testing.expectEqual('script', e.initiatorType);
+      testing.expectEqual(true, e.startTime >= before);
+      testing.expectEqual(true, e.responseEnd > e.startTime);
+      testing.expectEqual(e.responseEnd - e.startTime, e.duration);
+      testing.expectEqual(e.startTime, e.fetchStart);
+      testing.expectEqual(0, e.domainLookupStart);
+      testing.expectEqual(0, e.domainLookupEnd);
+      testing.expectEqual(0, e.connectStart);
+      testing.expectEqual(0, e.connectEnd);
+      testing.expectEqual(0, e.requestStart);
+      testing.expectEqual(0, e.responseStart);
+      testing.expectEqual(0, e.transferSize);
+      testing.expectEqual(0, e.encodedBodySize);
+      testing.expectEqual(0, e.decodedBodySize);
+      testing.expectEqual(0, e.responseStatus);
+      testing.expectEqual('', e.nextHopProtocol);
+      testing.expectEqual('', e.contentType);
+    });
+  }
+</script>
+
+<script id=cross_origin_timing_allow type=module>
+  {
+    const state = await testing.async();
+    const url = 'http://localhost:9582/resource-timing/tao';
+    await new Promise((resolve, reject) => {
+      const s = document.createElement('script');
+      s.src = url;
+      s.onload = resolve;
+      s.onerror = reject;
+      document.head.appendChild(s);
+    });
+    state.resolve();
+    await state.done(() => {
+      testing.expectEqual(true, window.__rt_tao);
+      const e = performance.getEntriesByName(url)[0];
+      testing.expectEqual(true, e.requestStart >= e.fetchStart);
+      testing.expectEqual(true, e.responseStart >= e.requestStart);
+      testing.expectEqual(true, e.transferSize > e.encodedBodySize);
+      testing.expectEqual('window.__rt_tao = true;'.length, e.decodedBodySize);
+      testing.expectEqual(200, e.responseStatus);
+      testing.expectEqual('http/1.1', e.nextHopProtocol);
+      testing.expectEqual('text/javascript', e.contentType);
+    });
+  }
+</script>
+
+<script id=failed_fetch type=module>
+  {
+    const state = await testing.async();
+    // Nothing listens on port 1: the fetch fails without a response.
+    const url = 'http://127.0.0.1:1/nope';
+    let failed = false;
+    try {
+      await fetch(url);
+    } catch (err) {
+      failed = true;
+    }
+    state.resolve();
+    await state.done(() => {
+      testing.expectEqual(true, failed);
+      const list = performance.getEntriesByName(url);
+      testing.expectEqual(1, list.length);
+      const e = list[0];
+      testing.expectEqual('fetch', e.initiatorType);
+      testing.expectEqual(true, e.startTime > 0);
+      testing.expectEqual(true, e.responseEnd >= e.startTime);
+      testing.expectEqual(e.startTime, e.fetchStart);
+      testing.expectEqual(0, e.responseStatus);
+      testing.expectEqual(0, e.transferSize);
+      testing.expectEqual(0, e.responseStart);
+      testing.expectEqual('', e.contentType);
+    });
+  }
+</script>
+
+<script id=iframe_entry type=module>
+  {
+    const state = await testing.async();
+    const url = testing.ORIGIN + '/redirect-target';
+    const frame = document.createElement('iframe');
+    await new Promise((resolve) => {
+      frame.src = url;
+      frame.onload = resolve;
+      document.body.appendChild(frame);
+    });
+    state.resolve();
+    await state.done(() => {
+      // A frame's document fetch is a resource of its parent, not of itself.
+      const e = performance.getEntriesByName(url)[0];
+      testing.expectEqual('iframe', e.initiatorType);
+      testing.expectEqual('text/html', e.contentType);
+      testing.expectEqual(200, e.responseStatus);
+      testing.expectEqual(0, frame.contentWindow.performance.getEntriesByType('resource').length);
+    });
+  }
+</script>
+
+<script id=observer type=module>
+  {
+    const state = await testing.async();
+    const url = testing.ORIGIN + '/xhr/xml';
+    const observed = [];
+    const po = new PerformanceObserver((list) => {
+      for (const e of list.getEntries()) {
+        observed.push(e);
+      }
+    });
+    po.observe({ type: 'resource' });
+
+    const buffered = [];
+    const po2 = new PerformanceObserver((list) => {
+      for (const e of list.getEntries()) {
+        buffered.push(e);
+      }
+    });
+    po2.observe({ type: 'resource', buffered: true });
+
+    await (await fetch(url)).text();
+    // Observers are notified from a queued task.
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    state.resolve();
+    await state.done(() => {
+      po.disconnect();
+      po2.disconnect();
+      testing.expectEqual(true, PerformanceObserver.supportedEntryTypes.includes('resource'));
+      testing.expectEqual(true, observed.some((e) => e.name === url && e.entryType === 'resource'));
+      // The wire type is application/xml; the API reports the minimized essence.
+      testing.expectEqual('application/xml', performance.getEntriesByName(url)[0].contentType);
+      testing.expectEqual(false, observed.some((e) => e.name.endsWith('/testing.js')));
+      testing.expectEqual(true, buffered.some((e) => e.name.endsWith('/testing.js')));
+      testing.expectEqual(true, buffered.some((e) => e.name === url));
+    });
+  }
+</script>