tsx-mui-material-ui-add-attribute

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before1import Button from '@mui/material/Button';
2import Tooltip from '@mui/material/Tooltip';
3
4export default function ArrowTooltips() {
5  return (
6    <Tooltip title="Add" arrow>
7      <Button>Arrow</Button>
8    </Tooltip>
9  );
10}
11

After1import Button from '@mui/material/Button';
2import Tooltip from '@mui/material/Tooltip';
3
4export default function ArrowTooltips() {
5  return (
6    <Tooltip describeChild title="Add" arrow>
7      <Button>Arrow</Button>
8    </Tooltip>
9  );
10}
11

Before1import Button from '@mui/material/Button';
2import Tooltip from '@mui/material/Tooltip';
3
4export default function ArrowTooltips() {
5  return (
6    <Tooltip title="Add" arrow>
7      <Button>Arrow</Button>
8    </Tooltip>
9  );
10}
11

After1import Button from '@mui/material/Button';
2import Tooltip from '@mui/material/Tooltip';
3
4export default function ArrowTooltips() {
5  return (
6    <Tooltip describeChild title="Add" arrow>
7      <Button>Arrow</Button>
8    </Tooltip>
9  );
10}
11

Before

program

import_statement

import "import"

import_clause

identifier "Button"

from "from"

string

' "'"

string_fragment "@mui/material/Button"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Tooltip"

from "from"

string

' "'"

string_fragment "@mui/material/Tooltip"

' "'"

; ";"

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ArrowTooltips"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Tooltip"

jsx_attribute

property_identifier "title"

= "="

string

" "\""

string_fragment "Add"

" "\""

jsx_attribute

property_identifier "arrow"

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "Button"

> ">"

jsx_text "Arrow"

jsx_closing_element

</ "</"

identifier "Button"

> ">"

jsx_closing_element

</ "</"

identifier "Tooltip"

> ">"

) ")"

; ";"

} "}"

After

program

import_statement

import "import"

import_clause

identifier "Button"

from "from"

string

' "'"

string_fragment "@mui/material/Button"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Tooltip"

from "from"

string

' "'"

string_fragment "@mui/material/Tooltip"

' "'"

; ";"

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ArrowTooltips"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element

< "<"

identifier "Tooltip"

jsx_attribute

property_identifier "describeChild"

jsx_attribute

property_identifier "title"

= "="

string

" "\""

string_fragment "Add"

" "\""

jsx_attribute

property_identifier "arrow"

> ">"

jsx_element

jsx_opening_element

< "<"

identifier "Button"

> ">"

jsx_text "Arrow"

jsx_closing_element

</ "</"

identifier "Button"

> ">"

jsx_closing_element

</ "</"

identifier "Tooltip"

> ">"

) ")"

; ";"

} "}"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help