phetsims / sun

User-interface components for PhET simulations, built on top of Scenery.
MIT License
4 stars 12 forks source link

Should "resize" behavior be opt-in or opt-out? #783

Closed pixelzoom closed 2 years ago

pixelzoom commented 2 years ago

@kathy-phet asked me to put this on the Developer Meeting agenda with high priority.

While adding support for dynamic layout to Natural Selection in https://github.com/phetsims/natural-selection/issues/319, I discovered that sun buttons were not resizing when their associated Text changed. @jonathanolson pointed me to the widthSizable true option, and explained that it currently defaults to false because "It would break backwards compatibility to make all buttons resize for their content (some sims relied on the buttons not resizing)"

And I'm guessing that sun buttons are not the only place where this will be an issue. There are probably other common-code UI components where this will need to be addressed.

Discussing with @kathy-phet, she felt (and I think I agree) that it would be better to make resizing the default behavior, and have to opt-out if you don't want it. Dynamic locale and dynamic text is the future for PhET, and having to opt-in is one more pain point. It's also probably OK to break some sims that depend on static button size, and fix them when they are to be republished.

samreid commented 2 years ago

At today's dev meeting, the main question is whether we want UI components to be resizable or static by default.

@jonathanolson says: If buttons are resizable by default (which is a great long-term goal), then we would have to visit many sims and update them accordingly.

We discussed that it is OK to change the default now, and allow some breakage in existing sims. We will catch them as we go, or during QA. We would like sims to reflow and have dynamic layouts.

This wouldn't break maintenance releases because the changes won't appear in the maintenance branches.

@zepumph asks if we see a problem, do we have to invest in the long-term layout fix, or can it be band-aided with a widthSizable: false override? @kathy-phet says we do not want to go through all 100 sims by hand and spend a long time making long term fixes. @pixelzoom agrees the widthSizable: false override is great for now where necessary.

@zepumph asks if we can run a pixel comparison to visualize the main differences?

@jonathanolson reports: Code may get into infinite loops. @pixelzoom says that is OK since we need to find and address those problems.

The team was all thumbs up and confetti.

Leaving assigned to @jonathanolson to change the default to true wherever possible. It will be more than Button. I'll record shas before and after so we can do pixel comparisons post-hoc if desired. I'll look for overrides that can be eliminated. I'll fix obvious defects, crashes, CT problems, etc.

jonathanolson commented 2 years ago

SHAs beforehand:

