chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

package/front_end/panels/elements/LayoutPane.ts

@@ -312,7 +312,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             </div>
             <div class="checkbox-settings">
               ${input.booleanSettings.map(setting =>
-                  html`<devtools-checkbox
+                  html`<div><devtools-checkbox
                       data-boolean-setting="true"
                       class="checkbox-label"
                       title=${setting.title}
@@ -320,7 +320,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                       @change=${(e: Event) => input.onBooleanSettingChange(setting, e)}
                       jslog=${VisualLogging.toggle().track({click: true}).context(setting.name)}>
                     ${setting.title}
-                  </devtools-checkbox>`)}
+                  </devtools-checkbox></div>`)}
             </div>
           </div>
           ${input.gridElements ?

package/front_end/panels/elements/PropertiesWidget.ts

@@ -158,7 +158,7 @@ export class PropertiesWidget extends UI.Widget.VBox {
     this.#displayNoMatchingPropertyMessage = true;
     for (const element of this.treeOutline.rootElement().children()) {
       const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
-      const hidden = !property?.match({
+      const hidden = !property?.property.match({
         includeNullOrUndefinedValues: this.showAllPropertiesSetting.get(),
         regex: this.filterRegex,
       });
@@ -195,7 +195,8 @@ export class PropertiesWidget extends UI.Widget.VBox {
         properties = [];
       }
       ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, properties, null, true /* skipProto */, true /* skipGettersAndSetters */, object);
+          treeElement, {properties: properties.map(p => new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(p))},
+          true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
     this.#view(

package/front_end/panels/elements/components/AdornerManager.ts

@@ -22,20 +22,20 @@ export interface RegisteredAdorner {
 }
 
 export enum RegisteredAdorners {
+  AD = 'ad',
+  CONTAINER = 'container',
+  FLEX = 'flex',
   GRID = 'grid',
-  SUBGRID = 'subgrid',
   MASONRY = 'masonry',
-  FLEX = 'flex',
-  AD = 'ad',
+  MEDIA = 'media',
+  POPOVER = 'popover',
+  REVEAL = 'reveal',
+  SCROLL = 'scroll',
   SCROLL_SNAP = 'scroll-snap',
-  STARTING_STYLE = 'starting-style',
-  CONTAINER = 'container',
   SLOT = 'slot',
+  STARTING_STYLE = 'starting-style',
+  SUBGRID = 'subgrid',
   TOP_LAYER = 'top-layer',
-  REVEAL = 'reveal',
-  MEDIA = 'media',
-  SCROLL = 'scroll',
-  POPOVER = 'popover',
 }
 
 /**

package/front_end/panels/elements/layoutPane.css

@@ -44,18 +44,14 @@
   }
 
   .checkbox-settings {
-    margin-top: 8px;
+    margin-top: var(--sys-size-5);
     display: grid;
     grid-template-columns: 1fr;
-    gap: 5px;
-  }
-
-  .checkbox-settings devtools-checkbox {
-    margin-bottom: 8px;
-  }
+    gap: var(--sys-size-4);
 
-  .checkbox-settings devtools-checkbox:last-child {
-    margin-bottom: 0;
+    > div {
+      display: flex;
+    }
   }
 
   devtools-checkbox {

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -296,14 +296,18 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
     const properties = [];
     const eventListener = this.#eventListener;
     const runtimeModel = eventListener.domDebuggerModel().runtimeModel();
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture()));
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive()));
-    properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('once', eventListener.once()));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture())));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive())));
+    properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+        runtimeModel.createRemotePropertyFromPrimitiveValue('once', eventListener.once())));
     if (typeof eventListener.handler() !== 'undefined') {
-      properties.push(new SDK.RemoteObject.RemoteObjectProperty('handler', eventListener.handler()));
+      properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
+          new SDK.RemoteObject.RemoteObjectProperty('handler', eventListener.handler())));
     }
     ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-        this, properties, [], true, true, null);
+        this, {properties}, true, true, undefined);
   }
 
   private setTitle(object: SDK.RemoteObject.RemoteObject, linkifier: Components.Linkifier.Linkifier): void {
@@ -311,7 +315,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
     const propertyValue = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.createPropertyValue(
         object, /* wasThrown */ false, /* showPreview */ false);
-    this.valueTitle = propertyValue.element;
+    this.valueTitle = propertyValue;
     title.appendChild(this.valueTitle);
 
     if (this.#eventListener.canRemove()) {