From 9eb073a524143b2afb446835c7d95eb748017f09 Mon Sep 17 00:00:00 2001
From: Frans de Jonge <fransdejonge@gmail.com>
Date: Mon, 11 Sep 2017 10:32:39 +0200
Subject: [PATCH] [travis] Add protection against unscaled sizes

As pointed out by @poire-z

* [fix, UX] SkimToWidget scaling

* [fix] Button scaling

* [fix, UX] Scale ProgressWidget

* [fix, UX] Scale confirmbox

* [fix, UX] Scale just about everything
---
 .ci/script.sh                                 | 22 ++++++++--
 frontend/apps/filemanager/filemanager.lua     |  3 --
 .../apps/reader/modules/readercropping.lua    | 24 +++++------
 frontend/apps/reader/readerui.lua             |  3 --
 frontend/apps/reader/skimtowidget.lua         | 43 ++++++++++---------
 frontend/ui/data/creoptions.lua               |  2 +-
 frontend/ui/data/koptoptions.lua              |  3 +-
 frontend/ui/geometry.lua                      |  4 +-
 frontend/ui/widget/bboxwidget.lua             |  3 +-
 frontend/ui/widget/bookstatuswidget.lua       | 10 ++---
 frontend/ui/widget/button.lua                 | 22 ++++++++--
 frontend/ui/widget/buttondialog.lua           | 16 +++----
 frontend/ui/widget/buttondialogtitle.lua      | 14 +++---
 frontend/ui/widget/configdialog.lua           |  2 +-
 frontend/ui/widget/confirmbox.lua             |  9 ++--
 .../ui/widget/container/alphacontainer.lua    |  4 +-
 .../ui/widget/container/framecontainer.lua    |  4 +-
 .../widget/container/underlinecontainer.lua   |  5 ++-
 frontend/ui/widget/dictquicklookup.lua        |  4 +-
 frontend/ui/widget/frontlightwidget.lua       | 30 ++++++-------
 frontend/ui/widget/imageviewer.lua            |  1 -
 frontend/ui/widget/infomessage.lua            |  8 ++--
 frontend/ui/widget/inputdialog.lua            |  3 +-
 frontend/ui/widget/keyvaluepage.lua           |  2 +-
 frontend/ui/widget/linkbox.lua                |  3 +-
 frontend/ui/widget/listview.lua               |  4 +-
 frontend/ui/widget/logindialog.lua            | 13 +++---
 frontend/ui/widget/menu.lua                   | 10 ++---
 frontend/ui/widget/multiconfirmbox.lua        |  8 ++--
 frontend/ui/widget/multiinputdialog.lua       |  4 +-
 frontend/ui/widget/networksetting.lua         | 36 ++++++++--------
 frontend/ui/widget/notification.lua           |  4 +-
 frontend/ui/widget/physicalkeyboard.lua       | 10 ++---
 frontend/ui/widget/progresswidget.lua         | 19 ++++----
 frontend/ui/widget/scrolltextwidget.lua       | 25 +++++------
 frontend/ui/widget/textboxwidget.lua          |  4 +-
 frontend/ui/widget/textviewer.lua             |  3 +-
 frontend/ui/widget/timewidget.lua             |  3 +-
 frontend/ui/widget/toggleswitch.lua           | 37 +++++++++-------
 frontend/ui/widget/touchmenu.lua              |  2 +-
 frontend/ui/widget/verticalscrollbar.lua      |  7 +--
 frontend/ui/widget/virtualkeyboard.lua        |  4 +-
 plugins/coverbrowser.koplugin/listmenu.lua    | 10 ++---
 plugins/coverbrowser.koplugin/mosaicmenu.lua  |  7 +--
 .../goodreads.koplugin/doublekeyvaluepage.lua | 16 +++----
 plugins/goodreads.koplugin/goodreadsbook.lua  | 10 ++---
 .../statistics.koplugin/readerprogress.lua    |  6 +--
 spec/unit/widget_progresswidget_spec.lua      |  4 +-
 tools/wbuilder.lua                            | 12 +++---
 49 files changed, 264 insertions(+), 238 deletions(-)

diff --git a/.ci/script.sh b/.ci/script.sh
index 5a539b0ca..c8f937c82 100755
--- a/.ci/script.sh
+++ b/.ci/script.sh
@@ -4,15 +4,29 @@ CI_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 # shellcheck source=/dev/null
 source "${CI_DIR}/common.sh"
 
-echo -e "\n${ANSI_GREEN}make fetchthirdparty"
+echo -e "\\n${ANSI_GREEN}make fetchthirdparty"
 travis_retry make fetchthirdparty
 
 "${CI_DIR}/helper_shellchecks.sh"
 
-echo -e "\n${ANSI_GREEN}Luacheck results"
+echo -e "\\n${ANSI_GREEN}Checking for unscaled sizes"
+# stick `|| true` at the end to prevent Travis exit on failed command
+unscaled_size_check=$(grep -nr --include=*.lua --exclude=koptoptions.lua --exclude-dir=base --exclude-dir=install --exclude-dir=keyboardlayouts --exclude-dir=*arm* "\\(padding\\|margin\\|bordersize\\|width\\|height\\|radius\\|linesize\\) = [0-9]\\{1,2\\}" | grep -v '= 0' | grep -v '= [0-9]/[0-9]' | grep -Ev '(default_option_height|default_option_padding)' | grep -v scaleBySize || true)
+# Also check Geom objects; for legibility two regular expressions rather than
+# one enormous indecipharable blob.
+unscaled_size_check_geom=$(grep -E -nr --include=*.lua --exclude=gesturerange_spec.lua --exclude-dir=base --exclude-dir=*arm* 'Geom:new{.+ [wh] = [0-9]{1,4}' | grep -Ev '[wh] = 0' | grep -v '= [0-9]/[0-9]' | grep -v scaleBySize || true)
+
+if [ "${unscaled_size_check}" ] || [ "${unscaled_size_check_geom}" ]; then
+    echo -e "\\n${ANSI_RED}Warning: it looks like you might be using unscaled sizes.\\nIt is almost always preferable to defer to one of the predefined sizes in ui.elements.commonui in the following files:"
+    echo "${unscaled_size_check}"
+    echo "${unscaled_size_check_geom}"
+    exit 1
+fi
+
+echo -e "\\n${ANSI_GREEN}Luacheck results"
 luajit "$(which luacheck)" --no-color -q {reader,setupkoenv,datastorage}.lua frontend plugins spec
 
-echo -e "\n${ANSI_GREEN}make all"
+echo -e "\\n${ANSI_GREEN}make all"
 make all
-echo -e "\n${ANSI_GREEN}make testfront"
+echo -e "\\n${ANSI_GREEN}make testfront"
 make testfront
diff --git a/frontend/apps/filemanager/filemanager.lua b/frontend/apps/filemanager/filemanager.lua
index 7ce931a70..e93ecee44 100644
--- a/frontend/apps/filemanager/filemanager.lua
+++ b/frontend/apps/filemanager/filemanager.lua
@@ -12,7 +12,6 @@ local FileManagerHistory = require("apps/filemanager/filemanagerhistory")
 local FileManagerMenu = require("apps/filemanager/filemanagermenu")
 local Font = require("ui/font")
 local FrameContainer = require("ui/widget/container/framecontainer")
-local Geom = require("ui/geometry")
 local InfoMessage = require("ui/widget/infomessage")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local InputDialog = require("ui/widget/inputdialog")