acid-base-solutions
6c65300e6be1747743da1b83a88e5dd3ba5b7bf0
aqua
c2b9ec1b47579fb1b0c17be9eb1fdd8c76154027
area-builder
abb2885d5875ab95c87922b7d61e18faeb1833cf
area-model-algebra
81b445827f4536f1f521f4aeaa06d08e8dfe6ee9
area-model-common
9e86dbc832baac9b12c1f51803365be61884d8a7
area-model-decimals
b776964e720611757cdcd7e4c811ade0b09c5786
area-model-introduction
7a4baf9f833e60a85aa941b46e2be35e0b10cb2f
area-model-multiplication
c9cf31d6fee21c608dcbfff35a84e25fcafc04bd
arithmetic
d75438a9b388624b4e9c40ba38deae7b1b78804d
assert
c13a8c7741d95fbd8e37619c66ebcca8686dffe7
atomic-interactions
bdda965ba6417577548a15d488a68515dd3f65bb
axon
c74bd5abc5d6159c697866a1bc76651d2797ace0
babel
100c855dff369583773a6b8ede51c924a8c1b143
balancing-act
75de0124edf31de24bf4395d77b2880709730b0d
balancing-chemical-equations
c5a448c500489e67e431a3caf6cdb1cb906b1611
balloons-and-static-electricity
a84b0ff6cfd890222d216a1fd30f910ba0039798
bamboo
2062e73a334fc1045e19ca33806834e229c31c74
beers-law-lab
dd076ab7a5286d2ef6014e03a9bd67644fadcb39
bending-light
df5c0b568a556563a17d0457bf150349cfcd846a
binder
f41bcca83b8598d15f083238a6f9c099eec7e947
blackbody-spectrum
a87ef44d2b96bbd193b36771dc3764b8e4b11215
blast
7fbf8c1590ccd9b43687a19100c46c21baf722ab
brand
643510ae84d6fb088b79e16154b925751951d854
build-a-fraction
a1c584229ddc653b08ad6519b858dceede25ea23
build-a-molecule
599362bf1f0d068bfb6d9faf1f90fc3dac59a1cf
build-a-nucleus
603bfc0f83d966f619b74d870fb9d71275d5f11a
build-an-atom
f2051a89a3eb59557e2dd87def60373403be19d2
bumper
a5428197c0550d91f4a9e09d59dc7d069ad2fb99
buoyancy
f1a8e9a6c34459f2ce9be1984085e1dddfef65af
calculus-grapher
9d9b59eaf1c155b9b042e467677f813b4ec25f01
capacitor-lab-basics
de5a81b4c830a967927e77c92271dc7d4560079f
center-and-variability
e1347139feb73c938a8906c4f9571e615cc02ae4
chains
d82a31064eb207fbc198469389ad3d11f40bd2f0
charges-and-fields
c988e1c5ac1a188e27a39454bd966d65778fdb27
chipper
f9cdfce5b7f40073f6a88d5e881fc4455d061f1a
circuit-construction-kit-ac
30b56aaf8f8bcc38d08c0752b5b02ea3f97a743c
circuit-construction-kit-ac-virtual-lab
766e6cf3981d0e46346b7a7935b4c9e579551487
circuit-construction-kit-black-box-study
9457b7d13b00ca736801a0a671523073276c0d06
circuit-construction-kit-common
c384d99c91789ee63e20e65c31dea3ae82c97769
circuit-construction-kit-dc
3e351a446826ee82b1a3ae61feae75e2d1a90d67
circuit-construction-kit-dc-virtual-lab
2af6b66340e64eb9d629d3f9f5339c9bd59c8296
collision-lab
e7aba617b4b15793b50fc8054265774583ac2c6f
color-vision
8b841761cf0a875a920cae5aa043578fc8a49831
concentration
1b4d9a1de65b692658db7ae2f45858ed88401c8a
coulombs-law
9f93b4853dc73e57429eef29190d439b75c7228e
counting-common
7a1bfc62f4bfa51f67f930a181d3b2e878fc61f4
curve-fitting
b6c3759b8a379c601195cd6858266cabd1425c8e
decaf
73d64f7c556444e1552d2d5c9267b6c99d897b3c
density
d708db732a51def2c5d307109d1f9b1e0a043d3f
density-buoyancy-common
5d6dac081fb78183a7266eaccde123432b96f964
diffusion
9f53a06fc041a1526b14b24d9d0573c5f7cda9d6
dot
beb462d7c0f8b9696454e821ac5ff188e9fecdfd
eating-exercise-and-energy
82f3e3d1e170a08326f3ec0266f9cc79a0148eea
energy-forms-and-changes
e643fc89b3384856c0398cfa0da86307fe0b19de
energy-skate-park
fb40b57f1e2ecb93cd75d32152de6451b3f9188c
energy-skate-park-basics
3b2d93a886d7202c8cd7f31c583235840f532bfe
equality-explorer
2554c10834a656eb6ddec71994be2f4fed34b74f
equality-explorer-basics
b4a841a88c814ae3cc06ceaf318e60bf05202c1f
equality-explorer-two-variables
9d5a3eb8436d152a6c987c53a37fc9734cc23c85
estimation
34947156bbabac2410cc0ab870c7c9cffbdcc571
example-sim
ff03b33e68bd928af2c90ac072349ce07ce8aed3
expression-exchange
22c574f1688c151a0a7c00dc098d160346036bbe
faradays-law
22c73988bc8173cd91b6aa21ab10ce30b1d3dd1d
fenster
9b485335c4c5a893c2fb70217d4d52b0eea22604
fluid-pressure-and-flow
615fe2a6c1733b6a6678a0c21ce410c058d55e86
forces-and-motion-basics
60e0bdcf2f1f4ca2ec52ed3f9a74f597d363a449
fourier-making-waves
c6c9a54b4f5134e99e63b5e129c0491e8873ee32
fraction-comparison
a10722805dc369eb32a8a67c18c95f9880ac1191
fraction-matcher
d38678d6dc145c8c55d34a37e9b64444cbe2c7f3
fractions-common
6ef5d114ef08efae4de814dd5e95ecbbb350c43b
fractions-equality
7d98907d21fffd15037f1801d14f9cc320f2ef75
fractions-intro
7069765d15b8cd1171f317dc76396df8319b2e49
fractions-mixed-numbers
12f12d93fd01a3327879d96925d9e3bc7e5b0be3
friction
ed5cc94b0400e7d33c0f82f44fc747e31cab97b6
function-builder
0b75727074009f04752fba762ecc3a418d0de1db
function-builder-basics
db36dc080103f452046d012beacd7f02d1400be5
gas-properties
0ea1ecfcee6dee00f3bc5693edf34777bb3e2726
gases-intro
412042d605cb0c888739fcd920afa1f12bc780a5
gene-expression-essentials
160adf0eb0ab08f1b80ae608485e78cfe2264787
geometric-optics
5bc257be06994353a504fb84bd2a606c0369854f
geometric-optics-basics
a4d1416a7e624f0416444467be3223ab0308c79c
graphing-lines
c247d9440572a3ad8c46fad44071498f032f4328
graphing-quadratics
492f7162fe84f66e84f33638da097636ab49962a
graphing-slope-intercept
36a12e5790d9cbe5aba34b2dd0dd0b59bda445ba
gravity-and-orbits
456c28ebe270f8d0b5b2cb171d3e99ecb911512d
gravity-force-lab
182df7350a8b7a5eb17027ad648e7adf25401308
gravity-force-lab-basics
635806e0b51dc93ae7fd4b3a77781c35b14f5307
greenhouse-effect
aca70e4b4e49b30fe3594a0d47b7a34049981aa4
griddle
26da61e02e54e5138c41bf5319d47044cdeda52f
hookes-law
447ad6cde9e99013317bb27c5a2e740afdd00805
interaction-dashboard
7735c2dc4e338cdf91a83e649407db49ece6220a
inverse-square-law-common
6d9ed3375c93d6b165f051dcded0004a4422999a
isotopes-and-atomic-mass
a40ed66e05ce28cb417c25c67a0a14cc3e3c758a
john-travoltage
e543f705c39461ea3a626c7c8f49df1b399fa5a2
joist
10baf354a310018bbe229c8e6f18cc0d2ea48c1f
kite
4c6e3b939980ee8bb049cdbb62642a4561770fa0
least-squares-regression
35a7f0ed38a8d30f09c0399818588cd570733511
make-a-ten
fd46e0c7c0684cb6637d815d8e68777c7a61ab22
masses-and-springs
85f5a804654491b6bcf6f23640b4f7b4757acc9e
masses-and-springs-basics
73f1fcc264124839bfd55272b27716a8318984e2
mean-share-and-balance
2025b41c92ca6bd9a348c9a201dcd483d16499af
mobius
ee5b9f8b407fefb8a71b608fc684d51ebc89f82d
models-of-the-hydrogen-atom
6b0569f35393af751357de9815b3d8d8f69d34e9
molarity
9cb4f6dbca4acbc9cb3ca880e256e4df7c03f4cb
molecule-polarity
f8bc057aed33fd6a1d774f7e183177cef3068b30
molecule-shapes
1a8740c328e5eb0c95e40031c2dc428c01031e9b
molecule-shapes-basics
d6d5953df8e01e5bfd11c433fed90c376bcf1cf9
molecules-and-light
3d06fdb8ea7fe2fedd09252d0230092b976664ab
my-solar-system
dd6b955469c097498f32a5a6a3908a380ffde780
natural-selection
339b8f75696ed8ff19ef1a6bc4359dd606277ab9
neuron
bb2e70e460f0141ca5d52c8d7ca617334ecefca3
nitroglycerin
94eb86648658ca9220cf01d2e293d306e6632e33
normal-modes
0b4344ee4b6d826ed670a749b9534723537e2a3a
number-line-common
a724b95cb2f973720c7595c1f45622de2863ea7c
number-line-distance
3bd9235db40c87a41e147a71f590bb82bc31ca23
number-line-integers
df7de02d15da5d9fad61e113fe332bd499c69f52
number-line-operations
44b47f278037d9f16727c63a229b58919c2cb53f
number-play
25f99ac0e280fefb0aab50299e26594252ec89d8
ohms-law
34663134d3360790338b7ae181059972c05121f7
optics-lab
be87baf0991ff9dc6b0b46ab969b271dd6ca743d
pendulum-lab
6cef1653b402dea93e3680a3ff8878b384223ddf
perennial
9ed570727d0f61243ecd5cca269b0673be0cdf8d
perennial-alias
9ed570727d0f61243ecd5cca269b0673be0cdf8d
ph-scale
07627a9f4e9881af0bcc54c088dc0ad7c951e80c
ph-scale-basics
4bd0d72c055f011a8ae24cded91faf28939e1ca9
phet-core
d5bf67c048fa2e2bf2ae7bff6d08b2506e7a6f53
phet-info
baa826c5a18288fb8273b5e6205f8ca5f2d594f8
phet-io
b0a733bd6cabdc78c56e335c3a06dcc42bbe13cf
phet-io-client-guides
990235de751a92ec7c2deb12952c399fceba51c6
phet-io-sim-specific
a23b7bb01f68ff24f62963181ffb29bd08f2f1cf
phet-io-test-sim
3ae9c99a5ba1874b0b381bb881cc3e02d440a950
phet-io-website
34e361c104e58d07e449b31ba62e44fb9bd0aa40
phet-io-wrapper-classroom-activity
831567ed89dde2ffeec4137a9277d095af2698ad
phet-io-wrapper-haptics
d28c7d2bf5a4f0103084c0c1533a0615e3f5a279
phet-io-wrapper-hookes-law-energy
90a6123dd96f3d4c41c26c57bb4075b274137c9a
phet-io-wrapper-lab-book
15b288baf86eae21ec5fbf6496ff5930487ce1cc
phet-io-wrappers
76970573eba48a5b7f9ccd221a0011067073dbbe
phetcommon
2e1fed8da429f298dd3f1419353c377f22b3c9b3
phetmarks
cff95352a6302a655292eba2c5850027957623cd
phettest
8932f5f547b9c06f61e477fcc1b8561a059c1919
plinko-probability
6927fbdd5750835244a6b2e46108629c868c8d91
projectile-motion
13852c6bac132a6fc3ef431fb5ff89312ddab48f
proportion-playground
af6069a735e039cfe77b6790799292eb98442720
qa
8e4da51be109641c6994b2bee106378495fd2603
quadrilateral
aae1fe008f63b233b0785816fa19d0dcfe37e153
quake
d0f3a94deda3242a5c8c4810f925bbb81051780f
query-string-machine
c17bdbf6f721bdde9460e6b8d6ad032a42bec35b
ratio-and-proportion
7bee2b08e7964d064f9af3efd0fdb3501e608c8b
reactants-products-and-leftovers
6ea5a502d4e6c80d00541efa3e1e5dd019b61b6d
resistance-in-a-wire
8612861122d83329b9d242e34d84bddb354b7f91
rosetta
9ec92efe935819f960a5a76ff3988c5a2b12ccc5
rutherford-scattering
d9535f271fb78459bd456307bf5a138ae1abf009
scenery
d1c73da7c645bcd26bff69b81c4135089197c823
scenery-phet
22a10979b2cbd4fc29edbc984cf3c7a705c0ae32
sherpa
d3e3deeb273cf41e5b0bb563654b34f2c1a0ccf7
shred
e3ea1839135826083d92ea2126f45c31d3046cb4
simula-rasa
6277cd3f4a8e92e72ff7c986a692b98908ae180e
skiffle
e05e420e1024d4760ddc6f4a78dfe4cda3692e82
states-of-matter
413a0771d2fa0c390fc1d4543fbd000db32af44e
states-of-matter-basics
fd3d0f9a5a8b43acbd2ea1ecae8606031cd03972
studio
8c16b15ba11c356f8f94b0ed98837f75a410aa7c
sun
5d6f0e289ccb4502e8d3b13401d6edfb7d606cb8
tambo
5672b124f6ef06839cb6dfe508f554b53ae2368c
tandem
550d37ca9fdd2a639683c2083a26f5edad22514e
tangible
f1fd590b5e8a35cfe027fcebeb31ae75ab4c25f4
tappi
7e29044bc666db93ffc0df444fb4f53d89f21374
tasks
4e3cbe757a2ac3c88415041438abf14e68db4fff
trig-tour
753ec4ad2bd02e2c0dd2ccd2fe568a12782d46a0
twixt
514228cf0f39d58ec753f21e36624ce52dc86cfb
under-pressure
43b225ceefa6b69e0714d39a7b3e43e6591a705d
unit-rates
84e4be5d486e81f4af723c3ef50d85d4a08ae433
utterance-queue
e8a930a0cce2baadaf1832eb24a526305a700d69
vector-addition
ebf20baa09b93c481e1dda3eebb5e3e974dcefce
vector-addition-equations
5d9d62ac94cde06919fecf1c801ba405ad78f81e
vegas
bb33b9efb25cf99b985b5d090af5ce36a00e9da9
vibe
949ec34ca097e2125ef6de842b9d399d61ee2f85
wave-interference
3cb245f26646eba91ec85a6318e1392100580ba0
wave-on-a-string
d15972b79f7a998cf467a7d03fbd81f2729b752c
waves-intro
9b48f0e70212dae01366ce3443b4c348786453a7
weddell
f707340523e8fa0ef1f118706e2f5fc5e9c7ff66
wilder
aae108d34efe635e65849ff3379b205258a34038
xray-diffraction
a150856f81b6649437c3f2af08863bec6fe89f61
yotta
7f5728994a7296b212f0b268e85790ef4b6f31db
jonathanolson commented 2 years ago

