MosisService/docs/UI-ASSETS.md

UI Assets Structure

All UI assets are in src/main/assets/:

assets/
├── apps/                    # System apps (RML documents)
│   ├── home/home.rml        # Home screen launcher
│   ├── dialer/dialer.rml    # Phone dialer
│   ├── messages/            # Messages app
│   ├── contacts/            # Contacts app
│   ├── settings/            # Settings app
│   └── browser/             # Web browser
├── ui/                      # Shared stylesheets
│   ├── html.rcss            # Base HTML element styles
│   ├── theme.rcss           # Design tokens (colors, typography)
│   └── components.rcss      # Reusable UI components
├── scripts/                 # Lua scripts
│   └── navigation.lua       # Navigation system
├── icons/                   # TGA icon files (24x24, 32x32)
└── fonts/                   # TTF fonts (LatoLatin, Roboto)

Navigation System

Navigation is handled by scripts/navigation.lua:

-- Navigate to a screen
navigateTo('dialer')     -- Push to history, animate forward

-- Go back
goBack()                  -- Pop from history, animate back

-- Go home
goHome()                  -- Clear history, return to home

Element IDs for Testing

Key elements have IDs for automated testing:

ID	Location	Purpose
dock-phone	home.rml	Phone dock icon
dock-messages	home.rml	Messages dock icon
dock-contacts	home.rml	Contacts dock icon
dock-browser	home.rml	Browser dock icon
app-settings	home.rml	Settings app icon

CSS Classes for Navigation

Back buttons use app-bar-nav class for automated GoHome:

<div class="app-bar-nav btn-icon" onclick="goBack()">
    <img src="../../icons/back.tga"/>
</div>

Browser uses browser-nav-btn class for its toolbar back button:

<div class="app-bar-nav browser-nav-btn" onclick="goBack()">
    <img src="../../icons/back.tga"/>
</div>

The test framework's FindBackButton() searches for both classes to handle all screen layouts.