chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/models/persistence/editFileSystemView.css

@@ -8,12 +8,9 @@
   display: flex;
   flex-direction: column;
   min-height: var(--sys-size-16);
-  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
-  padding: var(--sys-size-5) var(--sys-size-6);
-
-  & > .url-header {
-    height: var(--sys-size-9);
-  }
+  border-bottom: var(--sys-size-1) solid var(--app-color-card-divider);
+  padding: var(--sys-size-4) var(--sys-size-6);
+  gap: var(--sys-size-4);
 
   & > .excluded-folder-url {
     color: var(--sys-color-on-surface-subtle);
@@ -58,11 +55,19 @@
 }
 
 .list {
-  border: none;
+  &:has(div) {
+    border: none;
+  }
 }
 
 .list-item {
-  padding: 0 var(--sys-size-6);
+  padding-left: var(--sys-size-11);
+
+  &:not(:last-child) {
+    .file-system-list-item {
+      border-bottom: var(--sys-size-1) solid var(--app-color-card-divider);
+    }
+  }
 }
 
 .editor-buttons {

package/front_end/models/text_utils/Text.test.ts

@@ -68,7 +68,7 @@ describe('Text', () => {
     const textRange = new TextUtils.TextRange.TextRange(1, 0, 2, 6);
     const sourceRange = text.toSourceRange(textRange);
     assert.strictEqual(sourceRange.offset, 1, 'offset was not set correctly');
-    assert.strictEqual(sourceRange.length, 13, 'length was not set correctly');
+    assert.lengthOf(sourceRange, 13, 'length was not set correctly');
   });
 
   it('should return a source range with an offset and length of NaN if the startLine is out of range', () => {

package/front_end/models/text_utils/TextRange.test.ts

@@ -14,8 +14,7 @@ interface ExpectedTextRange {
 function assertIsTextRangeAndEqualsRange(
     range: TextUtils.TextRange.TextRange, expectedRange: ExpectedTextRange, description: string) {
   const prefix = description.length ? `${description}, but ` : '';
-  assert.isTrue(
-      range instanceof TextUtils.TextRange.TextRange, `${prefix}range is not a TextUtils.TextRange.TextRange`);
+  assert.instanceOf(range, TextUtils.TextRange.TextRange, `${prefix}range is not a TextUtils.TextRange.TextRange`);
   assert.strictEqual(range.startLine, expectedRange.startLine, `${prefix}range's startLine differs from expectation`);
   assert.strictEqual(
       range.startColumn, expectedRange.startColumn, `${prefix}range's startColumn differs from expectation`);
@@ -26,8 +25,7 @@ function assertIsTextRangeAndEqualsRange(
 function assertIsUnitTextRange(
     range: TextUtils.TextRange.TextRange, line: number, column: number, description: string) {
   const prefix = description.length ? `${description}, but ` : '';
-  assert.isTrue(
-      range instanceof TextUtils.TextRange.TextRange, `${prefix}range is not a TextUtils.TextRange.TextRange`);
+  assert.instanceOf(range, TextUtils.TextRange.TextRange, `${prefix}range is not a TextUtils.TextRange.TextRange`);
   assert.strictEqual(range.startLine, range.endLine, `${prefix}the range is not a unit range: start/end lines differ`);
   assert.strictEqual(
       range.startColumn, range.endColumn, `${prefix}the range is not a unit range: start/end columns differ`);

package/front_end/models/text_utils/TextUtils.test.ts

@@ -8,16 +8,15 @@ describe('TextUtils', () => {
   describe('Utils', () => {
     describe('isSpaceChar', () => {
       it('returns the correct result for various inputs', () => {
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar(' '), true, 'space was not a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('\t'), true, 'tab was not a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('\f'), true, 'formfeed was not a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('\r'), true, 'return was not a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('\v'), true, 'vertical tab was not a space char');
-        assert.strictEqual(
-            TextUtils.TextUtils.Utils.isSpaceChar('\xA0'), true, 'non-breaking space was not a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('\0'), false, 'null was a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('a'), false, 'a was a space char');
-        assert.strictEqual(TextUtils.TextUtils.Utils.isSpaceChar('A'), false, 'A was a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar(' '), 'space was not a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar('\t'), 'tab was not a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar('\f'), 'formfeed was not a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar('\r'), 'return was not a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar('\v'), 'vertical tab was not a space char');
+        assert.isTrue(TextUtils.TextUtils.Utils.isSpaceChar('\xA0'), 'non-breaking space was not a space char');
+        assert.isFalse(TextUtils.TextUtils.Utils.isSpaceChar('\0'), 'null was a space char');
+        assert.isFalse(TextUtils.TextUtils.Utils.isSpaceChar('a'), 'a was a space char');
+        assert.isFalse(TextUtils.TextUtils.Utils.isSpaceChar('A'), 'A was a space char');
       });
     });
 
@@ -31,17 +30,17 @@ describe('TextUtils', () => {
     describe('splitStringByRegexes', () => {
       it('returns the correct result for a single regex', () => {
         let result = TextUtils.TextUtils.Utils.splitStringByRegexes('', [/a/]);
-        assert.strictEqual(result.length, 0, 'length was wrong');
+        assert.lengthOf(result, 0, 'length was wrong');
 
         result = TextUtils.TextUtils.Utils.splitStringByRegexes('a', [/a/]);
-        assert.strictEqual(result.length, 1, 'length was wrong');
+        assert.lengthOf(result, 1, 'length was wrong');
         assert.strictEqual(result[0].value, 'a', 'value was wrong');
         assert.strictEqual(result[0].position, 0, 'position was wrong');
         assert.strictEqual(result[0].regexIndex, 0, 'regex index was wrong');
         assert.deepEqual(result[0].captureGroups, [], 'capture groups was not empty');
 
         result = TextUtils.TextUtils.Utils.splitStringByRegexes('ba b', [/a/]);
-        assert.strictEqual(result.length, 3, 'length was wrong');
+        assert.lengthOf(result, 3, 'length was wrong');
         assert.strictEqual(result[0].value, 'b', 'value was wrong');
         assert.strictEqual(result[0].position, 0, 'position was wrong');
         assert.strictEqual(result[0].regexIndex, -1, 'regex index was wrong');
@@ -57,17 +56,17 @@ describe('TextUtils', () => {
       });
       it('returns the correct result for a multiple regexs', () => {
         let result = TextUtils.TextUtils.Utils.splitStringByRegexes('', [/a/, /b/]);
-        assert.strictEqual(result.length, 0, 'length was wrong');
+        assert.lengthOf(result, 0, 'length was wrong');
 
         result = TextUtils.TextUtils.Utils.splitStringByRegexes('a', [/a/, /b/]);
-        assert.strictEqual(result.length, 1, 'length was wrong');
+        assert.lengthOf(result, 1, 'length was wrong');
         assert.strictEqual(result[0].value, 'a', 'value was wrong');
         assert.strictEqual(result[0].position, 0, 'position was wrong');
         assert.strictEqual(result[0].regexIndex, 0, 'regex index was wrong');
         assert.deepEqual(result[0].captureGroups, [], 'capture groups was not empty');
 
         result = TextUtils.TextUtils.Utils.splitStringByRegexes('ba b', [/a/, /b/]);
-        assert.strictEqual(result.length, 4, 'length was wrong');
+        assert.lengthOf(result, 4, 'length was wrong');
         assert.strictEqual(result[0].value, 'b', 'value was wrong');
         assert.strictEqual(result[0].position, 0, 'position was wrong');
         assert.strictEqual(result[0].regexIndex, 1, 'regex index was wrong');
@@ -87,10 +86,10 @@ describe('TextUtils', () => {
       });
       it('returns the correct result for global regexs', () => {
         let result = TextUtils.TextUtils.Utils.splitStringByRegexes('', [/a/g, /b/g]);
-        assert.strictEqual(result.length, 0, 'length was wrong');
+        assert.lengthOf(result, 0, 'length was wrong');
 
         result = TextUtils.TextUtils.Utils.splitStringByRegexes('a', [/a/g, /b/g]);
-        assert.strictEqual(result.length, 1, 'length was wrong');
+        assert.lengthOf(result, 1, 'length was wrong');
         assert.strictEqual(result[0].value, 'a', 'value was wrong');
         assert.strictEqual(result[0].position, 0, 'position was wrong');
         assert.strictEqual(result[0].regexIndex, 0, 'regex index was wrong');
@@ -105,7 +104,7 @@ describe('TextUtils', () => {
       const filterParser = new TextUtils.TextUtils.FilterParser(['TestVal1']);
       const result = filterParser.parse(testVal);
       assert.strictEqual(result[0].text, testVal, 'text value was not returned correctly');
-      assert.strictEqual(result[0].negative, false, 'negative value was not returned correctly');
+      assert.isFalse(result[0].negative, 'negative value was not returned correctly');
     });
 
     describe('parse', () => {
@@ -330,7 +329,7 @@ describe('TextUtils', () => {
       assert.strictEqual(cloned.key, 'a', 'key was incorrect');
       assert.strictEqual(cloned.text, 'b', 'text was incorrect');
       assert.deepEqual(cloned.regex, /a/, 'regex was incorrect');
-      assert.strictEqual(cloned.negative, true, 'negative was incorrect');
+      assert.isTrue(cloned.negative, 'negative was incorrect');
     });
   });
 
@@ -351,11 +350,11 @@ describe('TextUtils', () => {
       const tokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(callback, findMultiple);
 
       let result = tokenizer.write('a');
-      assert.strictEqual(result, true, 'return value was incorrect');
+      assert.isTrue(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, [], 'callback was called');
 
       result = tokenizer.write('{}');
-      assert.strictEqual(result, true, 'return value was incorrect');
+      assert.isTrue(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, ['a{}'], 'callback had unexpected results');
     });
 
@@ -368,7 +367,7 @@ describe('TextUtils', () => {
       const tokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(callback, findMultiple);
 
       const result = tokenizer.write('{}}');
-      assert.strictEqual(result, true, 'return value was incorrect');
+      assert.isTrue(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, ['{}'], 'callback had unexpected results');
       assert.strictEqual(tokenizer.remainder(), '}', 'remainder was incorrect');
     });
@@ -382,7 +381,7 @@ describe('TextUtils', () => {
       const tokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(callback, findMultiple);
 
       const result = tokenizer.write('"""');
-      assert.strictEqual(result, true, 'return value was incorrect');
+      assert.isTrue(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, [], 'callback had unexpected results');
       assert.strictEqual(tokenizer.remainder(), '"""', 'remainder was incorrect');
     });
@@ -396,7 +395,7 @@ describe('TextUtils', () => {
       const tokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(callback, findMultiple);
 
       const result = tokenizer.write('}}');
-      assert.strictEqual(result, false, 'return value was incorrect');
+      assert.isFalse(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, [], 'callback had unexpected results');
       assert.strictEqual(tokenizer.remainder(), '}}', 'remainder was incorrect');
     });
@@ -410,7 +409,7 @@ describe('TextUtils', () => {
       const tokenizer = new TextUtils.TextUtils.BalancedJSONTokenizer(callback, findMultiple);
 
       const result = tokenizer.write(']]');
-      assert.strictEqual(result, false, 'return value was incorrect');
+      assert.isFalse(result, 'return value was incorrect');
       assert.deepEqual(callbackResults, [], 'callback had unexpected results');
       assert.strictEqual(tokenizer.remainder(), ']]', 'remainder was incorrect');
     });
@@ -421,7 +420,7 @@ describe('TextUtils', () => {
 
     it('handles empty string', () => {
       const result = isMinified('');
-      assert.strictEqual(result, false, 'was minified');
+      assert.isFalse(result, 'was minified');
     });
 
     it('correctly detects a minified HTML document', () => {
@@ -432,7 +431,7 @@ describe('TextUtils', () => {
 <style>* { color: black; }</style>
 </html>
 `;
-      assert.strictEqual(isMinified(text), true);
+      assert.isTrue(isMinified(text));
     });
 
     it('correctly detects minified Closure-style modules', () => {
@@ -450,7 +449,7 @@ for(let e=0;e<l.lineCount();++e){const t=l.lineAt(e);s.lastIndex=0;const i=s.exe
 }catch(e){_._DumpException(e)}
 //# sourceMappingURL=http://some.staging-system.some-company.com/path/to/my/amazing/sourcemap/for/this/file.js.map
 // Some Company.`;
-      assert.strictEqual(isMinified(text), true);
+      assert.isTrue(isMinified(text));
     });
 
     it('doesn\'t detect JavaScript with one very long line in the end as minified', () => {
@@ -464,7 +463,7 @@ for(let e=0;e<l.lineCount();++e){const t=l.lineAt(e);s.lastIndex=0;const i=s.exe
       }
       exports += '};\n';
       const text = `${functions}${exports}`;
-      assert.strictEqual(isMinified(text), false);
+      assert.isFalse(isMinified(text));
     });
   });
 

package/front_end/models/trace/ModelImpl.test.ts

@@ -17,8 +17,8 @@ describeWithEnvironment('TraceModel', function() {
     });
 
     await TraceLoader.rawEvents(this, 'basic.json.gz').then(events => model.parse(events));
-    assert.ok(events.includes('PROGRESS_UPDATE'));
-    assert.ok(events.includes('COMPLETE'));
+    assert.isOk(events.includes('PROGRESS_UPDATE'));
+    assert.isOk(events.includes('COMPLETE'));
   });
 
   it('supports parsing a generic trace that has no browser specific details', async function() {

package/front_end/models/trace/ModelImpl.ts

@@ -116,6 +116,7 @@ export class Model extends EventTarget {
       await this.#processor.parse(traceEvents, {
         isFreshRecording,
         isCPUProfile,
+        metadata,
       });
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid

package/front_end/models/trace/Processor.test.ts

@@ -118,6 +118,7 @@ describeWithEnvironment('TraceProcessor', function() {
           Renderer: Trace.Handlers.ModelHandlers.Renderer,
           Samples: Trace.Handlers.ModelHandlers.Samples,
           AuctionWorklets: Trace.Handlers.ModelHandlers.AuctionWorklets,
+          NetworkRequests: Trace.Handlers.ModelHandlers.NetworkRequests,
         },
         Trace.Types.Configuration.defaults());
 
@@ -253,7 +254,7 @@ describeWithEnvironment('TraceProcessor', function() {
       }
 
       assert.strictEqual(processor.insights.size, 1);
-      assert.deepStrictEqual([...processor.insights.keys()], [Trace.Types.Events.NO_NAVIGATION]);
+      assert.deepEqual([...processor.insights.keys()], [Trace.Types.Events.NO_NAVIGATION]);
     });
 
     it('captures errors thrown by insights', async function() {
@@ -277,8 +278,8 @@ describeWithEnvironment('TraceProcessor', function() {
       }
 
       const insights = Array.from(processor.insights.values());
-      assert.strictEqual(insights.length, 2);
-      assert(insights[1].model.RenderBlocking instanceof Error, 'RenderBlocking did not throw an error');
+      assert.lengthOf(insights, 2);
+      assert.instanceOf(insights[1].model.RenderBlocking, Error, 'RenderBlocking did not throw an error');
       assert.strictEqual(insights[1].model.RenderBlocking.message, 'forced error');
     });
 
@@ -293,7 +294,7 @@ describeWithEnvironment('TraceProcessor', function() {
         throw new Error('No insights');
       }
 
-      assert.deepStrictEqual([...processor.insights.keys()], [
+      assert.deepEqual([...processor.insights.keys()], [
         Trace.Types.Events.NO_NAVIGATION,
         '0BCFC23BC7D7BEDC9F93E912DCCEC1DA',
       ]);
@@ -312,7 +313,7 @@ describeWithEnvironment('TraceProcessor', function() {
         throw new Error('No insights');
       }
 
-      assert.deepStrictEqual([...processor.insights.keys()], [
+      assert.deepEqual([...processor.insights.keys()], [
         Trace.Types.Events.NO_NAVIGATION,
         '0BCFC23BC7D7BEDC9F93E912DCCEC1DA',
       ]);
@@ -325,8 +326,8 @@ describeWithEnvironment('TraceProcessor', function() {
         throw new Error('RenderBlocking threw an error');
       }
 
-      assert.strictEqual(insights[0].model.RenderBlocking.renderBlockingRequests.length, 0);
-      assert.strictEqual(insights[1].model.RenderBlocking.renderBlockingRequests.length, 2);
+      assert.lengthOf(insights[0].model.RenderBlocking.renderBlockingRequests, 0);
+      assert.lengthOf(insights[1].model.RenderBlocking.renderBlockingRequests, 2);
     });
 
     it('returns insights for multiple navigations', async function() {
@@ -338,7 +339,7 @@ describeWithEnvironment('TraceProcessor', function() {
         throw new Error('No insights');
       }
 
-      assert.deepStrictEqual([...processor.insights.keys()], [
+      assert.deepEqual([...processor.insights.keys()], [
         Trace.Types.Events.NO_NAVIGATION,
         '83ACBFD389F1F66EF79CEDB4076EB44A',
         '70BCD304FD2C098BA2513488AB0FF3F2',
@@ -359,10 +360,72 @@ describeWithEnvironment('TraceProcessor', function() {
         throw new Error('RenderBlocking threw an error');
       }
 
-      assert.strictEqual(insights[0].model.RenderBlocking.renderBlockingRequests.length, 0);
-      assert.strictEqual(insights[1].model.RenderBlocking.renderBlockingRequests.length, 0);
-      assert.strictEqual(insights[2].model.RenderBlocking.renderBlockingRequests.length, 0);
-      assert.strictEqual(insights[3].model.RenderBlocking.renderBlockingRequests.length, 1);
+      assert.lengthOf(insights[0].model.RenderBlocking.renderBlockingRequests, 0);
+      assert.lengthOf(insights[1].model.RenderBlocking.renderBlockingRequests, 0);
+      assert.lengthOf(insights[2].model.RenderBlocking.renderBlockingRequests, 0);
+      assert.lengthOf(insights[3].model.RenderBlocking.renderBlockingRequests, 1);
+    });
+
+    it('sorts insights by estimated savings and field data', async function() {
+      const getInsightOrder = async (includeMetadata: boolean) => {
+        const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
+        const file = await TraceLoader.rawEvents(this, 'image-delivery.json.gz');
+
+        let metadata;
+        if (includeMetadata) {
+          metadata = await TraceLoader.metadata(this, 'image-delivery.json.gz');
+        }
+
+        await processor.parse(file, {isFreshRecording: true, isCPUProfile: false, metadata});
+        if (!processor.insights) {
+          throw new Error('No insights');
+        }
+
+        const insightSet = Array.from(processor.insights.values()).at(-1);
+        if (!insightSet) {
+          throw new Error('No insight set');
+        }
+
+        // It's been sorted already ... but let's add some fake estimated savings and re-sort to
+        // better test the sorting.
+        insightSet.model.CLSCulprits.metricSavings = {CLS: 0.07};
+        processor.sortInsightSet(processor.insights, insightSet, metadata ?? null);
+
+        return Object.keys(insightSet.model);
+      };
+
+      const orderWithoutMetadata = await getInsightOrder(false);
+      assert.deepEqual(orderWithoutMetadata, [
+        'CLSCulprits',
+        'Viewport',
+        'InteractionToNextPaint',
+        'LCPPhases',
+        'LCPDiscovery',
+        'RenderBlocking',
+        'ImageDelivery',
+        'DocumentLatency',
+        'FontDisplay',
+        'DOMSize',
+        'ThirdParties',
+        'SlowCSSSelector',
+      ]);
+
+      const orderWithMetadata = await getInsightOrder(true);
+      // Viewport is first, before CLSCulprits, since the field data produces a higher weight for INP than for CLS.
+      assert.deepEqual(orderWithMetadata, [
+        'Viewport',
+        'CLSCulprits',
+        'InteractionToNextPaint',
+        'LCPPhases',
+        'LCPDiscovery',
+        'RenderBlocking',
+        'ImageDelivery',
+        'DocumentLatency',
+        'FontDisplay',
+        'DOMSize',
+        'ThirdParties',
+        'SlowCSSSelector',
+      ]);
     });
   });
 });

package/front_end/models/trace/Processor.ts

@@ -61,6 +61,7 @@ export interface ParseOptions {
    * @default false
    */
   isCPUProfile?: boolean;
+  metadata?: Types.File.MetaData;
 }
 
 export class TraceProcessor extends EventTarget {
@@ -173,7 +174,7 @@ export class TraceProcessor extends EventTarget {
       this.#status = Status.PARSING;
       await this.#computeParsedTrace(traceEvents);
       if (this.#data && !options.isCPUProfile) {  // We do not calculate insights for CPU Profiles.
-        this.#computeInsights(this.#data, traceEvents);
+        this.#computeInsights(this.#data, traceEvents, options);
       }
       this.#status = Status.FINISHED_PARSING;
     } catch (e) {
@@ -342,9 +343,104 @@ export class TraceProcessor extends EventTarget {
     return {graph, simulator, metrics};
   }
 
-  #computeInsightSets(
+  /**
+   * Sort the insight models based on the impact of each insight's estimated savings, additionally weighted by the
+   * worst metrics according to field data (if present).
+   */
+  sortInsightSet(
+      insights: Insights.Types.TraceInsightSets, insightSet: Insights.Types.InsightSet,
+      metadata: Types.File.MetaData|null): void {
+    // The initial order of the insights is alphabetical, based on `front_end/models/trace/insights/Models.ts`.
+    // The order here provides a baseline that groups insights in a more logical way.
+    const baselineOrder: Record<keyof Insights.Types.InsightModels, null> = {
+      InteractionToNextPaint: null,
+      LCPPhases: null,
+      LCPDiscovery: null,
+      CLSCulprits: null,
+      RenderBlocking: null,
+      ImageDelivery: null,
+      DocumentLatency: null,
+      FontDisplay: null,
+      Viewport: null,
+      DOMSize: null,
+      ThirdParties: null,
+      SlowCSSSelector: null,
+    };
+
+    // Determine the weights for each metric based on field data, utilizing the same scoring curve that Lighthouse uses.
+    const weights = Insights.Common.calculateMetricWeightsForSorting(insightSet, metadata);
+
+    // Normalize the estimated savings to a single number, weighted by its relative impact
+    // to the page experience based on the same scoring curve that Lighthouse uses.
+    const observedLcp = Insights.Common.getLCP(insights, insightSet.id)?.value;
+    const observedCls = Insights.Common.getCLS(insights, insightSet.id).value;
+
+    // INP is special - if users did not interact with the page, we'll have no INP, but we should still
+    // be able to prioritize insights based on this metric. When we observe no interaction, instead use
+    // a default value for the baseline INP.
+    const observedInp = Insights.Common.getINP(insights, insightSet.id)?.value ?? 200;
+
+    const observedLcpScore =
+        observedLcp !== undefined ? Insights.Common.evaluateLCPMetricScore(observedLcp) : undefined;
+    const observedInpScore = Insights.Common.evaluateINPMetricScore(observedInp);
+    const observedClsScore = Insights.Common.evaluateCLSMetricScore(observedCls);
+
+    const insightToSortingRank = new Map<string, number>();
+    for (const [name, model] of Object.entries(insightSet.model)) {
+      const lcp = model.metricSavings?.LCP ?? 0;
+      const inp = model.metricSavings?.INP ?? 0;
+      const cls = model.metricSavings?.CLS ?? 0;
+
+      const lcpPostSavings = observedLcp !== undefined ? Math.max(0, observedLcp - lcp) : undefined;
+      const inpPostSavings = Math.max(0, observedInp - inp);
+      const clsPostSavings = Math.max(0, observedCls - cls);
+
+      let score = 0;
+      if (weights.lcp && lcp && observedLcpScore !== undefined && lcpPostSavings !== undefined) {
+        score += weights.lcp * (Insights.Common.evaluateLCPMetricScore(lcpPostSavings) - observedLcpScore);
+      }
+      if (weights.inp && inp && observedInpScore !== undefined) {
+        score += weights.inp * (Insights.Common.evaluateINPMetricScore(inpPostSavings) - observedInpScore);
+      }
+      if (weights.cls && cls && observedClsScore !== undefined) {
+        score += weights.cls * (Insights.Common.evaluateCLSMetricScore(clsPostSavings) - observedClsScore);
+      }
+
+      insightToSortingRank.set(name, score);
+    }
+
+    // Now perform the actual sorting.
+    const baselineOrderKeys = Object.keys(baselineOrder);
+    const orderedKeys = Object.keys(insightSet.model);
+    orderedKeys.sort((a, b) => {
+      const a1 = baselineOrderKeys.indexOf(a);
+      const b1 = baselineOrderKeys.indexOf(b);
+      if (a1 >= 0 && b1 >= 0) {
+        return a1 - b1;
+      }
+      if (a1 >= 0) {
+        return -1;
+      }
+      if (b1 >= 0) {
+        return 1;
+      }
+      return 0;
+    });
+    orderedKeys.sort((a, b) => (insightToSortingRank.get(b) ?? 0) - (insightToSortingRank.get(a) ?? 0));
+
+    const newModel = {} as Insights.Types.InsightModels;
+    for (const key of orderedKeys as Array<keyof Insights.Types.InsightModels>) {
+      const model = insightSet.model[key];
+      // @ts-expect-error Maybe someday typescript will be powerful enough to handle this.
+      newModel[key] = model;
+    }
+    insightSet.model = newModel;
+  }
+
+  #computeInsightSet(
       insights: Insights.Types.TraceInsightSets, parsedTrace: Handlers.Types.ParsedTrace,
-      insightRunners: Partial<typeof Insights.Models>, context: Insights.Types.InsightSetContext): void {
+      insightRunners: Partial<typeof Insights.Models>, context: Insights.Types.InsightSetContext,
+      options: ParseOptions): void {
     const model = {} as Insights.Types.InsightSet['model'];
 
     for (const [name, insight] of Object.entries(insightRunners)) {
@@ -376,7 +472,7 @@ export class TraceProcessor extends EventTarget {
       return;
     }
 
-    const insightSets = {
+    const insightSet: Insights.Types.InsightSet = {
       id,
       url,
       navigation,
@@ -384,13 +480,16 @@ export class TraceProcessor extends EventTarget {
       bounds: context.bounds,
       model,
     };
-    insights.set(insightSets.id, insightSets);
+    insights.set(insightSet.id, insightSet);
+    this.sortInsightSet(insights, insightSet, options.metadata ?? null);
   }
 
   /**
    * Run all the insights and set the result to `#insights`.
    */
-  #computeInsights(parsedTrace: Handlers.Types.ParsedTrace, traceEvents: readonly Types.Events.Event[]): void {
+  #computeInsights(
+      parsedTrace: Handlers.Types.ParsedTrace, traceEvents: readonly Types.Events.Event[],
+      options: ParseOptions): void {
     this.#insights = new Map();
 
     const enabledInsightRunners = TraceProcessor.getEnabledInsightRunners(parsedTrace);
@@ -410,7 +509,7 @@ export class TraceProcessor extends EventTarget {
           bounds,
           frameId: parsedTrace.Meta.mainFrameId,
         };
-        this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+        this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
       }
       // If threshold is not met, then the very beginning of the trace is ignored by the insights engine.
     } else {
@@ -418,7 +517,7 @@ export class TraceProcessor extends EventTarget {
         bounds: parsedTrace.Meta.traceBounds,
         frameId: parsedTrace.Meta.mainFrameId,
       };
-      this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+      this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
     }
 
     // Now run the insights for each navigation in isolation.
@@ -466,7 +565,7 @@ export class TraceProcessor extends EventTarget {
         lantern,
       };
 
-      this.#computeInsightSets(this.#insights, parsedTrace, enabledInsightRunners, context);
+      this.#computeInsightSet(this.#insights, parsedTrace, enabledInsightRunners, context, options);
     }
   }
 }

package/front_end/models/trace/extras/Metadata.test.ts

@@ -35,6 +35,7 @@ describeWithEnvironment('Trace Metadata', () => {
         packetReordering: undefined,
         targetLatency: undefined,
       },
+      cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
       emulatedDeviceTitle: undefined,
       hardwareConcurrency: 1,
@@ -70,6 +71,7 @@ describeWithEnvironment('Trace Metadata', () => {
         targetLatency: undefined,
       },
       emulatedDeviceTitle: undefined,
+      cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
       hardwareConcurrency: 1,
     });
@@ -103,6 +105,7 @@ describeWithEnvironment('Trace Metadata', () => {
         packetReordering: undefined,
         targetLatency: undefined,
       },
+      cruxFieldData: undefined,
       dataOrigin: Trace.Types.File.DataOrigin.TRACE_EVENTS,
       emulatedDeviceTitle: undefined,
       hardwareConcurrency: undefined,

package/front_end/models/trace/extras/Metadata.ts

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../../core/sdk/sdk.js';
+import type * as CrUXManager from '../../crux-manager/crux-manager.js';
 import * as Types from '../types/types.js';
 
 export async function forNewRecording(
-    isCpuProfile: boolean, recordStartTime?: number, emulatedDeviceTitle?: string): Promise<Types.File.MetaData> {
+    isCpuProfile: boolean, recordStartTime?: number, emulatedDeviceTitle?: string,
+    cruxFieldData?: CrUXManager.PageResult[]): Promise<Types.File.MetaData> {
   try {
     if (isCpuProfile) {
       // For CPU profile, only specify data origin
@@ -66,6 +68,7 @@ export async function forNewRecording(
       networkThrottlingConditions,
       hardwareConcurrency,
       dataOrigin: Types.File.DataOrigin.TRACE_EVENTS,
+      cruxFieldData,
     };
   } catch {
     // If anything went wrong, it does not really matter. The impact is that we