iOS: Tweaks and changes for phone mode

Phone mode uses a modified user interface. Work in progress...

13 files changed, 197 insertions, 80 deletions

diff --git a/res/LaunchScreen.storyboard b/res/LaunchScreen.storyboard
new file mode 100644
index 00000000..f9a048ed
--- /dev/null
+++ b/res/LaunchScreen.storyboard
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13142" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12042"/>
+    </dependencies>
+    <scenes/>
+</document>
diff --git a/src/app.c b/src/app.c
index bb8ebb42..38367210 100644
--- a/src/app.c
+++ b/src/app.c
@@ -941,6 +941,20 @@ iMimeHooks *mimeHooks_App(void) {
     return app_.mimehooks;
 }
 
+iBool isLandscape_App(void) {
+    const iApp *d = &app_;
+    const iInt2 size = rootSize_Window(d->window);
+    return size.x > size.y;
+}
+
+enum iAppDeviceType deviceType_App(void) {
+#if defined (iPlatformAppleMobile)
+    return isPhone_iOS() ? phone_AppDeviceType : tablet_AppDeviceType;
+#else
+    return desktop_AppDeviceType;
+#endif
+}
+
 iGmCerts *certs_App(void) {
     return app_.certs;
 }
diff --git a/src/app.h b/src/app.h
index 54c60d10..e29745c3 100644
--- a/src/app.h
+++ b/src/app.h
@@ -38,6 +38,12 @@ iDeclareType(MimeHooks)
 iDeclareType(Visited)
 iDeclareType(Window)
 
