fix(hosts): draw Pocket faces and chat widgets the same on iOS and Android

.changeset/pocket-face-layout-rules.md

@@ -0,0 +1,5 @@
+---
+"@parity/truapi": patch
+---
+
+Document the layout rules every host draws a renderer tree by: padding goes around a fixed size, a `Box` places its children at the top start, stacks add no gap, a `Spacer` is flexible, borders sit inside the node, a shaped background clips its content, an image's natural size is one pixel to a point, and images may be PNG, JPEG, WebP or SVG.

docs/rfcs/unified-renderer.md

@@ -246,7 +246,7 @@ pub enum BlendingMode {
 pub enum Modifier {
     /// Outer spacing.
     Margin(Dimensions),
-    /// Inner spacing.
+    /// Inner spacing, around the content: a fixed or minimum size is the content's.
     Padding(Dimensions),
     Background(Background),
     Border(BorderStyle),
@@ -296,6 +296,7 @@ pub struct ButtonProps {
 }
 
 /// Where image bytes come from. The host fetches them; the tree carries no URL.
+/// The bytes are PNG, JPEG, WebP or SVG.
 pub enum ImageSource {
     /// A Bulletin chain blob, addressed by its CID.
     Bulletin(String),
@@ -305,7 +306,7 @@ pub enum ImageSource {
 }
 
 pub enum ImageFit {
-    /// The image is not resized.
+    /// The image is not resized: one image pixel to a point.
     None,
     /// Resized to fill the container without preserving the aspect ratio.
     Fill,
@@ -369,7 +370,8 @@ pub enum RendererNode {
         props: RowProps,
         children: Vec<RendererNode>,
     },
-    /// Flexible space.
+    /// Flexible space: shares out what its stack has left, unless sized along
+    /// the stack's axis.
     Spacer {
         modifiers: Vec<Modifier>,
     },
@@ -389,12 +391,14 @@ pub enum RendererNode {
         modifiers: Vec<Modifier>,
         props: TextFieldProps,
     },
-    /// Image, sized by modifiers.
+    /// Image, sized by modifiers. Without any it takes its natural size, one
+    /// image pixel to a point.
     Image {
         modifiers: Vec<Modifier>,
         props: ImageProps,
     },
-    /// Applies its effect to its children.
+    /// Applies its effect to its children. As large as its children, which it
+    /// places at the top start like a `Box`.
     Effect {
         props: EffectProps,
         children: Vec<RendererNode>,

hosts/android/feature/products/api/build.gradle.kts

@@ -29,4 +29,10 @@ dependencies {
     implementation(libs.nova.substrate.serialization)
 
     testImplementation(libs.junit)
+
+    androidTestImplementation(platform(libs.androidx.compose.bom))
+    androidTestImplementation(libs.androidx.compose.ui.test.junit4)
+    androidTestImplementation(libs.androidx.compose.ui.test.manifest)
+    androidTestImplementation(libs.androidx.junit)
+    androidTestImplementation(libs.androidx.test.runner)
 }

hosts/android/feature/products/api/src/androidTest/kotlin/io/paritytech/polkadotapp/feature_products_api/presentation/widget/JsWidgetLayoutTest.kt

@@ -0,0 +1,204 @@
+package io.paritytech.polkadotapp.feature_products_api.presentation.widget
+
+import android.graphics.Bitmap
+import android.net.Uri
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toPixelMap
+import androidx.compose.ui.test.captureToImage
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onRoot
+import androidx.compose.ui.unit.dp
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import androidx.test.platform.app.InstrumentationRegistry
+import coil.imageLoader
+import io.paritytech.polkadotapp.design.theme.PolkadotTheme
+import io.paritytech.polkadotapp.designsystem.themes.PolkadotAppTheme
+import io.paritytech.polkadotapp.feature_products_api.model.JsArrangement
+import io.paritytech.polkadotapp.feature_products_api.model.JsColor
+import io.paritytech.polkadotapp.feature_products_api.model.JsImageFit
+import io.paritytech.polkadotapp.feature_products_api.model.JsImageSource
+import io.paritytech.polkadotapp.feature_products_api.model.JsModifier
+import io.paritytech.polkadotapp.feature_products_api.model.JsWidget
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertTrue
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+import java.io.File
+import kotlin.math.abs
+
+/** The layout rules of `renderer.rs`, which iOS draws the same way. */
+@RunWith(AndroidJUnit4::class)
+class JsWidgetLayoutTest {
+    @get:Rule
+    val compose = createComposeRule()
+
+    @Test
+    fun aSpacerWithNoSizeTakesWhatItsRowHasLeft() {
+        draw(
+            JsWidget.Row(
+                modifiers = listOf(JsModifier.Size(width = 100)),
+                children = listOf(block(JsColor.FG_ERROR), JsWidget.Spacer(), block(JsColor.FG_SUCCESS)),
+            ),
+        )
+
+        assertEquals(80, boundsOf(success)?.left?.inDp())
+    }
+
+    @Test
+    fun aSpacerKeepsItsMinimumWhenItsRowIsShortOfRoom() {
+        draw(
+            JsWidget.Row(
+                modifiers = listOf(JsModifier.Size(width = 100)),
+                children = listOf(
+                    block(JsColor.FG_ERROR),
+                    JsWidget.Spacer(modifiers = listOf(JsModifier.Size(minWidth = 30))),
+                    JsWidget.Box(
+                        modifiers = listOf(JsModifier.Background(JsColor.FG_SUCCESS)),
+                        children = listOf(JsWidget.Text("enough words to want more room than the row has")),
+                    ),
+                ),
+            ),
+        )
+
+        assertEquals(50, boundsOf(success)?.left?.inDp())
+    }
+
+    @Test
+    fun aRowWithOnlyAMinimumWidthKeepsItsChildrenAtTheStart() {
+        draw(
+            JsWidget.Row(
+                modifiers = listOf(JsModifier.Size(minWidth = 100)),
+                horizontalArrangement = JsArrangement.END,
+                children = listOf(block(JsColor.FG_SUCCESS)),
+            ),
+        )
+
+        assertEquals(0, boundsOf(success)?.left?.inDp())
+    }
+
+    @Test
+    fun aChildFillingTheHeightOfARowWithNoHeightIsAsTallAsTheTallestChild() {
+        draw(
+            JsWidget.Row(
+                children = listOf(
+                    block(JsColor.FG_ERROR),
+                    JsWidget.Box(
+                        modifiers = listOf(
+                            JsModifier.Size(width = 20),
+                            JsModifier.FillMaxHeight(),
+                            JsModifier.Background(JsColor.FG_SUCCESS),
+                        ),
+                    ),
+                ),
+            ),
+        )
+
+        assertEquals(20, boundsOf(success)?.height()?.inDp())
+    }
+
+    @Test
+    fun aPictureWithNoSizeOfItsOwnTakesOneDpPerPixel() {
+        val image = JsWidget.Image(source = JsImageSource.Archive("small.png"), fit = JsImageFit.CONTAIN)
+
+        val drawn = drawPicture(30, 20, image)
+
+        assertEquals(listOf(30, 20), listOf(drawn.width().inDp(), drawn.height().inDp()))
+    }
+
+    @Test
+    fun aLargePictureWithNoSizeOfItsOwnIsShrunkToFit() {
+        val image = JsWidget.Image(source = JsImageSource.Archive("large.png"), fit = JsImageFit.FILL)
+
+        val drawn = drawPicture(600, 300, image)
+
+        assertEquals(listOf(100, 50), listOf(drawn.width().inDp(), drawn.height().inDp()))
+    }
+
+    @Test
+    fun aPictureSizedOnOneSideTakesTheOtherFromItsProportions() {
+        val image = JsWidget.Image(
+            source = JsImageSource.Archive("wide.png"),
+            fit = JsImageFit.COVER,
+            modifiers = listOf(JsModifier.Size(width = 40)),
+        )
+
+        val drawn = drawPicture(80, 40, image)
+
+        assertEquals(listOf(40, 20), listOf(drawn.width().inDp(), drawn.height().inDp()))
+    }
+
+    /** A product can send any size of picture, and one is never drawn larger than the screen. */
+    @Test
+    fun aPictureLargerThanTheScreenIsDecodedNoLargerThanTheScreen() {
+        val metrics = context.resources.displayMetrics
+        val screen = maxOf(metrics.widthPixels, metrics.heightPixels)
+        val image = JsWidget.Image(source = JsImageSource.Archive("huge.png"), fit = JsImageFit.CONTAIN)
+
+        drawPicture(screen * 2, screen / 2, image)
+
+        val memory = checkNotNull(context.imageLoader.memoryCache)
+        val decodedWidths = memory.keys.mapNotNull { memory[it]?.bitmap?.width }
+        assertTrue("decoded $decodedWidths for a screen of $screen", decodedWidths.isNotEmpty() && decodedWidths.all { it <= screen })
+    }
+
+    /**
+     * Draws `image` showing a red picture of this many pixels, read from a PNG file as a product's
+     * images are, and returns where it landed.
+     */
+    private fun drawPicture(width: Int, height: Int, image: JsWidget.Image): android.graphics.Rect {
+        val picture = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        picture.eraseColor(android.graphics.Color.RED)
+        val file = File(context.cacheDir, "${width}x$height.png")
+        file.outputStream().use { picture.compress(Bitmap.CompressFormat.PNG, 100, it) }
+        draw(image, images = JsImageResolver { Uri.fromFile(file) })
+        compose.waitUntil(timeoutMillis = 5_000) { boundsOf(pureRed) != null }
+
+        return checkNotNull(boundsOf(pureRed))
+    }
+
+    private fun draw(widget: JsWidget, images: JsImageResolver = JsImageResolver { null }) {
+        compose.setContent {
+            PolkadotTheme(theme = PolkadotAppTheme.BerlinNight) {
+                CompositionLocalProvider(LocalJsImageResolver provides images) {
+                    Box(Modifier.size(100.dp).background(Color.Black)) {
+                        JsWidgetRenderer(widget = widget, jsEventHandler = { _, _ -> })
+                    }
+                }
+            }
+        }
+    }
+
+    /** Where the pixels of `colour` lie, in pixels, or null if none were drawn. */
+    private fun boundsOf(colour: Color): android.graphics.Rect? {
+        val pixels = compose.onRoot().captureToImage().toPixelMap()
+        var found: android.graphics.Rect? = null
+        for (y in 0 until pixels.height) {
+            for (x in 0 until pixels.width) {
+                if (pixels[x, y].isCloseTo(colour)) {
+                    found = (found ?: android.graphics.Rect(x, y, x, y)).apply { union(x, y) }
+                }
+            }
+        }
+        return found?.apply { right += 1; bottom += 1 }
+    }
+
+    private val context get() = InstrumentationRegistry.getInstrumentation().targetContext
+
+    private fun Int.inDp(): Int = Math.round(this / compose.density.density)
+
+    private fun Color.isCloseTo(other: Color) =
+        abs(red - other.red) < 0.05f && abs(green - other.green) < 0.05f && abs(blue - other.blue) < 0.05f
+
+    private fun block(color: JsColor) = JsWidget.Box(
+        modifiers = listOf(JsModifier.Size(width = 20, height = 20), JsModifier.Background(color)),
+    )
+
+    private val success = Color(red = 34, green = 197, blue = 94)
+    private val pureRed = Color(red = 255, green = 0, blue = 0)
+}

hosts/android/feature/products/api/src/main/kotlin/io/paritytech/polkadotapp/feature_products_api/presentation/widget/JsModifierExt.kt

@@ -41,8 +41,9 @@ fun List<JsModifier>.toComposeModifier(): Modifier =
  * keeps an opaque background and a blended one never blends the surface it paints.
  *
  * The rest follows the frame: margin outside, then the surface, then the content's padding and size.
+ * A shaped background also clips the content to its shape, after the border so the border stays whole.
  */
-internal fun List<JsModifier>.orderedForCompose(): List<JsModifier> = sortedWith(
+internal fun List<JsModifier>.orderedForCompose(): List<JsModifier> = (this + backgroundClips()).sortedWith(
     compareBy {
         when (it) {
             is JsModifier.Margin -> 0
@@ -59,6 +60,9 @@ internal fun List<JsModifier>.orderedForCompose(): List<JsModifier> = sortedWith
     }
 )
 
+private fun List<JsModifier>.backgroundClips(): List<JsModifier> =
+    filterIsInstance<JsModifier.Background>().mapNotNull { it.shape }.map { JsModifier.Clip(it) }
+
 @Composable
 fun JsModifier.toComposeModifier(): Modifier = when (this) {
     is JsModifier.Margin -> toMarginModifier()