Merge branch 'main' into dev/annabauza/android_users_table_processor

Author: annathedroid

src/trace_processor/tables/metadata_tables.py

@@ -856,7 +856,11 @@
         C('byte_offset', CppOptional(CppInt64())),
         C('severity', CppString()),
         C('name', CppString()),
-        C('arg_set_id', CppOptional(CppUint32())),
+        C(
+            'arg_set_id',
+            CppOptional(CppUint32()),
+            cpp_access=CppAccess.READ_AND_LOW_PERF_WRITE,
+        ),
     ],
 )
 

ui/src/assets/widgets/nodegraph.scss

@@ -29,6 +29,8 @@
   background-color: var(--pf-color-background);
   position: relative;
   user-select: none;
+  font-family: var(--pf-font-compact);
+  cursor: grab;
 }
 
 .pf-canvas-content {
@@ -63,33 +65,36 @@
   padding-block: 12px;
 }
 
-.pf-node.pf-selected {
-  border-color: var(--pf-color-accent);
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--pf-color-accent) 30%, transparent);
-}
-
 // Wrapper for dock chains - uses flexbox to make children same width
 .pf-dock-chain {
   position: absolute;
   display: flex;
   flex-direction: column;
   pointer-events: auto;
+  box-shadow: 0 4px 12px var(--pf-color-box-shadow);
 
   // All nodes in chain stretch to same width (determined by widest node)
   .pf-node {
     width: 100%;
     position: relative !important;
     left: auto !important;
     top: auto !important;
+    box-shadow: none; // No box shadow for docked nodes
   }
 }
 
+.pf-node.pf-selected {
+  border-color: var(--pf-color-accent);
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--pf-color-accent) 30%, transparent);
+  z-index: 1; // Make sure box shadow appears above other nodes
+}
+
 // Docked child: flush top edge with no rounded corners or border
 .pf-node.pf-docked-child {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-top: none;
+  margin-top: -2px; // Overlap border with parent
 }
 
 // Parent with docked child: flush bottom edge with no rounded corners
@@ -135,8 +140,6 @@
 
 .pf-node-content {
   padding-inline: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--pf-color-border-secondary);
 }
 
 .pf-port-row {
@@ -168,14 +171,12 @@
   cursor: crosshair;
   position: absolute;
   top: 50%;
-  transition: all 0.2s;
   z-index: 10;
 }
 
-.pf-port:hover {
+.pf-output:hover {
   background: var(--pf-color-accent);
   border-color: var(--pf-color-accent);
-  transform: translateY(-50%) scale(1.2);
 }
 
 .pf-port.pf-connected {
@@ -204,13 +205,6 @@
   right: -8px;
 }
 
-.pf-port.pf-active {
-  background: var(--pf-color-accent);
-  border-color: var(--pf-color-accent);
-  box-shadow: 0 0 8px
-    color-mix(in srgb, var(--pf-color-accent) 80%, transparent);
-}
-
 svg {
   position: absolute;
   top: 0;
@@ -248,3 +242,29 @@ svg {
   fill: none;
   stroke-dasharray: 5, 5;
 }
+
+.pf-connecting {
+  cursor: crosshair;
+
+  .pf-input:hover {
+    background: var(--pf-color-accent);
+    border-color: var(--pf-color-accent);
+    cursor: copy;
+  }
+  .pf-output:hover {
+    background: var(--pf-color-border);
+    border-color: var(--pf-color-border-secondary);
+    cursor: not-allowed;
+  }
+}
+
+.pf-output.pf-active,
+.pf-output.pf-active:hover {
+  background: var(--pf-color-accent);
+  border-color: var(--pf-color-accent);
+  cursor: crosshair;
+}
+
+.pf-panning {
+  cursor: grabbing;
+}

ui/src/base/classnames.ts

@@ -15,7 +15,7 @@
 // It's common to want to have a class depending on a boolean flag, in which
 // case we use `flag && className` which evaluates to either false or a string,
 // which is why false is included in definition of ArgType.
-type ArgType = string | false | undefined;
+type ArgType = string | false | undefined | null;
 
 // Join class names together into valid HTML class attributes
 // Falsy elements are ignored

ui/src/plugins/dev.perfetto.WidgetsPage/nodegraph_demo.ts

@@ -36,6 +36,7 @@ interface NodeTemplate {
   inputs: string[];
   outputs: string[];
   content?: m.Children;
+  allInputsLeft?: boolean;
 }
 
 export function NodeGraphDemo() {
@@ -138,6 +139,7 @@ export function NodeGraphDemo() {
     join: {
       inputs: ['Left', 'Right'],
       outputs: ['Output'],
+      allInputsLeft: true,
       content: m(
         '',
         {style: {display: 'flex', flexDirection: 'column', gap: '4px'}},
@@ -195,6 +197,7 @@ export function NodeGraphDemo() {
     const template = nodeTemplates[model.type];
     const hasNext = model.nextId !== undefined;
     const nextModel = hasNext ? modelNodes.get(model.nextId!) : undefined;
+    const allInputsLeft = template.allInputsLeft ?? false;
 
     return {
       id: model.id,
@@ -204,6 +207,7 @@ export function NodeGraphDemo() {
       outputs: template.outputs,
       content: template.content,
       next: nextModel ? renderChildNode(nextModel) : undefined,
+      allInputsLeft,
       addMenuItems: [
         m(MenuItem, {
           label: 'Select',