+enum iAppDeviceType {
+    desktop_AppDeviceType,
+    tablet_AppDeviceType,
+    phone_AppDeviceType,
+};
+
 enum iAppEventMode {
     waitForNewEvents_AppEventMode,
     postedEventsOnly_AppEventMode,
@@ -61,6 +67,9 @@ void        refresh_App                 (void);
 iBool       isRefreshPending_App        (void);
 uint32_t    elapsedSinceLastTicker_App  (void); /* milliseconds */
 
+iBool               isLandscape_App     (void);
+iLocalDef iBool     isPortrait_App      (void) { return !isLandscape_App(); }
+enum iAppDeviceType deviceType_App      (void);
 iGmCerts *          certs_App           (void);
 iVisited *          visited_App         (void);
 iBookmarks *        bookmarks_App       (void);
diff --git a/src/ios.h b/src/ios.h
index 90570e20..60841aee 100644
--- a/src/ios.h
+++ b/src/ios.h
@@ -28,4 +28,6 @@ iDeclareType(Window)
 
 void    setupApplication_iOS    (void);
 void    setupWindow_iOS         (iWindow *window);
+iBool   isPhone_iOS             (void);
+void    safeAreaInsets_iOS      (float *left, float *top, float *right, float *bottom);
 iBool   processEvent_iOS        (const SDL_Event *);
diff --git a/src/ios.m b/src/ios.m
index aca3bf0a..5abf87df 100644
--- a/src/ios.m
+++ b/src/ios.m
@@ -29,6 +29,7 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
 #import <UIKit/UIKit.h>
 
 static iBool isSystemDarkMode_ = iFalse;
+static iBool isPhone_ = iFalse;
 
 static void enableMouse_(iBool yes) {
     SDL_EventState(SDL_MOUSEBUTTONDOWN, yes);
@@ -38,6 +39,10 @@ static void enableMouse_(iBool yes) {
 
 void setupApplication_iOS(void) {
     enableMouse_(iFalse);
+    NSString *deviceModel = [[UIDevice currentDevice] model];
+    if ([deviceModel isEqualToString:@"iPhone"]) {
+        isPhone_ = iTrue;
+    }
 }
 
 static UIViewController *viewController_(iWindow *window) {
@@ -61,7 +66,27 @@ static iBool isDarkMode_(iWindow *window) {
     return iFalse;
 }
 
+void safeAreaInsets_iOS(float *left, float *top, float *right, float *bottom) {
+    iWindow *window = get_Window();
+    UIViewController *ctl = viewController_(window);
+    if (@available(iOS 11.0, *)) {
+        const UIEdgeInsets safe = ctl.view.safeAreaInsets;
+        *left = safe.left * window->pixelRatio;
+        *top = safe.top * window->pixelRatio;
+        *right = safe.right * window->pixelRatio;
+        *bottom = safe.bottom * window->pixelRatio;
+    } else {
+        // Fallback on earlier versions
+        *left = *top = *right = *bottom = 0.0f;
+    }
+}
+
+iBool isPhone_iOS(void) {
+    return isPhone_;
+}
+
 void setupWindow_iOS(iWindow *window) {
+    UIViewController *ctl = viewController_(window);
     isSystemDarkMode_ = isDarkMode_(window);
     postCommandf_App("~os.theme.changed dark:%d contrast:1", isSystemDarkMode_ ? 1 : 0);
 }
diff --git a/src/prefs.c b/src/prefs.c
index 9d89f2f5..056ae267 100644
--- a/src/prefs.c
+++ b/src/prefs.c
@@ -52,6 +52,9 @@ void init_Prefs(iPrefs *d) {
     init_String(&d->httpProxy);
     init_String(&d->downloadDir);
     init_String(&d->searchUrl);
+#if defined (iPlatformAppleMobile)
+    d->hoverLink = iFalse;
+#endif
 }
 
 void deinit_Prefs(iPrefs *d) {
diff --git a/src/ui/documentwidget.c b/src/ui/documentwidget.c
index 40d83cec..cb075c49 100644
--- a/src/ui/documentwidget.c
+++ b/src/ui/documentwidget.c
@@ -1701,6 +1701,8 @@ static iBool handleCommand_DocumentWidget_(iDocumentWidget *d, const char *cmd)
         iWidget *sizer = new_Widget();
         setSize_Widget(sizer, init_I2(gap_UI * 90, 1));
         addChildFlags_Widget(dlg, iClob(sizer), frameless_WidgetFlag);
+        setFlags_Widget(dlg, centerHorizontal_WidgetFlag, iFalse);
+        setPos_Widget(dlg, bottomLeft_Rect(bounds_Widget(findWidget_App("navbar.lock"))));
         arrange_Widget(dlg);
         addAction_Widget(dlg, SDLK_ESCAPE, 0, "message.ok");
         addAction_Widget(dlg, SDLK_SPACE, 0, "message.ok");
@@ -2350,16 +2352,20 @@ static iBool processEvent_DocumentWidget_(iDocumentWidget *d, const SDL_Event *e
         }
     }
     else if (ev->type == SDL_MOUSEWHEEL && isHover_Widget(w)) {
+        /* TODO: Maybe clean this up a bit? Wheel events are used for scrolling
+           but they are calculated differently based on device/mouse/trackpad. */
         const iInt2 mouseCoord = mouseCoord_Window(get_Window());
 #if defined (iPlatformApple)
         /* On macOS, we handle both trackpad and mouse events. We expect SDL to identify
            which device is sending the event. */
         if (ev->wheel.which == 0) { /* Trackpad with precise scrolling w/inertia. */
             stop_Anim(&d->scrollY);
-            iInt2 wheel = mulf_I2(init_I2(ev->wheel.x, ev->wheel.y), get_Window()->pixelRatio);
-#if defined (iPlatformAppleMobile)
+            iInt2 wheel = init_I2(ev->wheel.x, ev->wheel.y);
+#   if defined (iPlatformAppleMobile)
             wheel.x = -wheel.x;
-#else
+#   else
+            /* Wheel mounts are in points. */
+            mulfv_I2(&wheel, get_Window()->pixelRatio);
             /* Only scroll on one axis at a time. */
             if (iAbs(wheel.x) > iAbs(wheel.y)) {
                 wheel.y = 0;
@@ -2367,7 +2373,7 @@ static iBool processEvent_DocumentWidget_(iDocumentWidget *d, const SDL_Event *e
             else {
                 wheel.x = 0;
             }
-#endif
+#   endif
             scroll_DocumentWidget_(d, -wheel.y);
             scrollWideBlock_DocumentWidget_(d, mouseCoord, wheel.x, 0);
         }
diff --git a/src/ui/listwidget.c b/src/ui/listwidget.c
index b27107df..2130400c 100644
--- a/src/ui/listwidget.c
+++ b/src/ui/listwidget.c
@@ -292,12 +292,16 @@ static iBool processEvent_ListWidget_(iListWidget *d, const SDL_Event *ev) {
         setHoverItem_ListWidget_(d, hover);
     }
     if (ev->type == SDL_MOUSEWHEEL && isHover_Widget(w)) {
+        int amount = -ev->wheel.y;
 #if defined (iPlatformApple)
-        /* Momentum scrolling. */
-        scrollOffset_ListWidget(d, -ev->wheel.y * get_Window()->pixelRatio);
+#   if defined (iPlatformAppleDesktop)
+        /* Momentum scrolling (in points). */
+        amount *= get_Window()->pixelRatio;
+#   endif
 #else
-        scrollOffset_ListWidget(d, -ev->wheel.y * 3 * d->itemHeight);
+        amount *= 3 * d->itemHeight;
 #endif
+        scrollOffset_ListWidget(d, amount);
         return iTrue;
     }
     switch (processEvent_Click(&d->click, ev)) {
diff --git a/src/ui/lookupwidget.c b/src/ui/lookupwidget.c
index ab0a009a..7d6052e2 100644
--- a/src/ui/lookupwidget.c
+++ b/src/ui/lookupwidget.c
@@ -629,9 +629,6 @@ static iBool moveCursor_LookupWidget_(iLookupWidget *d, int delta) {
 static iBool processEvent_LookupWidget_(iLookupWidget *d, const SDL_Event *ev) {
     iWidget *w = as_Widget(d);
     const char *cmd = command_UserEvent(ev);
-//    if (ev->type == SDL_MOUSEMOTION && contains_Widget(w, init_I2(ev->motion.x, ev->motion.y))) {
-//        setCursor_Window(get_Window(), SDL_SYSTEM_CURSOR_ARROW);
-//    }
     if (isCommand_Widget(w, ev, "lookup.ready")) {
         /* Take the results and present them in the list. */
         presentResults_LookupWidget_(d);
@@ -640,17 +637,23 @@ static iBool processEvent_LookupWidget_(iLookupWidget *d, const SDL_Event *ev) {
     if (isResize_UserEvent(ev) || (equal_Command(cmd, "layout.changed") &&
                                    equal_Rangecc(range_Command(cmd, "id"), "navbar"))) {
         /* Position the lookup popup under the URL bar. */ {
+            const iWindow *window = get_Window();
+            const iInt2 rootSize = rootSize_Window(window);
+            const iRect navBarBounds = bounds_Widget(findWidget_App("navbar"));
             setSize_Widget(w, init_I2(width_Widget(findWidget_App("url")),
-                                      get_Window()->root->rect.size.y / 2));
+                                      (rootSize.y - bottom_Rect(navBarBounds)) / 2));
+            setPos_Widget(w, bottomLeft_Rect(bounds_Widget(findWidget_App("url"))));
 #if defined (iPlatformAppleMobile)
             /* TODO: Ask the system how tall the keyboard is. */ {
-                const iInt2 rootSize = rootSize_Window(get_Window());
-                if (rootSize.x > rootSize.y) {
+                if (isLandscape_App()) {
                     w->rect.size.y = rootSize.y * 4 / 10;
                 }
+                else if (deviceType_App() == phone_AppDeviceType) {
+                    w->rect.size.x = rootSize.x;
+                    w->rect.pos.x  = 0;
+                }
             }
 #endif
-            setPos_Widget(w, bottomLeft_Rect(bounds_Widget(findWidget_App("url"))));
             arrange_Widget(w);
         }
         updateVisible_ListWidget(d->list);
diff --git a/src/ui/touch.c b/src/ui/touch.c
index d7d2bca1..8c39793e 100644
--- a/src/ui/touch.c
+++ b/src/ui/touch.c
@@ -50,7 +50,7 @@ struct Impl_Touch {
     iFloat3 startPos;
     uint32_t posTime[numHistory_Touch_];
     iFloat3 pos[numHistory_Touch_];
-    iFloat3 remainder;
+    iFloat3 accum;
 };
 
 iLocalDef void pushPos_Touch_(iTouch *d, const iFloat3 pos, uint32_t time) {
@@ -103,7 +103,7 @@ static iBool isStationary_Touch_(const iTouch *d) {
 }
 
 static void dispatchClick_Touch_(const iTouch *d, int button) {
-    const iFloat3 tapPos = d->pos[0]; //divf_F3(add_F3(d->pos[0], d->startPos), 2);
+    const iFloat3 tapPos = d->pos[0];
     SDL_MouseButtonEvent btn = {
         .type = SDL_MOUSEBUTTONDOWN,
         .button = button,
@@ -151,13 +151,14 @@ static void update_TouchState_(void *ptr) {
     }
     /* Update/cancel momentum scrolling. */ {
         const float minSpeed = 15.0f;
-        const float momFriction = 0.98f; /* per step */
+        const float momFriction = 0.985f; /* per step */
         const float stepDurationMs = 1000.0f / 120.0f;
         double momAvailMs = nowTime - d->lastMomTime;
         int numSteps = (int) (momAvailMs / stepDurationMs);
         d->lastMomTime += numSteps * stepDurationMs;
         numSteps = iMin(numSteps, 10); /* don't spend too much time here */
 //        printf("mom steps:%d\n", numSteps);
+        iWindow *window = get_Window();
         iForEach(Array, m, d->moms) {
             if (numSteps == 0) break;
             iMomentum *mom = m.value;
@@ -165,15 +166,15 @@ static void update_TouchState_(void *ptr) {
                 mulvf_F3(&mom->velocity, momFriction);
                 addv_F3(&mom->accum, mulf_F3(mom->velocity, stepDurationMs / 1000.0f));
             }
-            const iInt2 pixels = initF3_I2(mom->accum);
-            if (pixels.x || pixels.y) {
-                subv_F3(&mom->accum, initI2_F3(pixels));
+            const iInt2 points = initF3_I2(mom->accum);
+            if (points.x || points.y) {
+                subv_F3(&mom->accum, initI2_F3(points));
                 dispatchEvent_Widget(mom->affinity, (SDL_Event *) &(SDL_MouseWheelEvent){
                     .type = SDL_MOUSEWHEEL,
                     .timestamp = nowTime,
                     .which = 0, /* means "precise scrolling" in DocumentWidget */
-                    .x = pixels.x,
-                    .y = pixels.y
+                    .x = points.x,
+                    .y = points.y
                 });
             }
             if (length_F3(mom->velocity) < minSpeed) {
@@ -187,6 +188,17 @@ static void update_TouchState_(void *ptr) {
     }
 }
 
+static void dispatchMotion_Touch_(iFloat3 pos, int buttonState) {
+    dispatchEvent_Widget(get_Window()->root, (SDL_Event *) &(SDL_MouseMotionEvent){
+        .type = SDL_MOUSEMOTION,
+        .timestamp = SDL_GetTicks(),
+        .which = SDL_TOUCH_MOUSEID,
+        .state = buttonState,
+        .x = x_F3(pos),
+        .y = y_F3(pos)
+    });
+}
+
 static void dispatchButtonUp_Touch_(iFloat3 pos) {
     dispatchEvent_Widget(get_Window()->root, (SDL_Event *) &(SDL_MouseButtonEvent){
         .type = SDL_MOUSEBUTTONUP,
@@ -206,12 +218,10 @@ iBool processEvent_Touch(const SDL_Event *ev) {
         return iFalse;
     }
     iTouchState *d = touchState_();
-    const SDL_TouchFingerEvent *fing = &ev->tfinger;
     iWindow *window = get_Window();
     const iInt2 rootSize = rootSize_Window(window);
-    const iFloat3 pos = init_F3(fing->x * rootSize.x, fing->y * rootSize.y, 0);
-    //printf("%2d: %f: touch %f, %f\n", ev->type, z_F3(pos), x_F3(pos), y_F3(pos));
-    //fflush(stdout);
+    const SDL_TouchFingerEvent *fing = &ev->tfinger;
+    const iFloat3 pos = init_F3(fing->x * rootSize.x, fing->y * rootSize.y, 0); /* pixels */
     const uint32_t nowTime = SDL_GetTicks();
     if (ev->type == SDL_FINGERDOWN) {
         /* Register the new touch. */
@@ -225,6 +235,9 @@ iBool processEvent_Touch(const SDL_Event *ev) {
             edge = right_TouchEdge;
         }
         iWidget *aff = hitChild_Widget(window->root, init_I2(iRound(x), iRound(y_F3(pos))));
+        /* TODO: We must retain a reference to the affinity widget, or otherwise it might
+           be destroyed during the gesture. */
+//        printf("aff:%p (%s)\n", aff, aff ? class_Widget(aff)->name : "-");
         if (flags_Widget(aff) & touchDrag_WidgetFlag) {
             dispatchEvent_Widget(window->root, (SDL_Event *) &(SDL_MouseButtonEvent){
                 .type = SDL_MOUSEBUTTONDOWN,
@@ -248,46 +261,24 @@ iBool processEvent_Touch(const SDL_Event *ev) {
             .pos = pos
         });
         /* Some widgets rely on hover state. */
-        dispatchEvent_Widget(window->root, (SDL_Event *) &(SDL_MouseMotionEvent){
-            .type = SDL_MOUSEMOTION,
-            .timestamp = fing->timestamp,
-            .which = SDL_TOUCH_MOUSEID,
-            .x = x_F3(pos),
-            .y = y_F3(pos)
-        });
+        dispatchMotion_Touch_(pos, 0);
         addTicker_App(update_TouchState_, d);
     }
     else if (ev->type == SDL_FINGERMOTION) {
         iTouch *touch = find_TouchState_(d, fing->fingerId);
         if (touch && touch->affinity) {
             if (flags_Widget(touch->affinity) & touchDrag_WidgetFlag) {
-                dispatchEvent_Widget(window->root, (SDL_Event *) &(SDL_MouseMotionEvent){
-                    .type = SDL_MOUSEMOTION,
-                    .timestamp = fing->timestamp,
-                    .which = SDL_TOUCH_MOUSEID,
-                    .state = SDL_BUTTON_LMASK,
-                    .x = x_F3(pos),
-                    .y = y_F3(pos)
-                });
+                dispatchMotion_Touch_(pos, SDL_BUTTON_LMASK);
                 return iTrue;
             }
-            /*dispatchEvent_Widget(window->root, (SDL_Event *) &(SDL_MouseMotionEvent){
-                .type = SDL_MOUSEMOTION,
-                .timestamp = fing->timestamp,
-                .which = SDL_TOUCH_MOUSEID,
-                .x = x_F3(pos),
-                .y = y_F3(pos)
-            });*/
             /* Update touch position. */
             pushPos_Touch_(touch, pos, nowTime);
-            const iFloat3 amount = add_F3(touch->remainder,
-                                          divf_F3(mul_F3(init_F3(fing->dx, fing->dy, 0),
-                                                         init_F3(rootSize.x, rootSize.y, 0)),
-                                                  window->pixelRatio));
-            iInt2 pixels = init_I2(iRound(x_F3(amount)), iRound(y_F3(amount)));
+            const iFloat3 amount = mul_F3(init_F3(fing->dx, fing->dy, 0),
+                                          init_F3(rootSize.x, rootSize.y, 0));
+            addv_F3(&touch->accum, amount);
+            iInt2 pixels = initF3_I2(touch->accum);
             /* We're reporting scrolling as full points, so keep track of the precise distance. */
-            iFloat3 remainder = sub_F3(amount, initI2_F3(pixels));
-            touch->remainder = remainder;
+            subv_F3(&touch->accum, initI2_F3(pixels));
             if (!touch->hasMoved && !isStationary_Touch_(touch)) {
                 touch->hasMoved = iTrue;
             }
@@ -301,15 +292,17 @@ iBool processEvent_Touch(const SDL_Event *ev) {
             if (touch->edge) {
                 pixels.y = 0;
             }
+//            printf("%p (%s) py: %i wy: %f acc: %f\n",
+//                   touch->affinity,
+//                   class_Widget(touch->affinity)->name,
+//                   pixels.y, y_F3(amount), y_F3(touch->accum));
             if (pixels.x || pixels.y) {
-//                printf("%p (%s) wy: %f\n", touch->affinity, class_Widget(touch->affinity)->name,
-//                       fing->dy * rootSize.y / window->pixelRatio);
                 dispatchEvent_Widget(touch->affinity, (SDL_Event *) &(SDL_MouseWheelEvent){
                     .type = SDL_MOUSEWHEEL,
                     .timestamp = SDL_GetTicks(),
                     .which = 0, /* means "precise scrolling" in DocumentWidget */
                     .x = pixels.x,
-                    .y = pixels.y
+                    .y = pixels.y,
                 });
                 /* TODO: Keep increasing movement if the direction is the same. */
                 clearWidgetMomentum_TouchState_(d, touch->affinity);
@@ -340,7 +333,7 @@ iBool processEvent_Touch(const SDL_Event *ev) {
             else {
                 const uint32_t elapsed = fing->timestamp - touch->posTime[lastIndex_Touch_];
                 const float minVelocity = 400.0f;
-                if (elapsed < 40) {
+                if (elapsed < 75) {
                     velocity = divf_F3(sub_F3(pos, touch->pos[lastIndex_Touch_]),
                                        (float) elapsed / 1000.0f);
                     if (fabsf(x_F3(velocity)) < minVelocity) {
@@ -350,9 +343,11 @@ iBool processEvent_Touch(const SDL_Event *ev) {
                         setY_F3(&velocity, 0.0f);
                     }
                 }
+//                printf("elap:%ums vel:%f\n", elapsed, length_F3(velocity));
                 pushPos_Touch_(touch, pos, nowTime);
                 /* If short and didn't move far, do a tap (left click). */
                 if (duration < longPressSpanMs_ && isStationary_Touch_(touch)) {
+                    dispatchMotion_Touch_(pos, SDL_BUTTON_LMASK);
                     dispatchClick_Touch_(touch, SDL_BUTTON_LEFT);
                 }
                 else if (length_F3(velocity) > 0.0f) {
diff --git a/src/ui/util.c b/src/ui/util.c
index 850ca818..1ff1b7f7 100644
--- a/src/ui/util.c
+++ b/src/ui/util.c
@@ -37,6 +37,10 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */
 #include "text.h"
 #include "window.h"
 
+#if defined (iPlatformAppleMobile)
+#   include "../ios.h"
+#endif
+
 #include <the_Foundation/math.h>
 #include <the_Foundation/path.h>
 #include <SDL_timer.h>
@@ -472,13 +476,19 @@ void openMenu_Widget(iWidget *d, iInt2 coord) {
     }
 #endif
     const iRect bounds       = bounds_Widget(d);
-    const int   leftExcess   = -left_Rect(bounds);
-    const int   rightExcess  = right_Rect(bounds) - rootSize.x;
+    int         leftExcess   = -left_Rect(bounds);
+    int         rightExcess  = right_Rect(bounds) - rootSize.x;
     int         topExcess    = -top_Rect(bounds);
-    const int   bottomExcess = bottom_Rect(bounds) - rootSize.y;
+    int         bottomExcess = bottom_Rect(bounds) - rootSize.y;
 #if defined (iPlatformAppleMobile)
-    /* Reserve space for the system status bar. */
-    topExcess += 4.5 * gap_UI;
+    /* Reserve space for the system status bar. */ {
+        float l, t, r, b;
+        safeAreaInsets_iOS(&l, &t, &r, &b);
+        topExcess    += t;
+        bottomExcess += b;
+        leftExcess   += l;
+        rightExcess  += r;
+    }
 #endif
     if (bottomExcess > 0) {
         d->rect.pos.y -= bottomExcess;
diff --git a/src/ui/widget.c b/src/ui/widget.c
index 331192f9..128aa39c 100644
--- a/src/ui/widget.c
+++ b/src/ui/widget.c
@@ -126,11 +126,15 @@ const iString *id_Widget(const iWidget *d) {
 }
 
 int64_t flags_Widget(const iWidget *d) {
-    return d->flags;
+    return d ? d->flags : 0;
 }
 
 void setFlags_Widget(iWidget *d, int64_t flags, iBool set) {
     if (d) {
+        if (deviceType_App() == phone_AppDeviceType) {
+            /* Phones rarely have keyboards attached so don't bother with the shortcuts. */
+            flags &= ~drawKey_WidgetFlag;
+        }
         iChangeFlags(d->flags, flags, set);
         if (flags & keepOnTop_WidgetFlag) {
             if (set) {
@@ -731,7 +735,7 @@ size_t childIndex_Widget(const iWidget *d, const iAnyObject *child) {
 }
 
 iAny *hitChild_Widget(const iWidget *d, iInt2 coord) {
-    if (d->flags & unhittable_WidgetFlag) {
+    if (d->flags & (unhittable_WidgetFlag | hidden_WidgetFlag)) {
         return NULL;
     }
     /* Check for on-top widgets first. */
diff --git a/src/ui/window.c b/src/ui/window.c
index 38df8682..251eb5c4 100644
--- a/src/ui/window.c
+++ b/src/ui/window.c
@@ -398,9 +398,21 @@ static void checkLoadAnimation_Window_(iWindow *d) {
     setReloadLabel_Window_(d, isOngoing);
 }
 
+static void updatePadding_Window_(iWindow *d) {
+#if defined (iPlatformAppleMobile)
+    /* Respect the safe area insets. */ {
+        float left, top, right, bottom;
+        safeAreaInsets_iOS(&left, &top, &right, &bottom);
+        setPadding_Widget(findChild_Widget(d->root, "navdiv"), left, top, right, 0);
+        setPadding_Widget(findChild_Widget(d->root, "toolbar"), left, 0, right, bottom);
+    }
+#endif
+}
+
 static iBool handleNavBarCommands_(iWidget *navBar, const char *cmd) {
     if (equal_Command(cmd, "window.resized")) {
-        const iBool isNarrow = width_Rect(bounds_Widget(navBar)) / gap_UI < 140;
+        const iBool isPhone = deviceType_App() == phone_AppDeviceType;
+        const iBool isNarrow = !isPhone && width_Rect(bounds_Widget(navBar)) / gap_UI < 140;
         if (isNarrow ^ ((flags_Widget(navBar) & tight_WidgetFlag) != 0)) {
             setFlags_Widget(navBar, tight_WidgetFlag, isNarrow);
             iForEach(ObjectList, i, navBar->children) {
@@ -413,6 +425,14 @@ static iBool handleNavBarCommands_(iWidget *navBar, const char *cmd) {
                 }
             }
         }
+        if (isPhone) {
+            setFlags_Widget(findWidget_App("toolbar"), hidden_WidgetFlag, isLandscape_App());
+            setFlags_Widget(findWidget_App("navbar.back"), hidden_WidgetFlag, isPortrait_App());
+            setFlags_Widget(findWidget_App("navbar.forward"), hidden_WidgetFlag, isPortrait_App());
+            setFlags_Widget(findWidget_App("navbar.ident"), hidden_WidgetFlag, isPortrait_App());
+            setFlags_Widget(findWidget_App("navbar.home"), hidden_WidgetFlag, isPortrait_App());
+            setFlags_Widget(findWidget_App("navbar.menu"), hidden_WidgetFlag, isPortrait_App());
+        }
         arrange_Widget(navBar);
         refresh_Widget(navBar);
         postCommand_Widget(navBar, "layout.changed id:navbar");
@@ -592,11 +612,6 @@ static void setupUserInterface_Window(iWindow *d) {
     setId_Widget(div, "navdiv");
     addChild_Widget(d->root, iClob(div));
     
-#if defined (iPlatformAppleMobile)
-    /* System status bar needs space. */
-    setPadding_Widget(div, 0, 4 * gap_UI, 0, 0);
-#endif
-
 #if defined (LAGRANGE_CUSTOM_FRAME)
     /* Window title bar. */ 
     if (prefs_App()->customFrame) {
@@ -662,13 +677,12 @@ static void setupUserInterface_Window(iWindow *d) {
         addChild_Widget(div, iClob(navBar));
         setBackgroundColor_Widget(navBar, uiBackground_ColorId);
         setCommandHandler_Widget(navBar, handleNavBarCommands_);
-        addChild_Widget(navBar, iClob(newIcon_LabelWidget("\U0001f870", 0, 0, "navigate.back")));
-        addChild_Widget(navBar, iClob(newIcon_LabelWidget("\U0001f872", 0, 0, "navigate.forward")));
+        setId_Widget(addChildFlags_Widget(navBar, iClob(newIcon_LabelWidget("\U0001f870", 0, 0, "navigate.back")), collapse_WidgetFlag), "navbar.back");
+        setId_Widget(addChildFlags_Widget(navBar, iClob(newIcon_LabelWidget("\U0001f872", 0, 0, "navigate.forward")), collapse_WidgetFlag), "navbar.forward");
         iLabelWidget *idMenu = makeMenuButton_LabelWidget(
             "\U0001f464", identityButtonMenuItems_, iElemCount(identityButtonMenuItems_));
         setAlignVisually_LabelWidget(idMenu, iTrue);
-        addChild_Widget(navBar, iClob(idMenu));
-        setId_Widget(as_Widget(idMenu), "navbar.ident");
+        setId_Widget(addChildFlags_Widget(navBar, iClob(idMenu), collapse_WidgetFlag), "navbar.ident");
         iLabelWidget *lock =
             addChildFlags_Widget(navBar,
                                  iClob(newIcon_LabelWidget("\U0001f513", SDLK_i, KMOD_PRIMARY, "document.info")),
@@ -711,14 +725,16 @@ static void setupUserInterface_Window(iWindow *d) {
         setId_Widget(addChild_Widget(
                          navBar, iClob(newIcon_LabelWidget(reloadCStr_, 0, 0, "navigate.reload"))),
                      "reload");
-        addChild_Widget(navBar,
+        setId_Widget(addChildFlags_Widget(navBar,
                         iClob(newIcon_LabelWidget(
-                            "\U0001f3e0", SDLK_h, KMOD_PRIMARY | KMOD_SHIFT, "navigate.home")));
+                            "\U0001f3e0", SDLK_h, KMOD_PRIMARY | KMOD_SHIFT, "navigate.home")),
+                        collapse_WidgetFlag),
+                     "navbar.home");
 #if !defined (iHaveNativeMenus)
         iLabelWidget *navMenu =
             makeMenuButton_LabelWidget("\U0001d362", navMenuItems_, iElemCount(navMenuItems_));
         setAlignVisually_LabelWidget(navMenu, iTrue);
-        addChild_Widget(navBar, iClob(navMenu));
+        setId_Widget(addChildFlags_Widget(navBar, iClob(navMenu), collapse_WidgetFlag), "navbar.menu");
 #else
         insertMenuItems_MacOS("File", 1, fileMenuItems_, iElemCount(fileMenuItems_));
         insertMenuItems_MacOS("Edit", 2, editMenuItems_, iElemCount(editMenuItems_));
@@ -773,6 +789,24 @@ static void setupUserInterface_Window(iWindow *d) {
         addChild_Widget(searchBar, iClob(newIcon_LabelWidget("  \u2b9d  ", 'g', KMOD_PRIMARY | KMOD_SHIFT, "find.prev")));
         addChild_Widget(searchBar, iClob(newIcon_LabelWidget("\u2a2f", SDLK_ESCAPE, 0, "find.close")));
     }
+#if defined (iPlatformAppleMobile)
+    /* Bottom toolbar. */
+    if (isPhone_iOS()) {
+        iWidget *toolBar = new_Widget();
+        addChild_Widget(div, iClob(toolBar));
+        setId_Widget(toolBar, "toolbar");
+        setFlags_Widget(toolBar, collapse_WidgetFlag | resizeWidthOfChildren_WidgetFlag |
+                        arrangeHeight_WidgetFlag | arrangeHorizontal_WidgetFlag, iTrue);
+        setBackgroundColor_Widget(toolBar, uiBackground_ColorId);
+        addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f870", "navigate.back")), frameless_WidgetFlag);
+        addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f872", "navigate.forward")), frameless_WidgetFlag);
+        addChildFlags_Widget(toolBar, iClob(newLargeIcon_LabelWidget("\U0001f464", "sidebar.mode arg:3 show:1")), frameless_WidgetFlag);
+        iLabelWidget *menuButton = makeMenuButton_LabelWidget("\U0001d362", navMenuItems_, iElemCount(navMenuItems_));
+        setFont_LabelWidget(menuButton, uiLabelLarge_FontId);
+        addChildFlags_Widget(toolBar, iClob(menuButton), frameless_WidgetFlag);
+    }
+#endif
+    updatePadding_Window_(d);
     iWidget *tabsMenu = makeMenu_Widget(d->root,
                                         (iMenuItem[]){
                                             { "Close Tab", 0, 0, "tabs.close" },
@@ -1195,6 +1229,7 @@ static iBool handleWindowEvent_Window_(iWindow *d, const SDL_WindowEvent *ev) {
             return iTrue;
         }
         case SDL_WINDOWEVENT_RESIZED:
+            updatePadding_Window_(d);
             if (d->isMinimized) { 
                 updateRootSize_Window_(d, iTrue);
                 return iTrue;
@@ -1353,7 +1388,7 @@ void draw_Window(iWindow *d) {
     /* Clear the window. The clear color is visible as a border around the window
        when the custom frame is being used. */ {
 #if defined (iPlatformAppleMobile)
-        const iColor back = get_Color(uiBackground_ColorId);
+        const iColor back = get_Color(tmBackground_ColorId);
 #else
         const iColor back = get_Color(gotFocus && d->place.snap != maximized_WindowSnap &&
                                               ~winFlags & SDL_WINDOW_FULLSCREEN_DESKTOP