@@ -42,8 +41,6 @@ end
 local FileManager = InputContainer:extend{
     title = _("KOReader File Browser"),
     root_path = lfs.currentdir(),
-    -- our own size
-    dimen = Geom:new{ w = 400, h = 600 },
     onExit = function() end,
 
     mv_bin = Device:isAndroid() and "/system/bin/mv" or "/bin/mv",
diff --git a/frontend/apps/reader/modules/readercropping.lua b/frontend/apps/reader/modules/readercropping.lua
index 23015f32e..64aa3e334 100644
--- a/frontend/apps/reader/modules/readercropping.lua
+++ b/frontend/apps/reader/modules/readercropping.lua
@@ -1,18 +1,18 @@
-local InputContainer = require("ui/widget/container/inputcontainer")
-local UIManager = require("ui/uimanager")
-local Geom = require("ui/geometry")
+local BBoxWidget = require("ui/widget/bboxwidget")
+local Blitbuffer = require("ffi/blitbuffer")
+local Button = require("ui/widget/button")
 local Event = require("ui/event")
-local Screen = require("device").screen
-local LeftContainer = require("ui/widget/container/leftcontainer")
-local RightContainer = require("ui/widget/container/rightcontainer")
 local FrameContainer = require("ui/widget/container/framecontainer")
-local VerticalGroup = require("ui/widget/verticalgroup")
+local Geom = require("ui/geometry")
+local InputContainer = require("ui/widget/container/inputcontainer")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
-local BBoxWidget = require("ui/widget/bboxwidget")
 local HorizontalSpan = require("ui/widget/horizontalspan")
-local Button = require("ui/widget/button")
+local LeftContainer = require("ui/widget/container/leftcontainer")
 local Math = require("optmath")
-local Blitbuffer = require("ffi/blitbuffer")
+local RightContainer = require("ui/widget/container/rightcontainer")
+local UIManager = require("ui/uimanager")
+local VerticalGroup = require("ui/widget/verticalgroup")
+local Screen = require("device").screen
 
 local PageCropDialog = VerticalGroup:new{
     ok_text = "OK",
@@ -28,8 +28,6 @@ function PageCropDialog:init()
         text = self.ok_text,
         callback = self.ok_callback,
         width = self.button_width,
-        bordersize = 2,
-        radius = 7,
         text_font_face = "cfont",
         text_font_size = 20,
         show_parent = self,
@@ -38,8 +36,6 @@ function PageCropDialog:init()
         text = self.cancel_text,
         callback = self.cancel_callback,
         width = self.button_width,
-        bordersize = 2,
-        radius = 7,
         text_font_face = "cfont",
         text_font_size = 20,
         show_parent = self,
diff --git a/frontend/apps/reader/readerui.lua b/frontend/apps/reader/readerui.lua
index cf4ec6841..767ab87c4 100644
--- a/frontend/apps/reader/readerui.lua
+++ b/frontend/apps/reader/readerui.lua
@@ -12,7 +12,6 @@ local DocumentRegistry = require("document/documentregistry")
 local Event = require("ui/event")
 local FileManagerBookInfo = require("apps/filemanager/filemanagerbookinfo")
 local FileManagerHistory = require("apps/filemanager/filemanagerhistory")
-local Geom = require("ui/geometry")
 local InfoMessage = require("ui/widget/infomessage")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local InputDialog = require("ui/widget/inputdialog")
@@ -60,8 +59,6 @@ local ReaderUI = InputContainer:new{
     },
     active_widgets = {},
 
-    -- our own size
-    dimen = Geom:new{ w = 400, h = 600 },
     -- if we have a parent container, it must be referenced for now
     dialog = nil,
 
diff --git a/frontend/apps/reader/skimtowidget.lua b/frontend/apps/reader/skimtowidget.lua
index 6b13b72a3..47f636f44 100644
--- a/frontend/apps/reader/skimtowidget.lua
+++ b/frontend/apps/reader/skimtowidget.lua
@@ -33,6 +33,9 @@ function SkimToWidget:init()
     self.screen_height = Screen:getSize().h
     self.span = math.ceil(self.screen_height * 0.01)
     self.width = self.screen_width * 0.95
+    self.button_bordersize = Screen:scaleBySize(2)
+    self.button_margin = self.button_bordersize
+    self.button_width = self.screen_width * 0.16 - (2*self.button_margin)
     if Device:hasKeys() then
         self.key_events = {
             Close = { {"Back"}, doc = "close skimto page" }
@@ -110,11 +113,11 @@ function SkimToWidget:init()
     }
     self.button_minus = Button:new{
         text = "-1",
-        bordersize = 2,
-        margin = 2,
+        bordersize = self.button_bordersize,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.16,
+        width = self.button_width,
         show_parent = self,
         callback = function()
             self.curr_page = self.curr_page - 1
@@ -124,11 +127,11 @@ function SkimToWidget:init()
     }
     self.button_minus_ten = Button:new{
         text = "-10",
-        bordersize = 2,
-        margin = 2,
+        bordersize = self.button_bordersize,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.16,
+        width = self.button_width,
         show_parent = self,
         callback = function()
             self.curr_page = self.curr_page - 10
@@ -138,11 +141,11 @@ function SkimToWidget:init()
     }
     self.button_plus = Button:new{
         text = "+1",
-        bordersize = 2,
-        margin = 2,
+        bordersize = self.button_bordersize,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.16,
+        width = self.button_width,
         show_parent = self,
         callback = function()
             self.curr_page = self.curr_page + 1
@@ -152,11 +155,11 @@ function SkimToWidget:init()
     }
     self.button_plus_ten = Button:new{
         text = "+10",
-        bordersize = 2,
-        margin = 2,
+        bordersize = self.button_bordersize,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.16,
+        width = self.button_width,
         show_parent = self,
         callback = function()
             self.curr_page = self.curr_page + 10
@@ -167,10 +170,10 @@ function SkimToWidget:init()
     local current_page_text = Button:new{
         text = self.curr_page,
         bordersize = 0,
-        margin = 2,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.2,
+        width = self.screen_width * 0.2 - (2*self.button_margin),
         show_parent = self,
         callback = function()
             self.callback_switch_to_goto()
@@ -193,8 +196,8 @@ function SkimToWidget:init()
     table.insert(vertical_group_control,padding_span)
 
     self.skimto_frame = FrameContainer:new{
-        radius = 5,
-        bordersize = 3,
+        radius = Screen:scaleBySize(5),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
@@ -256,10 +259,10 @@ function SkimToWidget:update()
     local current_page_text = Button:new{
         text = self.curr_page,
         bordersize = 0,
-        margin = 2,
+        margin = self.button_margin,
         radius = 0,
         enabled = true,
-        width = self.screen_width * 0.2,
+        width = self.screen_width * 0.2 - (2*self.button_margin),
         show_parent = self,
         callback = function()
             self.callback_switch_to_goto()
@@ -282,8 +285,8 @@ function SkimToWidget:update()
     table.insert(vertical_group_control,padding_span)
 
     self.skimto_frame = FrameContainer:new{
-        radius = 5,
-        bordersize = 3,
+        radius = Screen:scaleBySize(5),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/data/creoptions.lua b/frontend/ui/data/creoptions.lua
index 405da727a..8ca1f1f84 100644
--- a/frontend/ui/data/creoptions.lua
+++ b/frontend/ui/data/creoptions.lua
@@ -1,5 +1,5 @@
-local Screen = require("device").screen
 local S = require("ui/data/strings")
+local Screen = require("device").screen
 
 local _ = require("gettext")
 
diff --git a/frontend/ui/data/koptoptions.lua b/frontend/ui/data/koptoptions.lua
index 4a6df57d3..7a5eb762f 100644
--- a/frontend/ui/data/koptoptions.lua
+++ b/frontend/ui/data/koptoptions.lua
@@ -1,6 +1,6 @@
-local Screen = require("device").screen
 local S = require("ui/data/strings")
 local _ = require("gettext")
+local Screen = require("device").screen
 
 local function enable_if_equals(configurable, option, value)
     return configurable[option] == value
@@ -29,7 +29,6 @@ local KoptOptions = {
             {
                 name = "trim_page",
                 name_text = S.PAGE_CROP,
-                width = 261,
                 toggle = {S.MANUAL, S.AUTO, S.SEMIAUTO},
                 alternate = false,
                 values = {0, 1, 2},
diff --git a/frontend/ui/geometry.lua b/frontend/ui/geometry.lua
index 3f61f7124..4e4079393 100644
--- a/frontend/ui/geometry.lua
+++ b/frontend/ui/geometry.lua
@@ -4,7 +4,7 @@
 All of these apply to full rectangles:
 
     local Geom = require("ui/geometry")
-    Geom:new{ x = 1, y = 0, w = 100, h = 200, }
+    Geom:new{ x = 1, y = 0, w = Screen:scaleBySize(100), h = Screen:scaleBySize(200), }
 
 Some behaviour is defined for points:
 
@@ -12,7 +12,7 @@ Some behaviour is defined for points:
 
 Some behaviour is defined for dimensions:
 
-    Geom:new{ w = 600, h = 800, }
+    Geom:new{ w = Screen:scaleBySize(600), h = Screen:scaleBySize(800), }
 
 Just use it on simple tables that have x, y and/or w, h
 or define your own types using this as a metatable
diff --git a/frontend/ui/widget/bboxwidget.lua b/frontend/ui/widget/bboxwidget.lua
index 9ae1bac9b..69f318e91 100644
--- a/frontend/ui/widget/bboxwidget.lua
+++ b/frontend/ui/widget/bboxwidget.lua
@@ -9,11 +9,12 @@ local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local Math = require("optmath")
 local UIManager = require("ui/uimanager")
+local Screen = Device.screen
 
 local BBoxWidget = InputContainer:new{
     page_bbox = nil,
     screen_bbox = nil,
-    linesize = 2,
+    linesize = Screen:scaleBySize(2),
     fine_factor = 10,
     dimen = Geom:new(),
 }
diff --git a/frontend/ui/widget/bookstatuswidget.lua b/frontend/ui/widget/bookstatuswidget.lua
index ddc16dfd9..d98e85da4 100644
--- a/frontend/ui/widget/bookstatuswidget.lua
+++ b/frontend/ui/widget/bookstatuswidget.lua
@@ -22,10 +22,10 @@ local ToggleSwitch = require("ui/widget/toggleswitch")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
-local Screen = require("device").screen
-local template = require("ffi/util").template
 local util = require("util")
 local _ = require("gettext")
+local Screen = require("device").screen
+local template = require("ffi/util").template
 
 local stats_book = {}
 
@@ -246,7 +246,7 @@ function BookStatusWidget:genBookInfoGroup()
     local text_author = TextWidget:new{
         text = self.props.authors,
         face = self.small_font_face,
-        padding = 2,
+        padding = Screen:scaleBySize(2),
     }
     table.insert(book_meta_info_group,
         CenterContainer:new{
@@ -391,14 +391,14 @@ function BookStatusWidget:genSummaryGroup(width)
         height = Screen:scaleBySize(130)
     end
 
-    local text_padding = 5
+    local text_padding = Screen:scaleBySize(5)
     self.input_note = InputText:new{
         text = self.summary.note,
         face = self.medium_font_face,
         width = width - self.padding * 3,
         height = height * 0.75,
         scroll = true,
-        bordersize = 2,
+        bordersize = Screen:scaleBySize(2),
         focused = false,
         padding = text_padding,
         parent = self,
diff --git a/frontend/ui/widget/button.lua b/frontend/ui/widget/button.lua
index 3a1b6b2d3..26b70ed6d 100644
--- a/frontend/ui/widget/button.lua
+++ b/frontend/ui/widget/button.lua
@@ -1,5 +1,18 @@
 --[[--
-A button widget that shows text or a icon and handles callback when tapped.
+A button widget that shows text or an icon and handles callback when tapped.
+
+@usage
+    local Button = require("ui/widget/button")
+    local button = Button:new{
+        text = _("Press me!"),
+        enabled = false, -- defaults to true
+        callback = some_callback_function,
+        width = Screen:scaleBySize(50),
+        max_width = Screen:scaleBySize(100),
+        bordersize = Screen:scaleBySize(3),
+        margin = 0,
+        padding = Screen:scaleBySize(2),
+    }
 --]]
 
 local Blitbuffer = require("ffi/blitbuffer")
@@ -14,6 +27,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local _ = require("gettext")
+local Screen = Device.screen
 
 local Button = InputContainer:new{
     text = nil, -- mandatory
@@ -22,10 +36,10 @@ local Button = InputContainer:new{
     callback = nil,
     enabled = true,
     margin = 0,
-    bordersize = 3,
+    bordersize = Screen:scaleBySize(3),
     background = Blitbuffer.COLOR_WHITE,
-    radius = 15,
-    padding = 2,
+    radius = Screen:scaleBySize(15),
+    padding = Screen:scaleBySize(2),
     width = nil,
     max_width = nil,
     text_font_face = "cfont",
diff --git a/frontend/ui/widget/buttondialog.lua b/frontend/ui/widget/buttondialog.lua
index 0118c3223..d3f1ebc57 100644
--- a/frontend/ui/widget/buttondialog.lua
+++ b/frontend/ui/widget/buttondialog.lua
@@ -1,14 +1,14 @@
+local Blitbuffer = require("ffi/blitbuffer")
 local ButtonTable = require("ui/widget/buttontable")
-local InputContainer = require("ui/widget/container/inputcontainer")
-local FrameContainer = require("ui/widget/container/framecontainer")
 local CenterContainer = require("ui/widget/container/centercontainer")
 local Device = require("device")
-local GestureRange = require("ui/gesturerange")
+local FrameContainer = require("ui/widget/container/framecontainer")
 local Geom = require("ui/geometry")
-local Screen = require("device").screen
+local GestureRange = require("ui/gesturerange")
+local InputContainer = require("ui/widget/container/inputcontainer")
 local UIManager = require("ui/uimanager")
 local _ = require("gettext")
-local Blitbuffer = require("ffi/blitbuffer")
+local Screen = require("device").screen
 
 local ButtonDialog = InputContainer:new{
     buttons = nil,
@@ -42,9 +42,9 @@ function ButtonDialog:init()
                 show_parent = self,
             },
             background = Blitbuffer.COLOR_WHITE,
-            bordersize = 2,
-            radius = 7,
-            padding = 2,
+            bordersize = Screen:scaleBySize(2),
+            radius = Screen:scaleBySize(7),
+            padding = Screen:scaleBySize(2),
         }
     }
 end
diff --git a/frontend/ui/widget/buttondialogtitle.lua b/frontend/ui/widget/buttondialogtitle.lua
index 9bf6d06f0..72c3795e4 100644
--- a/frontend/ui/widget/buttondialogtitle.lua
+++ b/frontend/ui/widget/buttondialogtitle.lua
@@ -47,7 +47,7 @@ function ButtonDialogTitle:init()
         FrameContainer:new{
             VerticalGroup:new{
                 align = "center",
-                VerticalSpan:new{ width = 2 },
+                VerticalSpan:new{ width = Screen:scaleBySize(2) },
                 TextBoxWidget:new{
                     text = self.title,
                     width = Screen:getWidth() * 0.8 ,
@@ -55,14 +55,14 @@ function ButtonDialogTitle:init()
                     bold = true,
                     alignment = self.title_align or "left",
                 },
-                VerticalSpan:new{ width = 2 },
+                VerticalSpan:new{ width = Screen:scaleBySize(2) },
                 LineWidget:new{
                     dimen = Geom:new{
                         w = Screen:getWidth() * 0.9,
-                        h = 1,
+                        h = Screen:scaleBySize(1),
                     }
                 },
-                VerticalSpan:new{ width = 2 },
+                VerticalSpan:new{ width = Screen:scaleBySize(2) },
                 ButtonTable:new{
                     width = Screen:getWidth() * 0.9,
                     buttons = self.buttons,
@@ -70,9 +70,9 @@ function ButtonDialogTitle:init()
                 },
             },
             background = Blitbuffer.COLOR_WHITE,
-            bordersize = 2,
-            radius = 7,
-            padding = 2,
+            bordersize = Screen:scaleBySize(2),
+            radius = Screen:scaleBySize(7),
+            padding = Screen:scaleBySize(2),
         }
     }
 end
diff --git a/frontend/ui/widget/configdialog.lua b/frontend/ui/widget/configdialog.lua
index 6bc75763c..255e6ef66 100644
--- a/frontend/ui/widget/configdialog.lua
+++ b/frontend/ui/widget/configdialog.lua
@@ -283,7 +283,7 @@ function ConfigOption:init()
                                 face = Font:getFace(item_font_face, item_font_size[d]),
                                 fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
                             },
-                            padding = 3,
+                            padding = Screen:scaleBySize(3),
                             color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                             enabled = enabled,
                         }
diff --git a/frontend/ui/widget/confirmbox.lua b/frontend/ui/widget/confirmbox.lua
index 00ae2d277..79a601eb1 100644
--- a/frontend/ui/widget/confirmbox.lua
+++ b/frontend/ui/widget/confirmbox.lua
@@ -45,8 +45,8 @@ local ConfirmBox = InputContainer:new{
     ok_callback = function() end,
     cancel_callback = function() end,
     other_buttons = nil,
-    margin = 5,
-    padding = 5,
+    margin = Screen:scaleBySize(5),
+    padding = Screen:scaleBySize(5),
 }
 
 function ConfirmBox:init()
@@ -70,9 +70,10 @@ function ConfirmBox:init()
     local content = HorizontalGroup:new{
         align = "center",
         ImageWidget:new{
-            file = "resources/info-i.png"
+            file = "resources/info-i.png",
+            scale_for_dpi = true,
         },
-        HorizontalSpan:new{ width = 10 },
+        HorizontalSpan:new{ width = Screen:scaleBySize(10) },
         TextBoxWidget:new{
             text = self.text,
             face = self.face,
diff --git a/frontend/ui/widget/container/alphacontainer.lua b/frontend/ui/widget/container/alphacontainer.lua
index 7c8a92556..9a05c941d 100644
--- a/frontend/ui/widget/container/alphacontainer.lua
+++ b/frontend/ui/widget/container/alphacontainer.lua
@@ -10,9 +10,9 @@ Example:
 
         FrameContainer:new{
             background = Blitbuffer.COLOR_WHITE,
-            bordersize = 1,
+            bordersize = Screen:scaleBySize(1),
             margin = 0,
-            padding = 1
+            padding = Screen:scaleBySize(1)
         }
     }
 --]]
diff --git a/frontend/ui/widget/container/framecontainer.lua b/frontend/ui/widget/container/framecontainer.lua
index 40abb235a..a2daa3fba 100644
--- a/frontend/ui/widget/container/framecontainer.lua
+++ b/frontend/ui/widget/container/framecontainer.lua
@@ -6,8 +6,8 @@ Example:
 
     local frame
     frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/container/underlinecontainer.lua b/frontend/ui/widget/container/underlinecontainer.lua
index bb12abeb0..d5c163e92 100644
--- a/frontend/ui/widget/container/underlinecontainer.lua
+++ b/frontend/ui/widget/container/underlinecontainer.lua
@@ -7,10 +7,11 @@ a line under its child node.
 local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
+local Screen = require("device").screen
 
 local UnderlineContainer = WidgetContainer:new{
-    linesize = 2,
-    padding = 1,
+    linesize = Screen:scaleBySize(2),
+    padding = Screen:scaleBySize(1),
     -- TODO: shouldn't this default to black instead?
     color = Blitbuffer.COLOR_WHITE,
     vertical_align = "top",
diff --git a/frontend/ui/widget/dictquicklookup.lua b/frontend/ui/widget/dictquicklookup.lua
index 5da920c2d..fc9f59e0a 100644
--- a/frontend/ui/widget/dictquicklookup.lua
+++ b/frontend/ui/widget/dictquicklookup.lua
@@ -418,8 +418,8 @@ function DictQuickLookup:update()
     }
 
     self.dict_frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/frontlightwidget.lua b/frontend/ui/widget/frontlightwidget.lua
index e32517449..da859d12a 100644
--- a/frontend/ui/widget/frontlightwidget.lua
+++ b/frontend/ui/widget/frontlightwidget.lua
@@ -51,9 +51,9 @@ function FrontLightWidget:init()
 
     self.fl_prog_button = Button:new{
         text = "",
-        bordersize = 3,
+        bordersize = Screen:scaleBySize(3),
         radius = 0,
-        margin = 1,
+        margin = Screen:scaleBySize(1),
         enabled = true,
         width = self.button_width,
         show_parent = self,
@@ -124,7 +124,7 @@ function FrontLightWidget:setProgress(num, step)
         for i = step_min, step_num do
             table.insert(fl_group, self.fl_prog_button:new{
                 text= "",
-                margin = 1,
+                margin = Screen:scaleBySize(1),
                 preselect = true,
                 width = self.button_width,
                 callback = function()
@@ -145,8 +145,8 @@ function FrontLightWidget:setProgress(num, step)
     end
     local button_minus = Button:new{
         text = "-1",
-        bordersize = 2,
-        margin = 2,
+        bordersize = Screen:scaleBySize(2),
+        margin = Screen:scaleBySize(2),
         radius = 0,
         enabled = enable_button_minus,
         width = self.screen_width * 0.20,
@@ -155,8 +155,8 @@ function FrontLightWidget:setProgress(num, step)
     }
     local button_plus = Button:new{
         text = "+1",
-        bordersize = 2,
-        margin = 2,
+        bordersize = Screen:scaleBySize(2),
+        margin = Screen:scaleBySize(2),
         radius = 0,
         enabled = enable_button_plus,
         width = self.screen_width * 0.20,
@@ -171,8 +171,8 @@ function FrontLightWidget:setProgress(num, step)
     }
     local button_min = Button:new{
         text = _("Min"),
-        bordersize = 2,
-        margin = 2,
+        bordersize = Screen:scaleBySize(2),
+        margin = Screen:scaleBySize(2),
         radius = 0,
         enabled = true,
         width = self.screen_width * 0.20,
@@ -181,8 +181,8 @@ function FrontLightWidget:setProgress(num, step)
     }
     local button_max = Button:new{
         text = _("Max"),
-        bordersize = 2,
-        margin = 2,
+        bordersize = Screen:scaleBySize(2),
+        margin = Screen:scaleBySize(2),
         radius = 0,
         enabled = true,
         width = self.screen_width * 0.20,
@@ -191,8 +191,8 @@ function FrontLightWidget:setProgress(num, step)
     }
     local button_toggle = Button:new{
         text = _("Toggle"),
-        bordersize = 2,
-        margin = 2,
+        bordersize = Screen:scaleBySize(2),
+        margin = Screen:scaleBySize(2),
         radius = 0,
         enabled = true,
         width = self.screen_width * 0.20,
@@ -266,8 +266,8 @@ function FrontLightWidget:update()
         CloseButton:new{ window = self, },
     }
     self.light_frame = FrameContainer:new{
-        radius = 5,
-        bordersize = 3,
+        radius = Screen:scaleBySize(5),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/imageviewer.lua b/frontend/ui/widget/imageviewer.lua
index 00dcb607b..7a5f785f7 100644
--- a/frontend/ui/widget/imageviewer.lua
+++ b/frontend/ui/widget/imageviewer.lua
@@ -258,7 +258,6 @@ function ImageViewer:update()
     end
     self.main_frame = FrameContainer:new{
         radius = not self.fullscreen and 8 or nil,
-        bordersize = 3,
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/infomessage.lua b/frontend/ui/widget/infomessage.lua
index 7174df0a4..b64afab0f 100644
--- a/frontend/ui/widget/infomessage.lua
+++ b/frontend/ui/widget/infomessage.lua
@@ -6,13 +6,14 @@ It vanishes on key press or after a given timeout.
 Example:
     local UIManager = require("ui/uimanager")
     local _ = require("gettext")
+    local Screen = require("device").screen
     local sample
     sample = InfoMessage:new{
         text = _("Some message"),
         -- Usually the hight of a InfoMessage is self-adaptive. If this field is actively set, a
         -- scrollbar may be shown. This variable is usually helpful to display a large chunk of text
         -- which may exceed the height of the screen.
-        height = 400,
+        height = Screen:scaleBySize(400),
         -- Set to false to hide the icon, and also the span between the icon and text.
         show_icon = false,
         timeout = 5,  -- This widget will vanish in 5 seconds.
@@ -91,6 +92,7 @@ function InfoMessage:init()
         else
             image_widget = ImageWidget:new{
                 file = "resources/info-i.png",
+                scale_for_dpi = true,
             }
         end
     else
@@ -127,12 +129,12 @@ function InfoMessage:init()
     self[1] = CenterContainer:new{
         dimen = Screen:getSize(),
         FrameContainer:new{
-            margin = 2,
+            margin = Screen:scaleBySize(2),
             background = Blitbuffer.COLOR_WHITE,
             HorizontalGroup:new{
                 align = "center",
                 image_widget,
-                HorizontalSpan:new{ width = (self.show_icon and 10 or 0) },
+                HorizontalSpan:new{ width = (self.show_icon and Screen:scaleBySize(10) or 0) },
                 text_widget,
             }
         }
diff --git a/frontend/ui/widget/inputdialog.lua b/frontend/ui/widget/inputdialog.lua
index a0eafcac8..cf1e2e625 100644
--- a/frontend/ui/widget/inputdialog.lua
+++ b/frontend/ui/widget/inputdialog.lua
@@ -164,8 +164,7 @@ function InputDialog:init()
     }
 
     self.dialog_frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/keyvaluepage.lua b/frontend/ui/widget/keyvaluepage.lua
index 463007426..e208e5b92 100644
--- a/frontend/ui/widget/keyvaluepage.lua
+++ b/frontend/ui/widget/keyvaluepage.lua
@@ -74,7 +74,7 @@ function KeyValueTitle:init()
     })
     -- page count and separation line
     self.page_cnt = FrameContainer:new{
-        padding = 4,
+        padding = Screen:scaleBySize(4),
         margin = 0,
         bordersize = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/linkbox.lua b/frontend/ui/widget/linkbox.lua
index 9710cf3a4..13f66252b 100644
--- a/frontend/ui/widget/linkbox.lua
+++ b/frontend/ui/widget/linkbox.lua
@@ -10,7 +10,7 @@ local LinkBox = InputContainer:new{
     box = nil,
     color = Blitbuffer.COLOR_GREY,
     radius = 0,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
 }
 
 function LinkBox:init()
@@ -60,4 +60,3 @@ function LinkBox:onTapClose()
 end
 
 return LinkBox
-
diff --git a/frontend/ui/widget/listview.lua b/frontend/ui/widget/listview.lua
index 973847be8..4afea562b 100644
--- a/frontend/ui/widget/listview.lua
+++ b/frontend/ui/widget/listview.lua
@@ -4,8 +4,8 @@ Widget component that handles pagination for a list of items.
 Example:
 
     local list_view = ListView:new{
-        height = 400,
-        width = 200,
+        height = Screen:scaleBySize(400),
+        width = Screen:scaleBySize(200),
         page_update_cb = function(curr_page_num, total_pages)
             -- This callback function will be called whenever a page
             -- turn event is triggered. You can use it to update
diff --git a/frontend/ui/widget/logindialog.lua b/frontend/ui/widget/logindialog.lua
index d49a9825a..935e5a61f 100644
--- a/frontend/ui/widget/logindialog.lua
+++ b/frontend/ui/widget/logindialog.lua
@@ -1,13 +1,13 @@
-local FrameContainer = require("ui/widget/container/framecontainer")
+local Blitbuffer = require("ffi/blitbuffer")
 local CenterContainer = require("ui/widget/container/centercontainer")
-local VerticalGroup = require("ui/widget/verticalgroup")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local Geom = require("ui/geometry")
 local InputDialog = require("ui/widget/inputdialog")
 local InputText = require("ui/widget/inputtext")
 local UIManager = require("ui/uimanager")
-local Geom = require("ui/geometry")
-local Screen = require("device").screen
+local VerticalGroup = require("ui/widget/verticalgroup")
 local _ = require("gettext")
-local Blitbuffer = require("ffi/blitbuffer")
+local Screen = require("device").screen
 
 local LoginDialog = InputDialog:extend{
     username = "",
@@ -41,8 +41,7 @@ function LoginDialog:init()
     }
 
     self.dialog_frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/menu.lua b/frontend/ui/widget/menu.lua
index c0f27e55c..3869a3204 100644
--- a/frontend/ui/widget/menu.lua
+++ b/frontend/ui/widget/menu.lua
@@ -33,9 +33,9 @@ local getMenuText = require("util").getMenuText
 Widget that displays a shortcut icon for menu item
 --]]
 local ItemShortCutIcon = WidgetContainer:new{
-    dimen = Geom:new{ w = 22, h = 22 },
+    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
     key = nil,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
     radius = 0,
     style = "square",
 }
@@ -245,13 +245,13 @@ function MenuItem:init()
         padding = 0,
         HorizontalGroup:new{
             align = "center",
-            HorizontalSpan:new{ width = 5 },
+            HorizontalSpan:new{ width = Screen:scaleBySize(5) },
             ItemShortCutIcon:new{
                 dimen = shortcut_icon_dimen,
                 key = self.shortcut,
                 style = self.shortcut_style,
             },
-            HorizontalSpan:new{ width = 10 },
+            HorizontalSpan:new{ width = Screen:scaleBySize(10) },
             self._underline_container
         }
     }
@@ -332,7 +332,7 @@ local Menu = FocusManager:new{
 
     title = "No Title",
     -- default width and height
-    width = 500,
+    width = nil,
     -- height will be calculated according to item number if not given
     height = nil,
     header_padding = Screen:scaleBySize(10),
diff --git a/frontend/ui/widget/multiconfirmbox.lua b/frontend/ui/widget/multiconfirmbox.lua
index 3771a2381..aed5c3ff8 100644
--- a/frontend/ui/widget/multiconfirmbox.lua
+++ b/frontend/ui/widget/multiconfirmbox.lua
@@ -1,5 +1,5 @@
 --[[--
-Widget that shows a message and choice1/choice2/Cancel buttons
+Widget that shows a message and cancel/choice1/choice2 buttons
 
 Example:
 
@@ -42,8 +42,8 @@ local MultiConfirmBox = InputContainer:new{
     choice1_callback = function() end,
     choice2_callback = function() end,
     cancel_callback = function() end,
-    margin = 5,
-    padding = 5,
+    margin = Screen:scaleBySize(5),
+    padding = Screen:scaleBySize(5),
 }
 
 function MultiConfirmBox:init()
@@ -52,7 +52,7 @@ function MultiConfirmBox:init()
         ImageWidget:new{
             file = "resources/info-i.png"
         },
-        HorizontalSpan:new{ width = 10 },
+        HorizontalSpan:new{ width = Screen:scaleBySize(10) },
         TextBoxWidget:new{
             text = self.text,
             face = self.face,
diff --git a/frontend/ui/widget/multiinputdialog.lua b/frontend/ui/widget/multiinputdialog.lua
index 5069b5035..e6e460174 100644
--- a/frontend/ui/widget/multiinputdialog.lua
+++ b/frontend/ui/widget/multiinputdialog.lua
@@ -84,8 +84,8 @@ function MultiInputDialog:init()
     })
 
     self.dialog_frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
+        bordersize = Screen:scaleBySize(3),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/networksetting.lua b/frontend/ui/widget/networksetting.lua
index a0a582185..27036d661 100644
--- a/frontend/ui/widget/networksetting.lua
+++ b/frontend/ui/widget/networksetting.lua
@@ -30,33 +30,31 @@ Example:
 
 ]]
 
-local FrameContainer = require("ui/widget/container/framecontainer")
-local InputContainer = require("ui/widget/container/inputcontainer")
-local LeftContainer = require("ui/widget/container/leftcontainer")
+local Blitbuffer = require("ffi/blitbuffer")
 local CenterContainer = require("ui/widget/container/centercontainer")
-local RightContainer = require("ui/widget/container/rightcontainer")
+local Device = require("device")
+local Font = require("ui/font")
+local Geom = require("ui/geometry")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local GestureRange = require("ui/gesturerange")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
-local VerticalGroup = require("ui/widget/verticalgroup")
-local OverlapGroup = require("ui/widget/overlapgroup")
+local ImageWidget = require("ui/widget/imagewidget")
 local InfoMessage = require("ui/widget/infomessage")
+local InputContainer = require("ui/widget/container/inputcontainer")
 local InputDialog = require("ui/widget/inputdialog")
-local NetworkMgr = require("ui/network/manager")
+local LeftContainer = require("ui/widget/container/leftcontainer")
 local ListView = require("ui/widget/listview")
-local ImageWidget = require("ui/widget/imagewidget")
-local Widget = require("ui/widget/widget")
+local RightContainer = require("ui/widget/container/rightcontainer")
+local NetworkMgr = require("ui/network/manager")
+local OverlapGroup = require("ui/widget/overlapgroup")
 local TextWidget = require("ui/widget/textwidget")
-local GestureRange = require("ui/gesturerange")
-local Blitbuffer = require("ffi/blitbuffer")
 local UIManager = require("ui/uimanager")
-local Geom = require("ui/geometry")
-local Device = require("device")
-local Screen = Device.screen
-local Font = require("ui/font")
-local T = require("ffi/util").template
+local VerticalGroup = require("ui/widget/verticalgroup")
+local Widget = require("ui/widget/widget")
 local _ = require("gettext")
-
-
+local T = require("ffi/util").template
+local Screen = Device.screen
 
 local function obtainIP()
     -- TODO: check for DHCP result
@@ -421,7 +419,7 @@ function NetworkSetting:init()
     self.popup = FrameContainer:new{
         background = Blitbuffer.COLOR_WHITE,
         padding = 0,
-        bordersize = 3,
+        bordersize = Screen:scaleBySize(3),
         VerticalGroup:new{
             align = "left",
             self.pagination,
diff --git a/frontend/ui/widget/notification.lua b/frontend/ui/widget/notification.lua
index 5302e7e18..50835d5c3 100644
--- a/frontend/ui/widget/notification.lua
+++ b/frontend/ui/widget/notification.lua
@@ -18,8 +18,8 @@ local Notification = InputContainer:new{
     face = Font:getFace("x_smallinfofont"),
     text = "Null Message",
     timeout = nil,
-    margin = 5,
-    padding = 5,
+    margin = Screen:scaleBySize(5),
+    padding = Screen:scaleBySize(5),
 }
 
 function Notification:init()
diff --git a/frontend/ui/widget/physicalkeyboard.lua b/frontend/ui/widget/physicalkeyboard.lua
index 8f6ad4d3e..0a9c22058 100644
--- a/frontend/ui/widget/physicalkeyboard.lua
+++ b/frontend/ui/widget/physicalkeyboard.lua
@@ -27,7 +27,7 @@ local PhysicalNumericKey = WidgetContainer:new{
 
     width = nil,
     height = nil,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
     face = Font:getFace("infont"),
     pkey_face = Font:getFace("infont", 14),
 }
@@ -41,7 +41,7 @@ function PhysicalNumericKey:init()
         margin = 0,
         bordersize = self.bordersize,
         background = Blitbuffer.COLOR_WHITE,
-        radius = 5,
+        radius = Screen:scaleBySize(5),
         padding = 0,
         CenterContainer:new{
             dimen = Geom:new{
@@ -69,8 +69,8 @@ end
 local PhysicalKeyboard = InputContainer:new{
     is_always_active = true,
     inputbox = nil,  -- expect ui/widget/inputtext instance
-    bordersize = 2,
-    padding = 2,
+    bordersize = Screen:scaleBySize(2),
+    padding = Screen:scaleBySize(2),
     height = math.max(Screen:getWidth(), Screen:getHeight())*0.33,
     key_padding = Screen:scaleBySize(6),
 }
@@ -124,7 +124,7 @@ end
 
 function PhysicalKeyboard:setupNumericMappingUI()
     local key_rows = VerticalGroup:new{}
-    local key_margin = 1
+    local key_margin = Screen:scaleBySize(1)
     local row_len = #self.mapping[1]
     local base_key_width = math.floor((self.width - row_len*(self.key_padding+2*key_margin) - 2*self.padding)/10)
     local base_key_height = math.floor((self.height - self.key_padding - 2*self.padding)/4)
diff --git a/frontend/ui/widget/progresswidget.lua b/frontend/ui/widget/progresswidget.lua
index 5e1a0d3c2..622fe4c3b 100644
--- a/frontend/ui/widget/progresswidget.lua
+++ b/frontend/ui/widget/progresswidget.lua
@@ -19,31 +19,32 @@ Configurable attributes:
 Example:
 
     local foo_bar = ProgressWidget:new{
-        width = 400,
-        height = 10,
+        width = Screen:scaleBySize(400),
+        height = Screen:scaleBySize(10),
         percentage = 50/100,
     }
     UIManager:show(foo_bar)
 
 ]]
 
-local Widget = require("ui/widget/widget")
-local Geom = require("ui/geometry")
 local Blitbuffer = require("ffi/blitbuffer")
+local Geom = require("ui/geometry")
+local Widget = require("ui/widget/widget")
+local Screen = require("device").screen
 
 local ProgressWidget = Widget:new{
     width = nil,
     height = nil,
-    margin_h = 3,
-    margin_v = 1,
-    radius = 2,
-    bordersize = 1,
+    margin_h = Screen:scaleBySize(3),
+    margin_v = Screen:scaleBySize(1),
+    radius = Screen:scaleBySize(2),
+    bordersize = Screen:scaleBySize(1),
     bordercolor = Blitbuffer.COLOR_BLACK,
     bgcolor = Blitbuffer.COLOR_WHITE,
     rectcolor = Blitbuffer.gray(0.7),
     percentage = nil,
     ticks = nil,
-    tick_width = 3,
+    tick_width = Screen:scaleBySize(3),
     last = nil,
 }
 
diff --git a/frontend/ui/widget/scrolltextwidget.lua b/frontend/ui/widget/scrolltextwidget.lua
index 7f0ada2bb..23e9eef30 100644
--- a/frontend/ui/widget/scrolltextwidget.lua
+++ b/frontend/ui/widget/scrolltextwidget.lua
@@ -1,19 +1,20 @@
+--[[--
+Text widget with vertical scroll bar.
+--]]
+
+local Blitbuffer = require("ffi/blitbuffer")
+local Device = require("device")
+local Geom = require("ui/geometry")
+local GestureRange = require("ui/gesturerange")
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local VerticalScrollBar = require("ui/widget/verticalscrollbar")
-local Geom = require("ui/geometry")
-local GestureRange = require("ui/gesturerange")
 local UIManager = require("ui/uimanager")
-local Device = require("device")
-local Screen = Device.screen
 local Input = Device.input
-local HorizontalGroup = require("ui/widget/horizontalgroup")
-local HorizontalSpan = require("ui/widget/horizontalspan")
-local Blitbuffer = require("ffi/blitbuffer")
+local Screen = Device.screen
 
---[[
-Text widget with vertical scroll bar
---]]
 local ScrollTextWidget = InputContainer:new{
     text = nil,
     charlist = nil,
@@ -22,8 +23,8 @@ local ScrollTextWidget = InputContainer:new{
     justified = false,
     face = nil,
     fgcolor = Blitbuffer.COLOR_BLACK,
-    width = 400,
-    height = 20,
+    width = Screen:scaleBySize(400),
+    height = Screen:scaleBySize(20),
     scroll_bar_width = Screen:scaleBySize(6),
     text_scroll_span = Screen:scaleBySize(12),
     dialog = nil,
diff --git a/frontend/ui/widget/textboxwidget.lua b/frontend/ui/widget/textboxwidget.lua
index 2cec3cff3..8ea06bc3e 100644
--- a/frontend/ui/widget/textboxwidget.lua
+++ b/frontend/ui/widget/textboxwidget.lua
@@ -16,11 +16,11 @@ local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
 local LineWidget = require("ui/widget/linewidget")
 local RenderText = require("ui/rendertext")
-local Screen = require("device").screen
 local TimeVal = require("ui/timeval")
 local Widget = require("ui/widget/widget")
 local logger = require("logger")
 local util = require("util")
+local Screen = require("device").screen
 
 local TextBoxWidget = Widget:new{
     text = nil,
@@ -35,7 +35,7 @@ local TextBoxWidget = Widget:new{
     bold = nil,
     line_height = 0.3, -- in em
     fgcolor = Blitbuffer.COLOR_BLACK,
-    width = 400, -- in pixels
+    width = Screen:scaleBySize(400), -- in pixels
     height = nil, -- nil value indicates unscrollable text widget
     virtual_line_num = 1, -- used by scroll bar
     _bb = nil,
diff --git a/frontend/ui/widget/textviewer.lua b/frontend/ui/widget/textviewer.lua
index a47e1b2ef..596cef028 100644
--- a/frontend/ui/widget/textviewer.lua
+++ b/frontend/ui/widget/textviewer.lua
@@ -158,8 +158,7 @@ function TextViewer:init()
     }
 
     self.frame = FrameContainer:new{
-        radius = 8,
-        bordersize = 3,
+        radius = Screen:scaleBySize(8),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/timewidget.lua b/frontend/ui/widget/timewidget.lua
index 048f58b60..42662b2a4 100644
--- a/frontend/ui/widget/timewidget.lua
+++ b/frontend/ui/widget/timewidget.lua
@@ -144,8 +144,7 @@ function TimeWidget:update()
     }
 
     self.time_frame = FrameContainer:new{
-        radius = 5,
-        bordersize = 3,
+        radius = Screen:scaleBySize(5),
         padding = 0,
         margin = 0,
         background = Blitbuffer.COLOR_WHITE,
diff --git a/frontend/ui/widget/toggleswitch.lua b/frontend/ui/widget/toggleswitch.lua
index efc8b92b1..d6938c5a3 100644
--- a/frontend/ui/widget/toggleswitch.lua
+++ b/frontend/ui/widget/toggleswitch.lua
@@ -1,18 +1,25 @@
-local TextWidget = require("ui/widget/textwidget")
-local InputContainer = require("ui/widget/container/inputcontainer")
-local FrameContainer = require("ui/widget/container/framecontainer")
+--[[--
+Displays a button that toggles between states. Used in bottom configuration panel.
+
+@usage
+    local ToggleSwitch = require("ui/widget/toggleswitch")
+]]
+
+local Blitbuffer = require("ffi/blitbuffer")
 local CenterContainer = require("ui/widget/container/centercontainer")
-local HorizontalGroup = require("ui/widget/horizontalgroup")
-local VerticalGroup = require("ui/widget/verticalgroup")
+local Device = require("device")
 local Font = require("ui/font")
 local Geom = require("ui/geometry")
+local GestureRange = require("ui/gesturerange")
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local FrameContainer = require("ui/widget/container/framecontainer")
 local RenderText = require("ui/rendertext")
+local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
-local Screen = require("device").screen
-local Device = require("device")
-local GestureRange = require("ui/gesturerange")
-local Blitbuffer = require("ffi/blitbuffer")
+local VerticalGroup = require("ui/widget/verticalgroup")
 local _ = require("gettext")
+local Screen = Device.screen
 
 local ToggleLabel = TextWidget:new{
     bold = true,
@@ -27,7 +34,7 @@ end
 local ToggleSwitch = InputContainer:new{
     width = Screen:scaleBySize(216),
     height = Screen:scaleBySize(30),
-    bgcolor = Blitbuffer.COLOR_WHITE, -- unfoused item color
+    bgcolor = Blitbuffer.COLOR_WHITE, -- unfocused item color
     fgcolor = Blitbuffer.COLOR_GREY, -- focused item color
     font_face = "cfont",
     font_size = 16,
@@ -43,9 +50,9 @@ function ToggleSwitch:init()
     self.toggle_frame = FrameContainer:new{
         background = Blitbuffer.COLOR_WHITE,
         color = Blitbuffer.COLOR_GREY,
-        radius = 7,
-        bordersize = 1,
-        padding = 2,
+        radius = Screen:scaleBySize(7),
+        bordersize = Screen:scaleBySize(1),
+        padding = Screen:scaleBySize(2),
         dim = not self.enabled,
     }
 
@@ -72,8 +79,8 @@ function ToggleSwitch:init()
             background = Blitbuffer.COLOR_WHITE,
             color = Blitbuffer.COLOR_GREY,
             margin = 0,
-            radius = 5,
-            bordersize = 1,
+            radius = Screen:scaleBySize(5),
+            bordersize = Screen:scaleBySize(1),
             padding = 0,
             content,
         }
diff --git a/frontend/ui/widget/touchmenu.lua b/frontend/ui/widget/touchmenu.lua
index fe84e48f9..5e5014b0f 100644
--- a/frontend/ui/widget/touchmenu.lua
+++ b/frontend/ui/widget/touchmenu.lua
@@ -431,7 +431,7 @@ function TouchMenu:init()
     self.item_width = self.width - self.padding*2 - self.bordersize*2
     self.split_line = HorizontalGroup:new{
         -- pad with 10 pixel to align with the up arrow in footer
-        HorizontalSpan:new{width = 10},
+        HorizontalSpan:new{width = Screen:scaleBySize(10)},
         LineWidget:new{
             background = Blitbuffer.gray(0.33),
             dimen = Geom:new{
diff --git a/frontend/ui/widget/verticalscrollbar.lua b/frontend/ui/widget/verticalscrollbar.lua
index d63f98870..08d80ac98 100644
--- a/frontend/ui/widget/verticalscrollbar.lua
+++ b/frontend/ui/widget/verticalscrollbar.lua
@@ -1,14 +1,15 @@
 local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
 local Widget = require("ui/widget/widget")
+local Screen = require("device").screen
 
 local VerticalScrollBar = Widget:new{
     enable = true,
     low = 0,
     high = 1,
-    width = 6,
-    height = 50,
-    bordersize = 1,
+    width = Screen:scaleBySize(6),
+    height = Screen:scaleBySize(50),
+    bordersize = Screen:scaleBySize(1),
     bordercolor = Blitbuffer.COLOR_BLACK,
     radius = 0,
     rectcolor = Blitbuffer.COLOR_BLACK,
diff --git a/frontend/ui/widget/virtualkeyboard.lua b/frontend/ui/widget/virtualkeyboard.lua
index 0dc614166..ea9626932 100644
--- a/frontend/ui/widget/virtualkeyboard.lua
+++ b/frontend/ui/widget/virtualkeyboard.lua
@@ -27,7 +27,7 @@ local VirtualKey = InputContainer:new{
 
     width = nil,
     height = math.max(Screen:getWidth(), Screen:getHeight())*0.33,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
     face = Font:getFace("infont"),
 }
 
@@ -62,7 +62,7 @@ function VirtualKey:init()
         margin = 0,
         bordersize = self.bordersize,
         background = Blitbuffer.COLOR_WHITE,
-        radius = 5,
+        radius = Screen:scaleBySize(5),
         padding = 0,
         CenterContainer:new{
             dimen = Geom:new{
diff --git a/plugins/coverbrowser.koplugin/listmenu.lua b/plugins/coverbrowser.koplugin/listmenu.lua
index 64f0cf9ea..9abb3c369 100644
--- a/plugins/coverbrowser.koplugin/listmenu.lua
+++ b/plugins/coverbrowser.koplugin/listmenu.lua
@@ -44,9 +44,9 @@ local corner_mark = ImageWidget:new{
 -- ItemShortCutIcon (for keyboard navigation) is private to menu.lua and can't be accessed,
 -- so we need to redefine it
 local ItemShortCutIcon = WidgetContainer:new{
-    dimen = Geom:new{ w = 22, h = 22 },
+    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
     key = nil,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
     radius = 0,
     style = "square",
 }
@@ -698,10 +698,8 @@ end
 
 function ListMenu:_updateItemsBuildUI()
     -- Build our list
-    -- We separate items with a 1px LineWidget (no need for
-    -- scaleBySize, thin is fine)
     table.insert(self.item_group, LineWidget:new{
-                    dimen = Geom:new{ w = self.width, h = 1 },
+                    dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(1) },
                     background = Blitbuffer.COLOR_GREY,
                     style = "solid",
                 })
@@ -742,7 +740,7 @@ function ListMenu:_updateItemsBuildUI()
             }
         table.insert(self.item_group, item_tmp)
         table.insert(self.item_group, LineWidget:new{
-                        dimen = Geom:new{ w = self.width, h = 1 },
+                        dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(1) },
                         background = Blitbuffer.COLOR_GREY,
                         style = "solid",
                     })
diff --git a/plugins/coverbrowser.koplugin/mosaicmenu.lua b/plugins/coverbrowser.koplugin/mosaicmenu.lua
index faa8d74e7..575524cb5 100644
--- a/plugins/coverbrowser.koplugin/mosaicmenu.lua
+++ b/plugins/coverbrowser.koplugin/mosaicmenu.lua
@@ -13,6 +13,7 @@ local ImageWidget = require("ui/widget/imagewidget")
 local InfoMessage = require("ui/widget/infomessage")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local OverlapGroup = require("ui/widget/overlapgroup")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
@@ -41,9 +42,9 @@ local corner_mark = ImageWidget:new{
 -- ItemShortCutIcon (for keyboard navigation) is private to menu.lua and can't be accessed,
 -- so we need to redefine it
 local ItemShortCutIcon = WidgetContainer:new{
-    dimen = Geom:new{ w = 22, h = 22 },
+    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
     key = nil,
-    bordersize = 2,
+    bordersize = Screen:scaleBySize(2),
     radius = 0,
     style = "square",
 }
@@ -92,7 +93,7 @@ local FakeCover = FrameContainer:new{
     height = nil,
     margin = 0,
     padding = 0,
-    bordersize = 1,
+    bordersize = Size.line.thin,
     dim = nil,
     filename = nil,
     file_deleted = nil,
diff --git a/plugins/goodreads.koplugin/doublekeyvaluepage.lua b/plugins/goodreads.koplugin/doublekeyvaluepage.lua
index 6241e3b45..4bccdf88f 100644
--- a/plugins/goodreads.koplugin/doublekeyvaluepage.lua
+++ b/plugins/goodreads.koplugin/doublekeyvaluepage.lua
@@ -53,7 +53,7 @@ function DoubleKeyValueTitle:init()
     })
     -- page count and separation line
     self.page_cnt = FrameContainer:new{
-        padding = 4,
+        padding = Screen:scaleBySize(4),
         margin = 0,
         bordersize = 0,
         background = Blitbuffer.COLOR_WHITE,
@@ -129,31 +129,31 @@ function DoubleKeyValueItem:init()
     local h = self.dimen.h / 2
     local w = self.dimen.w
     self[1] = FrameContainer:new{
-        padding = 10,
+        padding = Screen:scaleBySize(10),
         bordersize = 0,
         VerticalGroup:new{
             dimen = Geom:new{ h = h, w = w },
-            padding = 10,
+            padding = Screen:scaleBySize(10),
             LeftContainer:new{
-                padding = 10,
+                padding = Screen:scaleBySize(10),
                 dimen = Geom:new{ h = h, w = w },
                 TextWidget:new{
                     text = self.show_value,
-                    padding = 10,
+                    padding = Screen:scaleBySize(10),
                     face = self.cface_up,
                 }
             },
             LeftContainer:new{
-                padding = 10,
+                padding = Screen:scaleBySize(10),
                  dimen = Geom:new{ h = h / 5 , w = w },
                 HorizontalSpan:new{ width = Screen:scaleBySize(15), height = 3 }
             },
             LeftContainer:new{
-                padding = 10,
+                padding = Screen:scaleBySize(10),
                 dimen = Geom:new{ h = h, w = w },
                 TextWidget:new{
                     text = self.show_key,
-                    padding = 10,
+                    padding = Screen:scaleBySize(10),
                     face = self.cface_down,
                 }
             }
diff --git a/plugins/goodreads.koplugin/goodreadsbook.lua b/plugins/goodreads.koplugin/goodreadsbook.lua
index 44793a689..a2b715aea 100644
--- a/plugins/goodreads.koplugin/goodreadsbook.lua
+++ b/plugins/goodreads.koplugin/goodreadsbook.lua
@@ -112,7 +112,7 @@ function GoodreadsBook:genBookInfoGroup()
         TextBoxWidget:new{
             text = self.dates.title,
             face = self.medium_font_face,
-            padding = 2,
+            padding = Screen:scaleBySize(2),
             alignment = "center",
             width = width,
         },
@@ -142,7 +142,7 @@ function GoodreadsBook:genBookInfoGroup()
     local text_series = TextWidget:new{
         text = T(_("Series: %1"), self.dates.series),
         face = self.small_font_face,
-        padding = 2,
+        padding = Screen:scaleBySize(2),
     }
     table.insert(book_meta_info_group,
         CenterContainer:new{
@@ -154,7 +154,7 @@ function GoodreadsBook:genBookInfoGroup()
     local text_rating = TextWidget:new{
         text = T(_("Rating: %1"), self.dates.rating),
         face = self.small_font_face,
-        padding = 2,
+        padding = Screen:scaleBySize(2),
     }
     table.insert(book_meta_info_group,
         CenterContainer:new{
@@ -166,7 +166,7 @@ function GoodreadsBook:genBookInfoGroup()
     local text_pages = TextWidget:new{
         text = T(_("Pages: %1"), self.dates.pages),
         face = self.small_font_face,
-        padding = 2,
+        padding = Screen:scaleBySize(2),
     }
     table.insert(book_meta_info_group,
         CenterContainer:new{
@@ -178,7 +178,7 @@ function GoodreadsBook:genBookInfoGroup()
     local text_release = TextWidget:new{
         text = T(_("Release date: %1"), self.dates.release),
         face = self.small_font_face,
-        padding = 2,
+        padding = Screen:scaleBySize(2),
     }
     table.insert(book_meta_info_group,
         CenterContainer:new{
diff --git a/plugins/statistics.koplugin/readerprogress.lua b/plugins/statistics.koplugin/readerprogress.lua
index 5cdbbb88c..ba43b5d0c 100644
--- a/plugins/statistics.koplugin/readerprogress.lua
+++ b/plugins/statistics.koplugin/readerprogress.lua
@@ -210,11 +210,11 @@ function ReaderProgress:genWeekStats(stats_day)
         date_format_show = dayOfWeekTranslation[os.date("%A", diff_time)] .. os.date(" (%d.%m)", diff_time)
         local total_group = HorizontalGroup:new{
             align = "center",
-            padding = 2,
+            padding = Screen:scaleBySize(2),
             LeftContainer:new{
                 dimen = Geom:new{ w = self.screen_width , h = height / 3 },
                 TextWidget:new{
-                    padding = 2,
+                    padding = Screen:scaleBySize(2),
                     text = date_format_show .. " - " .. util.secondsToClock(select_day_time, true),
                     face = Font:getFace("smallffont"),
                 },
@@ -353,7 +353,7 @@ function ReaderProgress:genSummaryWeek(width)
         CenterContainer:new{
             dimen = Geom:new{ w = tile_width, h = tile_height },
             TextWidget:new{
-                padding = 5,
+                padding = Screen:scaleBySize(5),
                 text = _("Total"),
                 face = self.small_font_face,
             },
diff --git a/spec/unit/widget_progresswidget_spec.lua b/spec/unit/widget_progresswidget_spec.lua
index 0f3dd0f0e..1960068d8 100644
--- a/spec/unit/widget_progresswidget_spec.lua
+++ b/spec/unit/widget_progresswidget_spec.lua
@@ -8,8 +8,8 @@ describe("ProgressWidget widget", function()
 
     it("should not crash with nil self.last", function()
         local progress = ProgressWidget:new{
-            width = 100,
-            height = 50,
+            width = Screen:scaleBySize(100),
+            height = Screen:scaleBySize(50),
             percentage = 5/100,
             ticks = {1},
         }
diff --git a/tools/wbuilder.lua b/tools/wbuilder.lua
index ae143d649..860fc3549 100755
--- a/tools/wbuilder.lua
+++ b/tools/wbuilder.lua
@@ -172,9 +172,9 @@ Clock = AlphaContainer:new{
 
     FrameContainer:new{
         background = Blitbuffer.COLOR_WHITE,
-        bordersize = 1,
+        bordersize = Screen:scaleBySize(1),
         margin = 0,
-        padding = 1
+        padding = Screen:scaleBySize(1),
     }
 }
 
@@ -206,7 +206,7 @@ end
 -----------------------------------------------------
 Quiz = ConfirmBox:new{
     text = "Tell me the truth, isn't it COOL?!",
-    width = 300,
+    width = Screen:scaleBySize(300),
     ok_text = "Yes, of course.",
     cancel_text = "No, it's ugly.",
     cancel_callback = function()
@@ -242,8 +242,8 @@ menu_items = {
 M = Menu:new{
     title = "Test Menu",
     item_table = menu_items,
-    width = 500,
-    height = 600,
+    width = Screen:scaleBySize(500),
+    height = Screen:scaleBySize(600),
 }
 
 -----------------------------------------------------
@@ -329,7 +329,7 @@ touch_menu = TouchMenu:new{
 -- input box widget
 -----------------------------------------------------
 local TestInputText = InputText:new{
-    width = 400,
+    width = Screen:scaleBySize(400),
     enter_callback = function() print("Entered") end,
     scroll = false,
     input_type = "number",