What for all them hot texts
My main complaint with KaiOS has been that for how much they claim it's optimized for small screens, the font sizes are huge and there is so much whitespace around everything, they don't actually manage to fit that much information on the screen. This is especially apparent in the Messages app, where anything more than a couple of simple sentences will end up being a message larger than can actually fit on the screen at once. I don't know if this is limited to the devices sold in the US or not - ours tend to be marketed specifically to old people who don't want a smartphone, and can't see that well anyway.
There is a global font size setting in KaiOS, but it only toggles between big and enormous. Unfortunately, I haven't found a nice easy way to globally reduce the size of text, and it seems that the CSS isn't designed well enough to really handle arbitrary changes in text sizes anyway - stuff moves around and needs adjusting. So as far as I know, it really needs to be done on a per-app basis. This means you don't have to modify the system app anyway, so it's not really dangerous.
One caveat, I don't know that much CSS, so I really just play around with it until it does what I want. There are probably more elegant and robust ways to do what I do here, but this is how I did it anyway. It’s not perfect but I think it’s pretty functional.
We do need ADB root access, so install the adbroot app or your rooting method of choice. Then get the SMS app and webapps.json from the phone with ADB root like so:
adb pull /system/b2g/webapps/sms.gaiamobile.org
adb pull /data/local/webapps/webapps.json
Create a working directory and extract the application source there:
mkdir sms-source
unzip sms.gaiamobile.org/application.zip -d sms-source
Now we can do the modifications!
We need to modify these files:
It looks like a lot, but it's really not that bad. Here is the Git Diff (and a second commit for a couple oopsies) for the commit if you know what you're doing. (I am not responsible for any Dunning-Kruger related outcomes)
This is simple, find the code block below and change height: from 100% to 99%.
[role="dialog"][data-type="action"].softkey {
background: rgba(0, 0, 0, 0.8);
height: 99%; /* modified by dana */
}
Add the following four blocks of code to the beginning of the file:
/* added by dana */
.bubble .message-content-body {
padding-left: 0.7rem !important;
padding-bottom: 0.7rem !important;
line-height: 1.8rem !important;
padding-right: 0.7rem !important;
padding-top: 0.7rem !important;
}
/* added by dana */
.message .bubble {
padding: 0rem 0.1rem 0px;
}
.message-details {
display: none;
}
.message-type-line {
display: none !important;
}
Find the following block and make changes to make it match:
#messages-compose-form {
display: flex;
flex-direction: column;
height: auto; /* overrides building blocks */
min-height: 3rem; /* modified by dana */
padding: 4px 0 0.5rem 0 !important; /* modified by dana */
}
Find the following blocks of code and make them match:
.message-content-body-container {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 100%;
/* these two added by dana */
padding-top: 0.15rem;
padding-bottom: 0.15rem;
}
[data-type="list"] li p.summary {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: medium none;
display: block;
margin: 0;
padding: 0;
color: var(--color-gs70);
font-size: var(--font-p-pri);
line-height: 2.1rem;
height: 2.1rem;
width: 94%;
}
Finally, the main event:
html, body {
width: 100%;
padding: 0;
margin: 0;
font-size: 7.5px; /* modified by dana */
overflow-x: hidden !important;
overflow-y: hidden !important;
}
Find the following blocks and make them match:
[data-type="list"] .threadlist-item,
[data-type="list"] .threadlist-item a,
[data-type="list"] .threadlist-item aside {
height: 6.5rem; /* changed by dana */
}
.message-listContent {
margin: 0 1rem 0 2rem;
position: relative;
padding-top: 0.3rem;
}
Add the following blocks to the beginning of the file:
/* added by dana */
form[role="dialog"][data-type="confirm"] h1 {
height: var(--header-height, 2.8rem);
line-height: 2.1em !important;
}
/* added by dana: */
[data-type="list"] li p.threadlist-item-title {
line-height: 1.5rem !important;
}
Phew! Now that that's out of the way, we're on the home stretch!
There are two options here. You could use WebIDE to side-load the app back onto the phone and it would work just fine. You will have two "Messages" apps available, the original and the modified version. But suppose you want to only have your new modified app, and suppose you want to retain the use of your dedicated SMS button on the keypad? We will need to push the app to the phone and tell KaiOS where it lives.
To put the app back on the phone, we will zip up the source files and put the app on the phone in a new location:
cd sms-source
rm ../sms.gaiamobile.org/application.zip
zip -r ../sms.gaiamobile.org/application.zip ./*
cd ..
adb push sms.gaiamobile.org /data/local/webapps
And now we will change the path to the app in the webapps.json file we pulled earlier. Find the sms.gaiamobile.org section in the file:
"sms.gaiamobile.org": {
"origin": "app://sms.gaiamobile.org",
"installOrigin": "app://sms.gaiamobile.org",
"receipt": null,
"installTime": 1547465160507,
"updateTime": 1547465160507,
"manifestURL": "app://sms.gaiamobile.org/manifest.webapp",
"localId": 1026,
"appStatus": 3,
"manifestHash": "1e7e9b359b4871956d9d8095bf94885c",
"basePath": "/system/b2g/webapps",
"id": "sms.gaiamobile.org",
"removable": false,
"kind": "packaged",
"enabled": true,
"name": "Messages",
"csp": "",
"role": "",
"widgetPages": [],
"redirects": null,
"additionalLanguages": {},
"installerAppId": 0,
"installerIsBrowser": false,
"installState": "installed",
"storeId": "",
"storeVersion": 0,
"downloading": false,
"readyToApplyDownload": false
},
Yours will probably be slightly different, but all we need to do is change the basePath line from “/system/b2g/webapps" to “/data/local/webapps”.
Finally, push the webapps.json file back to the phone and reboot:
adb push webapps.json /data/local/webapps/
adb reboot
It should be pretty obvious if it worked, I would think! You should be able to see MUCH more text onscreen!