radiography icon indicating copy to clipboard operation
radiography copied to clipboard

Introduce SlotTableInspector tool for Compose.

Open zach-klippenstein opened this issue 4 years ago • 0 comments

This introduces a new module, slot-table-inspector, which provides two composable functions for peeking under the Compose hood to look at the slot table. They can be used like this:

@Composable fun App() {
  val inspectorState = remember { SlotTableInspectorState() }
  var showInspector by remember { mutableStateOf(false) }

  // This defines the content to inspect (roughly).
  SlotTableInspectable(inspectorState) {
    Column {
      Button(onClick = {
        inspectorState.captureSlotTables()
        showInspector = true
      }) {
        Text("Inspect")
      }
    }
  }

  if (showInspector) {
    Dialog {
      // This reads the slot tables from all SlotTableInspectables and displays them.
      SlotTableInspector(inspectorState)
    }
  }
}

This change also adds it into the sample app. To play with it, just check out this branch and run the Compose sample app! (It works best on a tablet.)

https://user-images.githubusercontent.com/101754/129277048-52f46ffb-ca3b-403e-8546-3dbae1764aa3.mp4

https://user-images.githubusercontent.com/101754/129277637-115bb98e-1922-492c-ad8b-682d1bb643c3.mp4

TODO

  • [ ] Write some UI tests.
  • [ ] Better name for the module/artifact than slot-table-inspector?
  • [ ] Naming of composable functions?
  • [ ] Package of stuff in new module?
  • [ ] Make the stuff in the new module experimental/opt-in.
  • [ ] Add a section to the repo README about this API.

zach-klippenstein avatar Aug 12 '21 22:08 zach-klippenstein