{"version":3,"file":"Viewport.js","sourceRoot":"","sources":["../../../../../../../front_end/models/trace/insights/Viewport.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright 2024 The Chromium Authors. All rights reserved.\n// Use of this source code is governed by a BSD-style license that can be\n// found in the LICENSE file.\n\nimport * as i18n from '../../../core/i18n/i18n.js';\nimport * as Platform from '../../../core/platform/platform.js';\nimport * as Handlers from '../handlers/handlers.js';\nimport * as Helpers from '../helpers/helpers.js';\nimport * as Types from '../types/types.js';\n\nimport {\n  InsightCategory,\n  InsightKeys,\n  type InsightModel,\n  type InsightSetContext,\n  InsightWarning,\n  type PartialInsightModel,\n} from './types.js';\n\nexport const UIStrings = {\n  /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */\n  title: 'Optimize viewport for mobile',\n  /**\n   * @description Text to tell the user how a viewport meta element can improve performance. \\xa0 is a non-breaking space\n   */\n  description:\n      'Tap interactions may be [delayed by up to 300\\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.',\n  /**\n   * @description Text for a label describing the portion of an interaction event that was delayed due to a bad mobile viewport.\n   */\n  mobileTapDelayLabel: 'Mobile tap delay',\n} as const;\n\nconst str_ = i18n.i18n.registerUIStrings('models/trace/insights/Viewport.ts', UIStrings);\nexport const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);\n\nexport type ViewportInsightModel = InsightModel<typeof UIStrings, {\n  mobileOptimized: boolean | null,\n  viewportEvent?: Types.Events.ParseMetaViewport,\n  longPointerInteractions?: Types.Events.SyntheticInteractionPair[],\n}>;\n\nfunction finalize(partialModel: PartialInsightModel<ViewportInsightModel>): ViewportInsightModel {\n  return {\n    insightKey: InsightKeys.VIEWPORT,\n    strings: UIStrings,\n    title: i18nString(UIStrings.title),\n    description: i18nString(UIStrings.description),\n    category: InsightCategory.INP,\n    state: partialModel.mobileOptimized === false ? 'fail' : 'pass',\n    ...partialModel,\n  };\n}\n\nexport function generateInsight(\n    parsedTrace: Handlers.Types.ParsedTrace, context: InsightSetContext): ViewportInsightModel {\n  const viewportEvent = parsedTrace.UserInteractions.parseMetaViewportEvents.find(event => {\n    if (event.args.data.frame !== context.frameId) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  const compositorEvents = parsedTrace.UserInteractions.beginCommitCompositorFrameEvents.filter(event => {\n    if (event.args.frame !== context.frameId) {\n      return false;\n    }\n\n    // Commit compositor frame events can be emitted before the viewport tag is parsed.\n    // We shouldn't count these since the browser hasn't had time to make the viewport mobile optimized.\n    if (viewportEvent && event.ts < viewportEvent.ts) {\n      return false;\n    }\n\n    return Helpers.Timing.eventIsInBounds(event, context.bounds);\n  });\n\n  if (!compositorEvents.length) {\n    // Trace doesn't have the data we need.\n    return finalize({\n      mobileOptimized: null,\n      warnings: [InsightWarning.NO_LAYOUT],\n    });\n  }\n\n  // Returns true only if all events are mobile optimized.\n  for (const event of compositorEvents) {\n    if (!event.args.is_mobile_optimized) {\n      // Grab all the pointer events with at least 50ms of input delay.\n      const longPointerInteractions = [...parsedTrace.UserInteractions.interactionsOverThreshold.values()].filter(\n          interaction => Handlers.ModelHandlers.UserInteractions.categoryOfInteraction(interaction) === 'POINTER' &&\n              interaction.inputDelay >= 50_000);\n\n      // The actual impact varies between 0 and 300.\n      // Using inputDelay as the closest thing we have for measuring this, though inputDelay may be high for other reasons.\n      // b/371566378#comment8\n      const inputDelay = Math.max(0, ...longPointerInteractions.map(interaction => interaction.inputDelay)) / 1000;\n      const inpMetricSavings = Platform.NumberUtilities.clamp(inputDelay, 0, 300);\n\n      return finalize({\n        mobileOptimized: false,\n        viewportEvent,\n        longPointerInteractions,\n        metricSavings: {INP: inpMetricSavings as Types.Timing.Milli},\n      });\n    }\n  }\n\n  return finalize({\n    mobileOptimized: true,\n    viewportEvent,\n  });\n}\n\nexport function createOverlays(model: ViewportInsightModel): Types.Overlays.Overlay[] {\n  if (!model.longPointerInteractions) {\n    return [];\n  }\n\n  return model.longPointerInteractions.map(interaction => {\n    const delay = Math.min(interaction.inputDelay, 300 * 1000);\n    const bounds = Helpers.Timing.traceWindowFromMicroSeconds(\n        Types.Timing.Micro(interaction.ts),\n        Types.Timing.Micro(interaction.ts + delay),\n    );\n    return {\n      type: 'TIMESPAN_BREAKDOWN',\n      entry: interaction,\n      sections: [{bounds, label: i18nString(UIStrings.mobileTapDelayLabel), showDuration: true}],\n      renderLocation: 'ABOVE_EVENT',\n    };\n  });\n}\n"]}