Buttons, accordion boxes and combo boxes should now be resizable by default. No infinite loops in sims that I noticed. @pixelzoom can you verify that this is fixing your cases?

pixelzoom commented 2 years ago

Verified that resize is on by default for sun buttons. But there's a problem - the buttons only grow in width, the do never shrink in width. For example, in Natural Selection:

When the sim starts in locale "en", the "Add a Mate" button looks like this:

screenshot_1824

Changing to locale "de" makes the button wider:

screenshot_1825

Changing back to locale "en", the button remains wider:

screenshot_1826

I expected the "en" width to be the same as it was originally, respecting the button margins.

I did not test AccordionBox or ComboBox. Do they have this same problem?

zepumph commented 2 years ago

Yes, I was noticing trouble yesterday in AccordionBox in RAP, and after a pull things are much better!

image

pixelzoom commented 2 years ago

I tested AccordionBox in RAP. When going from 'en' > 'de' > 'en', the AccordionBox has the same width with 'en' in both cases.

zepumph commented 2 years ago

I see. I think I misunderstood the desired behavior.

I would also like to note a couple of potential CT problems stemming from here:

https://github.com/phetsims/build-a-nucleus/issues/49 https://github.com/phetsims/build-a-molecule/issues/232

zepumph commented 2 years ago

