[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
2025-08-10 00:52:38 +00:00 · 2017-09-11 10:32:39 +02:00
parent 8babe57106
commit 9eb073a524
49 changed files with 270 additions and 244 deletions
--- 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
--- 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",
--- 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 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 HorizontalGroup = require("ui/widget/horizontalgroup")
 local BBoxWidget = require("ui/widget/bboxwidget")
-local HorizontalSpan = require("ui/widget/horizontalspan")
-local Button = require("ui/widget/button")
-local Math = require("optmath")
 local Blitbuffer = require("ffi/blitbuffer")
+local Button = require("ui/widget/button")
+local Event = require("ui/event")
+local FrameContainer = require("ui/widget/container/framecontainer")
+local Geom = require("ui/geometry")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local HorizontalGroup = require("ui/widget/horizontalgroup")
+local HorizontalSpan = require("ui/widget/horizontalspan")
+local LeftContainer = require("ui/widget/container/leftcontainer")
+local Math = require("optmath")
+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,
--- 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,

--- 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,
--- 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")

--- 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},
--- 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
--- 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(),
 }
--- 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,
--- 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",
--- 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
--- 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
--- 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,
                        }
--- 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,
--- 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)
        }
    }
 --]]
--- 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,
--- 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",
--- 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,
--- 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,
--- 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,
--- 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,
            }
        }
--- 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,
--- 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,
--- 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
-
--- 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
--- 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,
--- 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),
--- 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,
--- 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,
--- 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 InfoMessage = require("ui/widget/infomessage")
-local InputDialog = require("ui/widget/inputdialog")
-local NetworkMgr = require("ui/network/manager")
-local ListView = require("ui/widget/listview")
 local ImageWidget = require("ui/widget/imagewidget")
-local Widget = require("ui/widget/widget")
+local InfoMessage = require("ui/widget/infomessage")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local InputDialog = require("ui/widget/inputdialog")
+local LeftContainer = require("ui/widget/container/leftcontainer")
+local ListView = require("ui/widget/listview")
+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,
--- 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()
--- 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)
--- 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,
 }

--- 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,
--- 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,
--- 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,
--- 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,
--- 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 RenderText = require("ui/rendertext")
-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 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 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,
        }
--- 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{
--- 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,
--- 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{
--- 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",
                    })
--- 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,
--- 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,
                }
            }
--- 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{
--- 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,
            },
--- 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},
        }
--- 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",