chrome-devtools-frontend 1.0.1601661 → 1.0.1602348

package/front_end/panels/sensors/SensorsView.ts

@@ -329,8 +329,8 @@ export class SensorsView extends UI.Widget.VBox {
             }
           })}
         >
-          <!-- @ts-ignore -->
           <div class="latlong-group">
+            <!-- @ts-ignore -->
             <input
               id="latitude-input"
               type="number"
@@ -347,8 +347,8 @@ export class SensorsView extends UI.Widget.VBox {
             >
             <label class="latlong-title" for="latitude-input">${i18nString(UIStrings.latitude)}</label>
           </div>
-          <!-- @ts-ignore -->
           <div class="latlong-group">
+            <!-- @ts-ignore -->
             <input
               id="longitude-input"
               type="number"
@@ -397,8 +397,8 @@ export class SensorsView extends UI.Widget.VBox {
             <label class="locale-title" for="locale-input">${i18nString(UIStrings.locale)}</label>
             <div class="locale-error" ${Directives.ref((el: Element | undefined) => { if (el) { this.localeError = el as HTMLElement; } })}></div>
           </div>
-          <!-- @ts-ignore -->
           <div class="latlong-group">
+            <!-- @ts-ignore -->
             <input
               id="accuracy-input"
               type="number"
@@ -593,10 +593,6 @@ export class SensorsView extends UI.Widget.VBox {
   private createDeviceOrientationSection(): void {
     const orientationGroup = this.contentElement.createChild('section', 'sensors-group');
     orientationGroup.setAttribute('jslog', `${VisualLogging.section('device-orientation')}`);
-    const orientationTitle = UI.UIUtils.createLabel(i18nString(UIStrings.orientation), 'sensors-group-title');
-    orientationGroup.appendChild(orientationTitle);
-    const orientationContent = orientationGroup.createChild('div', 'orientation-content');
-    const fields = orientationContent.createChild('div', 'orientation-fields');
 
     const orientationOffOption = {
       title: i18nString(UIStrings.off),
@@ -622,46 +618,136 @@ export class SensorsView extends UI.Widget.VBox {
         {title: i18nString(UIStrings.displayDown), orientation: '[0, -180, 0]', jslogContext: 'displayUp-down'},
       ],
     }];
-    this.orientationSelectElement = this.contentElement.createChild('select');
-    this.orientationSelectElement.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true})}`);
-    UI.ARIAUtils.bindLabelToControl(orientationTitle, this.orientationSelectElement);
-    this.orientationSelectElement.appendChild(UI.UIUtils.createOption(
-        orientationOffOption.title, orientationOffOption.orientation, orientationOffOption.jslogContext));
-    this.orientationSelectElement.appendChild(
-        UI.UIUtils.createOption(customOrientationOption.title, customOrientationOption.orientation, 'custom'));
-
-    for (let i = 0; i < orientationGroups.length; ++i) {
-      const groupElement = this.orientationSelectElement.createChild('optgroup');
-      groupElement.label = orientationGroups[i].title;
-      const group = orientationGroups[i].value;
-      for (let j = 0; j < group.length; ++j) {
-        groupElement.appendChild(UI.UIUtils.createOption(group[j].title, group[j].orientation, group[j].jslogContext));
-      }
-    }
-    this.orientationSelectElement.selectedIndex = 0;
-    fields.appendChild(this.orientationSelectElement);
-    this.orientationSelectElement.addEventListener('change', this.orientationSelectChanged.bind(this));
-
-    this.deviceOrientationFieldset = this.createDeviceOrientationOverrideElement(this.deviceOrientation);
-    this.stageElement = orientationContent.createChild('div', 'orientation-stage');
-    this.stageElement.setAttribute('jslog', `${VisualLogging.preview().track({drag: true})}`);
-    this.orientationLayer = this.stageElement.createChild('div', 'orientation-layer');
-    this.boxElement = this.orientationLayer.createChild('section', 'orientation-box orientation-element');
-
-    this.boxElement.createChild('section', 'orientation-front orientation-element');
-    this.boxElement.createChild('section', 'orientation-top orientation-element');
-    this.boxElement.createChild('section', 'orientation-back orientation-element');
-    this.boxElement.createChild('section', 'orientation-left orientation-element');
-    this.boxElement.createChild('section', 'orientation-right orientation-element');
-    this.boxElement.createChild('section', 'orientation-bottom orientation-element');
-
-    UI.UIUtils.installDragHandle(this.stageElement, this.onBoxDragStart.bind(this), event => {
-      this.onBoxDrag(event);
-    }, null, '-webkit-grabbing', '-webkit-grab');
-
-    fields.appendChild(this.deviceOrientationFieldset);
+
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+      html`
+        <label class="sensors-group-title" for="orientation-select">${i18nString(UIStrings.orientation)}</label>
+        <div class="orientation-content">
+          <div class="orientation-fields">
+            <select
+              id="orientation-select"
+              ${Directives.ref((el: Element | undefined) => {
+                if (el) {
+                  this.orientationSelectElement = el as HTMLSelectElement;
+                }
+              })}
+              @change=${this.orientationSelectChanged.bind(this)}
+              jslog=${VisualLogging.dropDown().track({change: true})}
+            >
+              <option value=${orientationOffOption.orientation} jslog=${VisualLogging.item(orientationOffOption.jslogContext)}>${orientationOffOption.title}</option>
+              <option value=${customOrientationOption.orientation} jslog=${VisualLogging.item('custom')}>${customOrientationOption.title}</option>
+              ${orientationGroups.map(group => html`
+                <optgroup label=${group.title}>
+                  ${group.value.map(preset => html`
+                    <option value=${preset.orientation} jslog=${VisualLogging.item(preset.jslogContext)}>${preset.title}</option>
+                  `)}
+                </optgroup>
+              `)}
+            </select>
+            <fieldset
+              class="device-orientation-override-section"
+              ${Directives.ref((el: Element | undefined) => {
+                if (el) {
+                  this.deviceOrientationFieldset = el as HTMLFieldSetElement;
+                }
+              })}
+            >
+              <div class="orientation-inputs-cell">
+                <div class="orientation-axis-input-container">
+                  <!-- @ts-ignore -->
+                  <input
+                    id="alpha-input"
+                    type="number"
+                    step="any"
+                    ${Directives.ref((el: Element | undefined) => { if (el) { this.alphaElement = el as HTMLInputElement; } })}
+                    @change=${this.#onOrientationChange.bind(this)}
+                    @input=${this.#onOrientationInput.bind(this)}
+                    @keydown=${this.#onOrientationKeyDown.bind(this)}
+                    @focus=${this.#onOrientationFocus.bind(this)}
+                  >
+                  <label for="alpha-input">${i18nString(UIStrings.alpha)}</label>
+                </div>
+                <div class="orientation-axis-input-container">
+                  <!-- @ts-ignore -->
+                  <input
+                    id="beta-input"
+                    type="number"
+                    step="any"
+                    ${Directives.ref((el: Element | undefined) => { if (el) { this.betaElement = el as HTMLInputElement; } })}
+                    @change=${this.#onOrientationChange.bind(this)}
+                    @input=${this.#onOrientationInput.bind(this)}
+                    @keydown=${this.#onOrientationKeyDown.bind(this)}
+                    @focus=${this.#onOrientationFocus.bind(this)}
+                  >
+                  <label for="beta-input">${i18nString(UIStrings.beta)}</label>
+                </div>
+                <div class="orientation-axis-input-container">
+                  <!-- @ts-ignore -->
+                  <input
+                    id="gamma-input"
+                    type="number"
+                    step="any"
+                    ${Directives.ref((el: Element | undefined) => { if (el) { this.gammaElement = el as HTMLInputElement; } })}
+                    @change=${this.#onOrientationChange.bind(this)}
+                    @input=${this.#onOrientationInput.bind(this)}
+                    @keydown=${this.#onOrientationKeyDown.bind(this)}
+                    @focus=${this.#onOrientationFocus.bind(this)}
+                  >
+                  <label for="gamma-input">${i18nString(UIStrings.gamma)}</label>
+                </div>
+                <devtools-button
+                  .variant=${Buttons.Button.Variant.OUTLINED}
+                  class="orientation-reset-button"
+                  type="reset"
+                  aria-label=${i18nString(UIStrings.resetDeviceOrientation)}
+                  @click=${this.resetDeviceOrientation.bind(this)}
+                  jslog=${VisualLogging.action('sensors.reset-device-orientiation').track({click: true})}
+                >
+                  ${i18nString(UIStrings.reset)}
+                </devtools-button>
+              </div>
+            </fieldset>
+          </div>
+          <div
+            class="orientation-stage"
+            jslog=${VisualLogging.preview().track({drag: true})}
+            ${Directives.ref((el: Element | undefined) => {
+              if (el && !this.stageElement) {
+                this.stageElement = el as HTMLElement;
+                UI.UIUtils.installDragHandle(this.stageElement, this.onBoxDragStart.bind(this), event => {
+                  this.onBoxDrag(event);
+                }, null, '-webkit-grabbing', '-webkit-grab');
+              }
+            })}
+          >
+            <div class="orientation-layer" ${Directives.ref((el: Element | undefined) => { if (el) { this.orientationLayer = el as HTMLDivElement; } })}>
+              <section
+                class="orientation-box orientation-element"
+                ${Directives.ref((el: Element | undefined) => { if (el) { this.boxElement = el as HTMLElement; } })}
+              >
+                <section class="orientation-front orientation-element"></section>
+                <section class="orientation-top orientation-element"></section>
+                <section class="orientation-back orientation-element"></section>
+                <section class="orientation-left orientation-element"></section>
+                <section class="orientation-right orientation-element"></section>
+                <section class="orientation-bottom orientation-element"></section>
+              </section>
+            </div>
+          </div>
+        </div>
+      `,
+      orientationGroup
+    );
+    // clang-format on
+
     this.enableOrientationFields(true);
     this.setBoxOrientation(this.deviceOrientation, false);
+
+    this.#setOrientationInputValue(this.alphaElement, String(this.deviceOrientation.alpha));
+    this.#setOrientationInputValue(this.betaElement, String(this.deviceOrientation.beta));
+    this.#setOrientationInputValue(this.gammaElement, String(this.deviceOrientation.gamma));
   }
 
   private createPressureSection(): void {
@@ -824,54 +910,11 @@ export class SensorsView extends UI.Widget.VBox {
   }
 
   #setOrientationInputValue(input: HTMLInputElement, value: string): void {
-    if (input.value === value) {
-      return;
-    }
     input.value = value;
     const valid = this.#validateOrientationInput(input, value);
     input.classList.toggle('error-input', !valid);
   }
 
-  private createDeviceOrientationOverrideElement(deviceOrientation: SDK.EmulationModel.DeviceOrientation):
-      HTMLFieldSetElement {
-    const fieldsetElement = document.createElement('fieldset');
-    fieldsetElement.classList.add('device-orientation-override-section');
-    const cellElement = fieldsetElement.createChild('td', 'orientation-inputs-cell');
-
-    this.alphaElement = UI.UIUtils.createInput('', 'number', 'alpha');
-    this.alphaElement.setAttribute('step', 'any');
-    this.#setupAxisInput(cellElement, this.alphaElement, i18nString(UIStrings.alpha));
-    this.#setOrientationInputValue(this.alphaElement, String(deviceOrientation.alpha));
-
-    this.betaElement = UI.UIUtils.createInput('', 'number', 'beta');
-    this.betaElement.setAttribute('step', 'any');
-    this.#setupAxisInput(cellElement, this.betaElement, i18nString(UIStrings.beta));
-    this.#setOrientationInputValue(this.betaElement, String(deviceOrientation.beta));
-
-    this.gammaElement = UI.UIUtils.createInput('', 'number', 'gamma');
-    this.gammaElement.setAttribute('step', 'any');
-    this.#setupAxisInput(cellElement, this.gammaElement, i18nString(UIStrings.gamma));
-    this.#setOrientationInputValue(this.gammaElement, String(deviceOrientation.gamma));
-
-    const resetButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.reset), this.resetDeviceOrientation.bind(this),
-        {className: 'orientation-reset-button', jslogContext: 'sensors.reset-device-orientiation'});
-    UI.ARIAUtils.setLabel(resetButton, i18nString(UIStrings.resetDeviceOrientation));
-    resetButton.setAttribute('type', 'reset');
-    cellElement.appendChild(resetButton);
-    return fieldsetElement;
-  }
-
-  #setupAxisInput(parentElement: Element, input: HTMLInputElement, label: string): void {
-    const div = parentElement.createChild('div', 'orientation-axis-input-container');
-    div.appendChild(input);
-    div.appendChild(UI.UIUtils.createLabel(label, /* className */ '', input));
-    input.addEventListener('change', this.#onOrientationChange.bind(this), false);
-    input.addEventListener('input', this.#onOrientationInput.bind(this), false);
-    input.addEventListener('keydown', this.#onOrientationKeyDown.bind(this), false);
-    input.addEventListener('focus', this.#onOrientationFocus.bind(this), false);
-  }
-
   private setBoxOrientation(deviceOrientation: SDK.EmulationModel.DeviceOrientation, animate: boolean): void {
     if (animate) {
       this.stageElement.classList.add('is-animating');

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -657,48 +657,17 @@ class SummaryView extends UI.Widget.Widget {
 }
 
 function generateRangeSummaryDetails(input: SummaryViewInput): LitTemplate {
-  const {parsedTrace, selectedRange} = input;
-
-  if (!selectedRange || !parsedTrace) {
-    return nothing;
-  }
-
-  const minBoundsMilli = Trace.Helpers.Timing.microToMilli(parsedTrace.data.Meta.traceBounds.min);
-  const {events, startTime, endTime, thirdPartyTree} = selectedRange;
-  const aggregatedStats = TimelineUIUtils.statsForTimeRange(events, startTime, endTime);
-  const startOffset = startTime - minBoundsMilli;
-  const endOffset = endTime - minBoundsMilli;
-
-  let total = 0;
-  for (const categoryName in aggregatedStats) {
-    total += aggregatedStats[categoryName];
-  }
-
-  const categories: TimelineComponents.TimelineSummary.CategoryData[] = [];
-  for (const categoryName in Trace.Styles.getCategoryStyles()) {
-    const category = Trace.Styles.getCategoryStyles()[categoryName as keyof Trace.Styles.CategoryPalette];
-    if (category.name === Trace.Styles.EventCategory.IDLE) {
-      continue;
-    }
-    const value = aggregatedStats[category.name];
-    if (!value) {
-      continue;
-    }
-    categories.push({value, color: category.getCSSValue(), title: category.title});
-  }
-  categories.sort((a, b) => b.value - a.value);
-
   // clang-format off
   return html`
     <devtools-widget
       ${widget(TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryView, {
         data: {
-          rangeStart: startOffset,
-          rangeEnd: endOffset,
-          total,
-          categories,
-          thirdPartyTreeTemplate: html`<devtools-performance-third-party-tree-view
-            .treeView=${thirdPartyTree}></devtools-performance-third-party-tree-view>`,
+          parsedTrace: input.parsedTrace,
+          events: input.selectedRange?.events,
+          startTime: input.selectedRange?.startTime,
+          endTime: input.selectedRange?.endTime,
+          thirdPartyTreeTemplate: input.selectedRange?.thirdPartyTree ? html`<devtools-performance-third-party-tree-view
+            .treeView=${input.selectedRange?.thirdPartyTree}></devtools-performance-third-party-tree-view>` : nothing,
         } as TimelineComponents.TimelineRangeSummaryView.TimelineRangeSummaryViewData,
       })}
     ></devtools-widget>`;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1541,124 +1541,6 @@ export class TimelineUIUtils {
     return contentHelper.fragment;
   }
 
-  static statsForTimeRange(
-      events: Trace.Types.Events.Event[], startTime: Trace.Types.Timing.Milli,
-      endTime: Trace.Types.Timing.Milli): TimeRangeCategoryStats {
-    if (!events.length) {
-      return {idle: endTime - startTime};
-    }
-
-    buildRangeStatsCacheIfNeeded(events);
-    const aggregatedStats = subtractStats(aggregatedStatsAtTime(endTime), aggregatedStatsAtTime(startTime));
-    const aggregatedTotal = Object.values(aggregatedStats).reduce((a, b) => a + b, 0);
-    aggregatedStats['idle'] = Math.max(0, endTime - startTime - aggregatedTotal);
-    return aggregatedStats;
-
-    function aggregatedStatsAtTime(time: number): TimeRangeCategoryStats {
-      const stats: TimeRangeCategoryStats = {};
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      const cache = events[categoryBreakdownCacheSymbol];
-      for (const category in cache) {
-        const categoryCache = cache[category];
-        const index =
-            Platform.ArrayUtilities.upperBound(categoryCache.time, time, Platform.ArrayUtilities.DEFAULT_COMPARATOR);
-        let value;
-        if (index === 0) {
-          value = 0;
-        } else if (index === categoryCache.time.length) {
-          value = categoryCache.value[categoryCache.value.length - 1];
-        } else {
-          const t0 = categoryCache.time[index - 1];
-          const t1 = categoryCache.time[index];
-          const v0 = categoryCache.value[index - 1];
-          const v1 = categoryCache.value[index];
-          value = v0 + (v1 - v0) * (time - t0) / (t1 - t0);
-        }
-        stats[category] = value;
-      }
-      return stats;
-    }
-
-    function subtractStats(a: TimeRangeCategoryStats, b: TimeRangeCategoryStats): TimeRangeCategoryStats {
-      const result = Object.assign({}, a);
-      for (const key in b) {
-        result[key] -= b[key];
-      }
-      return result;
-    }
-
-    function buildRangeStatsCacheIfNeeded(events: Trace.Types.Events.Event[]): void {
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      if (events[categoryBreakdownCacheSymbol]) {
-        return;
-      }
-
-      // aggregatedStats is a map by categories. For each category there's an array
-      // containing sorted time points which records accumulated value of the category.
-      const aggregatedStats: Record<string, {
-        time: number[],
-        value: number[],
-      }> = {};
-      const categoryStack: string[] = [];
-      let lastTime = 0;
-      Trace.Helpers.Trace.forEachEvent(events, {
-        onStartEvent,
-        onEndEvent,
-      });
-
-      function updateCategory(category: string, time: number): void {
-        let statsArrays: {
-          time: number[],
-          value: number[],
-        } = aggregatedStats[category];
-        if (!statsArrays) {
-          statsArrays = {time: [], value: []};
-          aggregatedStats[category] = statsArrays;
-        }
-        if (statsArrays.time.length && statsArrays.time[statsArrays.time.length - 1] === time || lastTime > time) {
-          return;
-        }
-        const lastValue = statsArrays.value.length > 0 ? statsArrays.value[statsArrays.value.length - 1] : 0;
-        statsArrays.value.push(lastValue + time - lastTime);
-        statsArrays.time.push(time);
-      }
-
-      function categoryChange(from: string|null, to: string|null, time: number): void {
-        if (from) {
-          updateCategory(from, time);
-        }
-        lastTime = time;
-        if (to) {
-          updateCategory(to, time);
-        }
-      }
-
-      function onStartEvent(e: Trace.Types.Events.Event): void {
-        const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category = Trace.Styles.getEventStyle(e.name as Trace.Types.Events.Name)?.category.name ||
-            Trace.Styles.getCategoryStyles().other.name;
-        const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
-        if (category !== parentCategory) {
-          categoryChange(parentCategory || null, category, startTime);
-        }
-        categoryStack.push(category);
-      }
-
-      function onEndEvent(e: Trace.Types.Events.Event): void {
-        const {endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
-        const category = categoryStack.pop();
-        const parentCategory = categoryStack.length ? categoryStack[categoryStack.length - 1] : null;
-        if (category !== parentCategory) {
-          categoryChange(category || null, parentCategory || null, endTime || 0);
-        }
-      }
-
-      const obj = (events as Object);
-      // @ts-expect-error TODO(crbug.com/1011811): Remove symbol usage.
-      obj[categoryBreakdownCacheSymbol] = aggregatedStats;
-    }
-  }
-
   private static renderEventJson(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper): void {
     contentHelper.addSection(i18nString(UIStrings.traceEvent));
 

package/front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -167,7 +167,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 export class IgnoreListSetting extends UI.Widget.Widget {
   static createWidgetElement(): UI.Widget.WidgetElement<IgnoreListSetting> {
     const widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<IgnoreListSetting>;
-    widgetElement.widgetConfig = UI.Widget.widgetConfig(IgnoreListSetting);
+    new IgnoreListSetting(widgetElement);
     return widgetElement;
   }
 

package/front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -14,7 +14,7 @@ import sidebarInsightsTabStyles from './sidebarInsightsTab.css.js';
 import {SidebarSingleInsightSet, type SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   parsedTrace: Trace.TraceModel.ParsedTrace;
@@ -67,7 +67,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         const contents = html`
           <devtools-widget
             data-insight-set-key=${id}
-            .widgetConfig=${widgetConfig(SidebarSingleInsightSet, {data})}
+            ${widget(SidebarSingleInsightSet, {data})}
           ></devtools-widget>
         `;