Also seeing one in collision-lab:

collision-lab : xss-fuzz
https://bayes.colorado.edu/continuous-testing/ct-snapshots/1661527344778/collision-lab/collision-lab_en.html?continuousTest=%7B%22test%22%3A%5B%22collision-lab%22%2C%22xss-fuzz%22%5D%2C%22snapshotName%22%3A%22snapshot-1661527344778%22%2C%22timestamp%22%3A1661535360275%7D&brand=phet&ea&fuzz&stringTest=xss&memoryLimit=1000
Query: brand=phet&ea&fuzz&stringTest=xss&memoryLimit=1000
Uncaught Error: Assertion failed: Corner overlap on left edge
Error: Assertion failed: Corner overlap on left edge
at window.assertions.assertFunction (https://bayes.colorado.edu/continuous-testing/ct-snapshots/1661527344778/assert/js/assert.js:28:13)
at assert (Shape.js:2037:14)
at roundedRectangleWithRadii (RectangularButton.ts:204:15)
at createButtonShape (RectangularButton.ts:175:33)
at callback (Multilink.ts:111:10)
at listener (TinyEmitter.ts:95:8)
at emit (ReadOnlyProperty.ts:303:22)
at _notifyListeners (ReadOnlyProperty.ts:254:13)
at unguardedSet (ReadOnlyProperty.ts:238:11)
at set (DerivedProperty.ts:155:12)
id: Bayes Puppeteer
Snapshot from 8/26/2022, 9:22:24 AM
jonathanolson commented 2 years ago

I'm looking into the non-shrinking button issue. I don't believe it should be a problem with other things, it's mainly with how buttons had to do backward-compatible layout.

pixelzoom commented 2 years ago

ComboBox has major resize problems. See https://github.com/phetsims/sun/issues/785.

pixelzoom commented 2 years ago

Tracking the resize problems with sun buttons in https://github.com/phetsims/sun/issues/781.

jonathanolson commented 2 years ago

I'm unable to reproduce the collision-lab issue (and don't see it on CT). It seems like everything is being handled in issues. @zepumph do you know anything else to be done for this issue?

zepumph commented 2 years ago

I don't see the issues reported from CT anymore. I really haven't followed this issue in the slightest, but perhaps you already knew that and feel ok about me closing this issue. Please reopen if you see anything else!