Added Size module

2025-12-13 20:36:53 +01:00 · 2017-09-13 16:56:20 +02:00
parent 9eb073a524
commit a6be301695
43 changed files with 422 additions and 263 deletions
--- a/.ci/script.sh
+++ b/.ci/script.sh
@@ -17,7 +17,7 @@ unscaled_size_check=$(grep -nr --include=*.lua --exclude=koptoptions.lua --exclu
 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 -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.size in the following files:"
    echo "${unscaled_size_check}"
    echo "${unscaled_size_check_geom}"
    exit 1
--- a/frontend/apps/reader/skimtowidget.lua
+++ b/frontend/apps/reader/skimtowidget.lua
@@ -13,6 +13,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local ProgressWidget = require("ui/widget/progresswidget")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -29,11 +30,13 @@ local SkimToWidget = InputContainer:new{

 function SkimToWidget:init()
    self.medium_font_face = Font:getFace("ffont")
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    self.span = math.ceil(self.screen_height * 0.01)
    self.width = self.screen_width * 0.95
-    self.button_bordersize = Screen:scaleBySize(2)
+    self.button_bordersize = Size.border.button
+    -- the buttons need some kind of separation but maybe I should just implement
+    -- margin_left and margin_right…
    self.button_margin = self.button_bordersize
    self.button_width = self.screen_width * 0.16 - (2*self.button_margin)
    if Device:hasKeys() then
@@ -65,8 +68,8 @@ function SkimToWidget:init()
    self.page_count = self.document:getPageCount()

    self.skimto_title = FrameContainer:new{
-        padding = Screen:scaleBySize(5),
-        margin = Screen:scaleBySize(2),
+        padding = Size.padding.default,
+        margin = Size.margin.default,
        bordersize = 0,
        TextWidget:new{
            text = self.dialog_title,
@@ -91,8 +94,8 @@ function SkimToWidget:init()
    table.insert(self.skimto_container, vertical_group)

    self.skimto_progress = FrameContainer:new{
-        padding = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        padding = Size.padding.button,
+        margin = Size.margin.small,
        bordersize = 0,
        self.skimto_container
    }
@@ -100,7 +103,7 @@ function SkimToWidget:init()
    self.skimto_line = LineWidget:new{
        dimen = Geom:new{
            w = self.width,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }
    self.skimto_bar = OverlapGroup:new{
@@ -196,8 +199,8 @@ function SkimToWidget:init()
    table.insert(vertical_group_control,padding_span)

    self.skimto_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(5),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -224,7 +227,7 @@ function SkimToWidget:init()
        },
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
+            padding = Size.padding.default,
            self.skimto_frame,
        }
    }
@@ -250,12 +253,6 @@ function SkimToWidget:update()
    table.insert(vertical_group, progress_bar)
    table.insert(self.skimto_container, vertical_group)

-    self.skimto_progress = FrameContainer:new{
-        padding = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
-        bordersize = 0,
-        self.skimto_container
-    }
    local current_page_text = Button:new{
        text = self.curr_page,
        bordersize = 0,
@@ -285,8 +282,8 @@ function SkimToWidget:update()
    table.insert(vertical_group_control,padding_span)

    self.skimto_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(5),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -313,7 +310,6 @@ function SkimToWidget:update()
        },
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
            self.skimto_frame,
        }
    }
--- a/frontend/ui/size.lua
+++ b/frontend/ui/size.lua
@@ -0,0 +1,96 @@
+--[[--
+This module provides a standardized set of sizes for use in widgets.
+
+There are values for borders, margins, paddings, radii, and lines. Have a look
+at the code for full details. If you are considering to deviate from one of the
+defaults, please take a second to consider:
+
+1. Why you want to differ in the first place. We consciously strive toward
+   consistency in the UI, which is typically valued higher than one pixel more
+   or less in a specific context.
+2. If there really isn't anything close to what you want, whether it should be
+   added to the arsenal of default sizes rather than as a local exception.
+
+@usage
+    local Size = require("ui/size")
+    local frame -- just an example widget
+    frame = FrameContainer:new{
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
+        padding = Size.padding.default,
+        margin = Size.margin.default,
+        VerticalGroup:new{
+            -- etc
+        }
+    }
+]]
+
+local dbg = require("dbg")
+local Screen = require("device").screen
+
+local Size = {
+    border = {
+        default = Screen:scaleBySize(2),
+        thin = Screen:scaleBySize(1),
+        button = Screen:scaleBySize(2),
+        window = Screen:scaleBySize(2),
+    },
+    margin = {
+        default = Screen:scaleBySize(5),
+        tiny = Screen:scaleBySize(1),
+        small = Screen:scaleBySize(2),
+        title = Screen:scaleBySize(2),
+        button = 0,
+    },
+    padding = {
+        default = Screen:scaleBySize(5),
+        tiny = Screen:scaleBySize(1),
+        small = Screen:scaleBySize(2),
+        large = Screen:scaleBySize(10),
+        button = Screen:scaleBySize(2),
+        fullscreen = Screen:scaleBySize(15),
+    },
+    radius = {
+        default = Screen:scaleBySize(2),
+        window = Screen:scaleBySize(7),
+        button = Screen:scaleBySize(15),
+    },
+    line = {
+        thin = Screen:scaleBySize(0.5),
+        medium = Screen:scaleBySize(1),
+        thick = Screen:scaleBySize(1.5),
+    },
+    item = {
+        height_default = Screen:scaleBySize(30),
+        height_large = Screen:scaleBySize(50),
+    },
+    span = {
+        horizontal_default = Screen:scaleBySize(10),
+        horizontal_small = Screen:scaleBySize(5),
+        vertical_default = Screen:scaleBySize(2),
+        vertical_large = Screen:scaleBySize(5),
+    },
+}
+
+if dbg.is_on then
+    local mt = {
+        __index = function(t, k)
+            local prop_value = rawget(t, k)
+            local prop_exists = prop_value ~= nil
+            if not prop_exists then
+                local warning = rawget(t, "_name") and string.format("Size.%s.%s", rawget(t, "_name"), k)
+                                or string.format("Size.%s", k)
+                error("Size: this property does not exist: " .. warning)
+            end
+            assert(prop_exists)
+            return prop_value
+        end
+    }
+    setmetatable(Size, mt)
+    for el, table in pairs(Size) do
+        table._name = el
+        setmetatable(Size[el], mt)
+    end
+end
+
+return Size
--- a/frontend/ui/widget/bboxwidget.lua
+++ b/frontend/ui/widget/bboxwidget.lua
@@ -8,13 +8,13 @@ local Event = require("ui/event")
 local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local Math = require("optmath")
+local Size = require("ui/size")
 local UIManager = require("ui/uimanager")
-local Screen = Device.screen

 local BBoxWidget = InputContainer:new{
    page_bbox = nil,
    screen_bbox = nil,
-    linesize = Screen:scaleBySize(2),
+    linesize = Size.line.thick,
    fine_factor = 10,
    dimen = Geom:new(),
 }
--- a/frontend/ui/widget/bookstatuswidget.lua
+++ b/frontend/ui/widget/bookstatuswidget.lua
@@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local ProgressWidget = require("ui/widget/progresswidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local TimeVal = require("ui/timeval")
@@ -38,7 +39,7 @@ local stats_book = {}
    ["modified"] = "24.01.2016"
 },]]
 local BookStatusWidget = InputContainer:new{
-    padding = Screen:scaleBySize(15),
+    padding = Size.padding.fullscreen,
    settings = nil,
    thumbnail = nil,
    props = nil,
@@ -118,7 +119,7 @@ function BookStatusWidget:getStatusContent(width)
    return VerticalGroup:new{
        align = "left",
        OverlapGroup:new{
-            dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) },
+            dimen = Geom:new{ w = width, h = Size.item.height_default },
            CloseButton:new{ window = self },
        },
        self:genBookInfoGroup(),
@@ -132,7 +133,7 @@ function BookStatusWidget:getStatusContent(width)
 end

 function BookStatusWidget:genHeader(title)
-    local width, height = Screen:getWidth(), Screen:scaleBySize(35)
+    local width, height = Screen:getWidth(), Size.item.height_default

    local header_title = TextWidget:new{
        text = title,
@@ -148,13 +149,13 @@ function BookStatusWidget:genHeader(title)
            background = Blitbuffer.gray(0.2),
            dimen = Geom:new{
                w = line_width,
-                h = 2,
+                h = Size.line.thick,
            }
        }
    }

    return VerticalGroup:new{
-        VerticalSpan:new{ width = Screen:scaleBySize(25) },
+        VerticalSpan:new{ width = Size.item.height_default },
        HorizontalGroup:new{
            align = "center",
            padding_span,
@@ -165,7 +166,7 @@ function BookStatusWidget:genHeader(title)
            line_container,
            padding_span,
        },
-        VerticalSpan:new{ width = Screen:scaleBySize(5) },
+        VerticalSpan:new{ width = Size.span.vertical_large },
    }
 end

@@ -246,7 +247,7 @@ function BookStatusWidget:genBookInfoGroup()
    local text_author = TextWidget:new{
        text = self.props.authors,
        face = self.small_font_face,
-        padding = Screen:scaleBySize(2),
+        padding = Size.padding.default
    }
    table.insert(book_meta_info_group,
        CenterContainer:new{
@@ -386,19 +387,19 @@ end
 function BookStatusWidget:genSummaryGroup(width)
    local height
    if Screen:getScreenMode() == "landscape" then
-        height = Screen:scaleBySize(60)
+        height = Screen:scaleBySize(80)
    else
-        height = Screen:scaleBySize(130)
+        height = Screen:scaleBySize(160)
    end

-    local text_padding = Screen:scaleBySize(5)
+    local text_padding = Size.padding.default
    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 = Screen:scaleBySize(2),
+        bordersize = Size.border.default,
        focused = false,
        padding = text_padding,
        parent = self,
@@ -406,7 +407,7 @@ function BookStatusWidget:genSummaryGroup(width)
    }

    return VerticalGroup:new{
-        VerticalSpan:new{ width = Screen:scaleBySize(5) },
+        VerticalSpan:new{ width = Size.span.vertical_large },
        CenterContainer:new{
            dimen = Geom:new{ w = width, h = height },
            self.input_note
@@ -508,7 +509,7 @@ end

 function BookStatusWidget:onSwitchFocus(inputbox)
    self.note_dialog = InputDialog:new{
-        title = "Note",
+        title = _("Review"),
        input = self.input_note:getText(),
        input_hint = "",
        input_type = "text",
@@ -523,7 +524,7 @@ function BookStatusWidget:onSwitchFocus(inputbox)
                    end,
                },
                {
-                    text = _("OK"),
+                    text = _("Save review"),
                    is_enter_default = true,
                    callback = function()
                        self.input_note:setText(self.note_dialog:getInputText())
--- a/frontend/ui/widget/button.lua
+++ b/frontend/ui/widget/button.lua
@@ -24,10 +24,10 @@ local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 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
@@ -36,10 +36,10 @@ local Button = InputContainer:new{
    callback = nil,
    enabled = true,
    margin = 0,
-    bordersize = Screen:scaleBySize(3),
+    bordersize = Size.border.button,
    background = Blitbuffer.COLOR_WHITE,
-    radius = Screen:scaleBySize(15),
-    padding = Screen:scaleBySize(2),
+    radius = Size.radius.button,
+    padding = Size.padding.button,
    width = nil,
    max_width = nil,
    text_font_face = "cfont",
--- a/frontend/ui/widget/buttondialog.lua
+++ b/frontend/ui/widget/buttondialog.lua
@@ -6,6 +6,7 @@ local FrameContainer = require("ui/widget/container/framecontainer")
 local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local UIManager = require("ui/uimanager")
 local _ = require("gettext")
 local Screen = require("device").screen
@@ -42,9 +43,9 @@ function ButtonDialog:init()
                show_parent = self,
            },
            background = Blitbuffer.COLOR_WHITE,
-            bordersize = Screen:scaleBySize(2),
-            radius = Screen:scaleBySize(7),
-            padding = Screen:scaleBySize(2),
+            bordersize = Size.border.window,
+            radius = Size.radius.window,
+            padding = Size.padding.button,
        }
    }
 end
--- a/frontend/ui/widget/buttondialogtitle.lua
+++ b/frontend/ui/widget/buttondialogtitle.lua
@@ -8,6 +8,7 @@ local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local UIManager = require("ui/uimanager")
@@ -42,12 +43,13 @@ function ButtonDialogTitle:init()
            }
        }
    end
+    local vertical_span = VerticalSpan:new{ width = Size.span.vertical_default }
    self[1] = CenterContainer:new{
        dimen = Screen:getSize(),
        FrameContainer:new{
            VerticalGroup:new{
                align = "center",
-                VerticalSpan:new{ width = Screen:scaleBySize(2) },
+                vertical_span,
                TextBoxWidget:new{
                    text = self.title,
                    width = Screen:getWidth() * 0.8 ,
@@ -55,14 +57,14 @@ function ButtonDialogTitle:init()
                    bold = true,
                    alignment = self.title_align or "left",
                },
-                VerticalSpan:new{ width = Screen:scaleBySize(2) },
+                vertical_span,
                LineWidget:new{
                    dimen = Geom:new{
                        w = Screen:getWidth() * 0.9,
-                        h = Screen:scaleBySize(1),
+                        h = Size.line.medium,
                    }
                },
-                VerticalSpan:new{ width = Screen:scaleBySize(2) },
+                vertical_span,
                ButtonTable:new{
                    width = Screen:getWidth() * 0.9,
                    buttons = self.buttons,
@@ -70,9 +72,9 @@ function ButtonDialogTitle:init()
                },
            },
            background = Blitbuffer.COLOR_WHITE,
-            bordersize = Screen:scaleBySize(2),
-            radius = Screen:scaleBySize(7),
-            padding = Screen:scaleBySize(2),
+            bordersize = Size.border.window,
+            radius = Size.radius.window,
+            padding = Size.padding.button,
        }
    }
 end
--- a/frontend/ui/widget/buttontable.lua
+++ b/frontend/ui/widget/buttontable.lua
@@ -4,6 +4,7 @@ local Device = require("device")
 local FocusManager = require("ui/widget/focusmanager")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local LineWidget = require("ui/widget/linewidget")
+local Size = require("ui/size")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
 local Geom = require("ui/geometry")
@@ -17,8 +18,8 @@ local ButtonTable = FocusManager:new{
            {text="Cancel", enabled=false, callback=nil},
        },
    },
-    sep_width = Screen:scaleBySize(1),
-    padding = Screen:scaleBySize(2),
+    sep_width = Size.line.medium,
+    padding = Size.padding.button,

    zero_sep = false,
    button_font_face = "cfont",
@@ -84,7 +85,7 @@ end

 function ButtonTable:addHorizontalSep()
    table.insert(self.container,
-                 VerticalSpan:new{ width = Screen:scaleBySize(2) })
+                 VerticalSpan:new{ width = Size.span.vertical_default })
    table.insert(self.container, LineWidget:new{
        background = Blitbuffer.COLOR_GREY,
        dimen = Geom:new{
@@ -93,7 +94,7 @@ function ButtonTable:addHorizontalSep()
        }
    })
    table.insert(self.container,
-                 VerticalSpan:new{ width = Screen:scaleBySize(2) })
+                 VerticalSpan:new{ width = Size.span.vertical_default })
 end

 function ButtonTable:onSelectByKeyPress()
--- a/frontend/ui/widget/configdialog.lua
+++ b/frontend/ui/widget/configdialog.lua
@@ -16,6 +16,7 @@ local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local RightContainer = require("ui/widget/container/rightcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local ToggleSwitch = require("ui/widget/toggleswitch")
 local UIManager = require("ui/uimanager")
@@ -145,7 +146,7 @@ function ConfigOption:init()
    local default_item_font_size = 16
    local default_items_spacing = 30
    local default_option_height = 50
-    local default_option_padding = 15
+    local default_option_padding = Size.padding.large
    local max_option_name_width = 0
    for c = 1, #self.options do
        local name_font_face = self.options[c].name_font_face and self.options[c].name_font_face or "cfont"
@@ -156,13 +157,13 @@ function ConfigOption:init()
        }:getSize().w
        max_option_name_width = math.max(max_option_name_width, option_name_width)
    end
-    local default_name_align_right = math.max((max_option_name_width + Screen:scaleByDPI(10))/Screen:getWidth(), 0.33)
+    local default_name_align_right = math.max((max_option_name_width + Screen:scaleBySize(10))/Screen:getWidth(), 0.33)
    local default_item_align_center = 1 - default_name_align_right

    -- fill vertical group of config tab
    local vertical_group = VerticalGroup:new{}
    table.insert(vertical_group, VerticalSpan:new{
-        width = Screen:scaleBySize(default_option_padding),
+        width = default_option_padding,
    })
    -- @TODO restore setting when there are more advanced settings
    --local show_advanced = G_reader_settings:readSetting("show_advanced") or false
@@ -177,7 +178,7 @@ function ConfigOption:init()
            local item_font_face = self.options[c].item_font_face and self.options[c].item_font_face or "cfont"
            local item_font_size = self.options[c].item_font_size and self.options[c].item_font_size or default_item_font_size
            local option_height = Screen:scaleBySize(self.options[c].height and self.options[c].height or default_option_height)
-            local item_spacing_with = self.options[c].spacing and self.options[c].spacing or default_items_spacing
+            local item_spacing_width = Screen:scaleBySize(self.options[c].spacing and self.options[c].spacing or default_items_spacing)
            local enabled = true
            if self.options[c].enabled_func then
                enabled = self.options[c].enabled_func(self.config.configurable)
@@ -272,7 +273,7 @@ function ConfigOption:init()
                local max_item_spacing = (Screen:getWidth() * item_align -
                        middle_item:getSize().w * items_count) / items_count
                local items_spacing = HorizontalSpan:new{
-                    width = math.min(max_item_spacing, Screen:scaleBySize(item_spacing_with))
+                    width = math.min(max_item_spacing, item_spacing_width)
                }
                for d = 1, #self.options[c].item_text do
                    local option_item
@@ -283,7 +284,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 = Screen:scaleBySize(3),
+                            padding = Size.padding.button,
                            color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                            enabled = enabled,
                        }
@@ -294,7 +295,7 @@ function ConfigOption:init()
                                face = Font:getFace(item_font_face, item_font_size),
                                fgcolor = Blitbuffer.gray(enabled and 1.0 or 0.5),
                            },
-                            padding = -3,
+                            padding = -Size.padding.button,
                            color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                            enabled = enabled,
                        }
@@ -326,7 +327,7 @@ function ConfigOption:init()
                local max_item_spacing = (Screen:getWidth() * item_align -
                        first_item:getSize().w * items_count) / items_count
                local items_spacing = HorizontalSpan:new{
-                    width = math.min(max_item_spacing, Screen:scaleBySize(item_spacing_with))
+                    width = math.min(max_item_spacing, item_spacing_width)
                }
                for d = 1, #self.options[c].item_icons do
                    local option_item = OptionIconItem:new{
@@ -334,7 +335,7 @@ function ConfigOption:init()
                            file = self.options[c].item_icons[d],
                            dim = not enabled,
                        },
-                        padding = -2,
+                        padding = -Size.padding.button,
                        color = d == current_item and Blitbuffer.gray(enabled and 1.0 or 0.5) or Blitbuffer.COLOR_WHITE,
                        enabled = enabled,
                    }
@@ -412,8 +413,8 @@ local MenuBar = FrameContainer:new{
    background = Blitbuffer.COLOR_WHITE,
 }
 function MenuBar:init()
-    local icon_sep_width = Screen:scaleBySize(2)
-    local line_thickness = Screen:scaleBySize(2)
+    local icon_sep_width = Size.padding.button
+    local line_thickness = Size.line.thick
    local config_options = self.config_dialog.config_options
    local menu_items = {}
    local icons_width = 0
--- a/frontend/ui/widget/confirmbox.lua
+++ b/frontend/ui/widget/confirmbox.lua
@@ -29,6 +29,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -45,8 +46,8 @@ local ConfirmBox = InputContainer:new{
    ok_callback = function() end,
    cancel_callback = function() end,
    other_buttons = nil,
-    margin = Screen:scaleBySize(5),
-    padding = Screen:scaleBySize(5),
+    margin = Size.margin.default,
+    padding = Size.padding.default,
 }

 function ConfirmBox:init()
@@ -73,7 +74,7 @@ function ConfirmBox:init()
            file = "resources/info-i.png",
            scale_for_dpi = true,
        },
-        HorizontalSpan:new{ width = Screen:scaleBySize(10) },
+        HorizontalSpan:new{ width = Size.span.horizontal_default },
        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 = Screen:scaleBySize(1),
+            bordersize = Size.border.default,
            margin = 0,
-            padding = Screen:scaleBySize(1)
+            padding = Size.padding.default
        }
    }
 --]]
--- 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 = Screen:scaleBySize(8),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -19,18 +19,17 @@ Example:
 --]]

 local Blitbuffer = require("ffi/blitbuffer")
-local Device = require("device")
 local Geom = require("ui/geometry")
+local Size = require("ui/size")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
-local Screen = Device.screen

 local FrameContainer = WidgetContainer:new{
    background = nil,
    color = Blitbuffer.COLOR_BLACK,
    margin = 0,
    radius = 0,
-    bordersize = Screen:scaleBySize(2),
-    padding = Screen:scaleBySize(5),
+    bordersize = Size.border.window,
+    padding = Size.padding.default,
    width = nil,
    height = nil,
    invert = false,
--- a/frontend/ui/widget/container/underlinecontainer.lua
+++ b/frontend/ui/widget/container/underlinecontainer.lua
@@ -6,12 +6,12 @@ a line under its child node.

 local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
+local Size = require("ui/size")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
-local Screen = require("device").screen

 local UnderlineContainer = WidgetContainer:new{
-    linesize = Screen:scaleBySize(2),
-    padding = Screen:scaleBySize(1),
+    linesize = Size.line.thick,
+    padding = Size.padding.tiny,
    -- TODO: shouldn't this default to black instead?
    color = Blitbuffer.COLOR_WHITE,
    vertical_align = "top",
@@ -25,7 +25,7 @@ function UnderlineContainer:getContentSize()
    local contentSize = self[1]:getSize()
    return Geom:new{
        w = contentSize.w,
-        h = contentSize.h + self.linesize + self.padding
+        h = contentSize.h + self.linesize + 2*self.padding
    }
 end

--- a/frontend/ui/widget/datewidget.lua
+++ b/frontend/ui/widget/datewidget.lua
@@ -12,6 +12,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local NumberPickerWidget = require("ui/widget/numberpickerwidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
@@ -34,8 +35,8 @@ local DateWidget = InputContainer:new{
 function DateWidget:init()
    self.medium_font_face = Font:getFace("ffont")
    self.light_bar = {}
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    self.width = self.screen_width * 0.95
    if Device:hasKeys() then
        self.key_events = {
@@ -105,8 +106,8 @@ function DateWidget:update()
    }

    local date_title = FrameContainer:new{
-        padding = Screen:scaleBySize(5),
-        margin = Screen:scaleBySize(2),
+        padding = Size.padding.default,
+        margin = Size.margin.default,
        bordersize = 0,
        TextWidget:new{
            text = self.title_text,
@@ -118,7 +119,7 @@ function DateWidget:update()
    local date_line = LineWidget:new{
        dimen = Geom:new{
            w = self.width,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }
    local date_bar = OverlapGroup:new{
@@ -159,8 +160,8 @@ function DateWidget:update()
    }

    self.date_frame = FrameContainer:new{
-        radius = 5,
-        bordersize = 3,
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -188,7 +189,7 @@ function DateWidget:update()
        },
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
+            padding = Size.padding.default,
            self.date_frame,
        }
    }
--- a/frontend/ui/widget/dictquicklookup.lua
+++ b/frontend/ui/widget/dictquicklookup.lua
@@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local ScrollTextWidget = require("ui/widget/scrolltextwidget")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -44,10 +45,10 @@ local DictQuickLookup = InputContainer:new{
    -- box of highlighted word, quick lookup window tries to not hide the word
    word_box = nil,

-    title_padding = Screen:scaleBySize(5),
-    title_margin = Screen:scaleBySize(2),
-    word_padding = Screen:scaleBySize(5),
-    word_margin = Screen:scaleBySize(2),
+    title_padding = Size.padding.default,
+    title_margin = Size.margin.title,
+    word_padding = Size.padding.default,
+    word_margin = Size.margin.default,
    -- alt padding/margin for wiki to compensate for reduced font size
    wiki_word_padding = Screen:scaleBySize(7),
    wiki_word_margin = Screen:scaleBySize(3),
@@ -325,7 +326,7 @@ function DictQuickLookup:update()
        buttons = {
            {
                {
-                    text = "<<",
+                    text = "◁◁",
                    enabled = self:isPrevDictAvaiable(),
                    callback = function()
                        self:changeToPrevDict()
@@ -344,7 +345,7 @@ function DictQuickLookup:update()
                    end,
                },
                {
-                    text = ">>",
+                    text = "▷▷",
                    enabled = self:isNextDictAvaiable(),
                    callback = function()
                        self:changeToNextDict()
@@ -404,7 +405,7 @@ function DictQuickLookup:update()
    local title_bar = LineWidget:new{
        dimen = Geom:new{
            w = button_table:getSize().w + self.button_padding,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }

@@ -418,8 +419,8 @@ function DictQuickLookup:update()
    }

    self.dict_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(8),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -458,7 +459,7 @@ function DictQuickLookup:update()
        dimen = self.region,
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
+            padding = Size.padding.default,
            self.dict_frame,
        }
    }
--- a/frontend/ui/widget/frontlightwidget.lua
+++ b/frontend/ui/widget/frontlightwidget.lua
@@ -12,6 +12,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 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")
@@ -31,8 +32,8 @@ local FrontLightWidget = InputContainer:new{
 function FrontLightWidget:init()
    self.medium_font_face = Font:getFace("ffont")
    self.light_bar = {}
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    self.span = math.ceil(self.screen_height * 0.01)
    self.width = self.screen_width * 0.95
    local powerd = Device:getPowerDevice()
@@ -51,9 +52,8 @@ function FrontLightWidget:init()

    self.fl_prog_button = Button:new{
        text = "",
-        bordersize = Screen:scaleBySize(3),
        radius = 0,
-        margin = Screen:scaleBySize(1),
+        margin = Size.margin.tiny,
        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 = Screen:scaleBySize(1),
+                margin = Size.margin.tiny,
                preselect = true,
                width = self.button_width,
                callback = function()
@@ -145,8 +145,7 @@ function FrontLightWidget:setProgress(num, step)
    end
    local button_minus = Button:new{
        text = "-1",
-        bordersize = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        radius = 0,
        enabled = enable_button_minus,
        width = self.screen_width * 0.20,
@@ -155,8 +154,7 @@ function FrontLightWidget:setProgress(num, step)
    }
    local button_plus = Button:new{
        text = "+1",
-        bordersize = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        radius = 0,
        enabled = enable_button_plus,
        width = self.screen_width * 0.20,
@@ -171,8 +169,7 @@ function FrontLightWidget:setProgress(num, step)
    }
    local button_min = Button:new{
        text = _("Min"),
-        bordersize = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        radius = 0,
        enabled = true,
        width = self.screen_width * 0.20,
@@ -181,8 +178,7 @@ function FrontLightWidget:setProgress(num, step)
    }
    local button_max = Button:new{
        text = _("Max"),
-        bordersize = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        radius = 0,
        enabled = true,
        width = self.screen_width * 0.20,
@@ -191,8 +187,7 @@ function FrontLightWidget:setProgress(num, step)
    }
    local button_toggle = Button:new{
        text = _("Toggle"),
-        bordersize = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        radius = 0,
        enabled = true,
        width = self.screen_width * 0.20,
@@ -234,8 +229,7 @@ end
 function FrontLightWidget:update()
    -- header
    self.light_title = FrameContainer:new{
-        padding = Screen:scaleBySize(5),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.title,
        bordersize = 0,
        TextWidget:new{
            text = _("Frontlight"),
@@ -245,8 +239,8 @@ function FrontLightWidget:update()
        },
    }
    local light_level = FrameContainer:new{
-        padding = Screen:scaleBySize(2),
-        margin = Screen:scaleBySize(2),
+        padding = Size.padding.button,
+        margin = Size.margin.small,
        bordersize = 0,
        self:generateProgressGroup(self.screen_width * 0.95, self.screen_height * 0.20,
            self.fl_cur, self.one_step)
@@ -254,7 +248,7 @@ function FrontLightWidget:update()
    local light_line = LineWidget:new{
        dimen = Geom:new{
            w = self.width,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }
    self.light_bar = OverlapGroup:new{
@@ -266,8 +260,8 @@ function FrontLightWidget:update()
        CloseButton:new{ window = self, },
    }
    self.light_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(5),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -293,7 +287,6 @@ function FrontLightWidget:update()
        },
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
            self.light_frame,
        }
    }
--- a/frontend/ui/widget/imageviewer.lua
+++ b/frontend/ui/widget/imageviewer.lua
@@ -15,6 +15,7 @@ local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
@@ -43,10 +44,10 @@ local ImageViewer = InputContainer:new{
    rotated = false,

    title_face = Font:getFace("x_smalltfont"),
-    title_padding = Screen:scaleBySize(5),
-    title_margin = Screen:scaleBySize(2),
-    image_padding = Screen:scaleBySize(2),
-    button_padding = Screen:scaleBySize(14),
+    title_padding = Size.padding.default,
+    title_margin = Size.margin.title,
+    image_padding = Size.margin.small,
+    button_padding = Size.padding.large,

    -- sensitivity for hold (trigger full refresh) vs pan (move image)
    pan_threshold = Screen:scaleBySize(5),
@@ -196,7 +197,7 @@ function ImageViewer:update()
        title_sep = LineWidget:new{
            dimen = Geom:new{
                w = self.width,
-                h = Screen:scaleBySize(2),
+                h = Size.line.thick,
            }
        }
        -- adjust height available to our image
@@ -268,7 +269,7 @@ function ImageViewer:update()
        dimen = self.region,
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
+            padding = Size.padding.default,
            self.main_frame,
        }
    }
--- a/frontend/ui/widget/infomessage.lua
+++ b/frontend/ui/widget/infomessage.lua
@@ -34,6 +34,7 @@ local HorizontalSpan = require("ui/widget/horizontalspan")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local ScrollTextWidget = require("ui/widget/scrolltextwidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local UIManager = require("ui/uimanager")
 local WidgetContainer = require("ui/widget/container/widgetcontainer")
@@ -129,12 +130,11 @@ function InfoMessage:init()
    self[1] = CenterContainer:new{
        dimen = Screen:getSize(),
        FrameContainer:new{
-            margin = Screen:scaleBySize(2),
            background = Blitbuffer.COLOR_WHITE,
            HorizontalGroup:new{
                align = "center",
                image_widget,
-                HorizontalSpan:new{ width = (self.show_icon and Screen:scaleBySize(10) or 0) },
+                HorizontalSpan:new{ width = (self.show_icon and Size.span.horizontal_default or 0) },
                text_widget,
            }
        }
--- a/frontend/ui/widget/inputdialog.lua
+++ b/frontend/ui/widget/inputdialog.lua
@@ -57,6 +57,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local InputText = require("ui/widget/inputtext")
 local LineWidget = require("ui/widget/linewidget")
 local RenderText = require("ui/rendertext")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -82,11 +83,11 @@ local InputDialog = InputContainer:new{
    description_face = Font:getFace("x_smallinfofont"),
    input_face = Font:getFace("x_smallinfofont"),

-    title_padding = Screen:scaleBySize(5),
-    title_margin = Screen:scaleBySize(2),
-    input_padding = Screen:scaleBySize(10),
-    input_margin = Screen:scaleBySize(10),
-    button_padding = Screen:scaleBySize(14),
+    title_padding = Size.padding.default,
+    title_margin = Size.margin.title,
+    input_padding = Size.padding.large,
+    input_margin = Size.margin.default,
+    button_padding = Size.padding.large,
 }

 function InputDialog:init()
@@ -158,13 +159,13 @@ function InputDialog:init()

    self.title_bar = LineWidget:new{
        dimen = Geom:new{
-            w = self.button_table:getSize().w + self.button_padding,
-            h = Screen:scaleBySize(2),
+            w = self.button_table:getSize().w + 2*self.button_padding,
+            h = Size.line.thick,
        }
    }

    self.dialog_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(8),
+        radius = Size.radius.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
--- a/frontend/ui/widget/keyvaluepage.lua
+++ b/frontend/ui/widget/keyvaluepage.lua
@@ -35,6 +35,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local RenderText = require("ui/rendertext")
+local Size = require("ui/size")
 local TextViewer = require("ui/widget/textviewer")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
@@ -74,7 +75,7 @@ function KeyValueTitle:init()
    })
    -- page count and separation line
    self.page_cnt = FrameContainer:new{
-        padding = Screen:scaleBySize(4),
+        padding = Size.padding.default,
        margin = 0,
        bordersize = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -87,16 +88,16 @@ function KeyValueTitle:init()
        },
    }
    self.title_bottom = OverlapGroup:new{
-        dimen = { w = self.width, h = Screen:scaleBySize(2) },
+        dimen = { w = self.width, h = Size.line.thick },
        LineWidget:new{
-            dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(2) },
+            dimen = Geom:new{ w = self.width, h = Size.line.thick },
            background = Blitbuffer.COLOR_GREY,
            style = "solid",
        },
        self.page_cnt,
    }
    table.insert(self, self.title_bottom)
-    table.insert(self, VerticalSpan:new{ width = Screen:scaleBySize(5) })
+    table.insert(self, VerticalSpan:new{ width = Size.span.vertical_large })
 end

 function KeyValueTitle:setPageCount(curr, total)
@@ -139,7 +140,7 @@ function KeyValueItem:init()
        }
    end

-    local frame_padding = Screen:scaleBySize(8)
+    local frame_padding = Size.padding.default
    local frame_internal_width = self.width - frame_padding * 2
    local key_w = frame_internal_width / 2
    local value_w = frame_internal_width / 2
@@ -321,9 +322,9 @@ function KeyValuePage:init()
        self.page_info,
    }

-    local padding = Screen:scaleBySize(10)
+    local padding = Size.padding.large
    self.item_width = self.dimen.w - 2 * padding
-    self.item_height = Screen:scaleBySize(30)
+    self.item_height = Size.item.height_default
    -- setup title bar
    self.title_bar = KeyValueTitle:new{
        title = self.title,
@@ -418,7 +419,7 @@ function KeyValuePage:_populateItems()
                    background = Blitbuffer.COLOR_LIGHT_GREY,
                    dimen = Geom:new{
                        w = self.item_width,
-                        h = Screen:scaleBySize(2)
+                        h = Size.line.thick
                    },
                    style = "solid",
                })
--- a/frontend/ui/widget/linkbox.lua
+++ b/frontend/ui/widget/linkbox.lua
@@ -3,6 +3,7 @@ local Device = require("device")
 local Geom = require("ui/geometry")
 local GestureRange = require("ui/gesturerange")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local UIManager = require("ui/uimanager")
 local Screen = Device.screen

@@ -10,7 +11,7 @@ local LinkBox = InputContainer:new{
    box = nil,
    color = Blitbuffer.COLOR_GREY,
    radius = 0,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.line.medium,
 }

 function LinkBox:init()
--- a/frontend/ui/widget/listview.lua
+++ b/frontend/ui/widget/listview.lua
@@ -33,17 +33,17 @@ Example:
    }

 Note that ListView is created mainly to be used as a building block for other
-widgets like NetworkSetting, so they can share the same pagination code.
+widgets like @{ui.widget.networksetting|NetworkSetting}, so they can share the same pagination code.
 ]]

-local InputContainer = require("ui/widget/container/inputcontainer")
-local FrameContainer = require("ui/widget/container/framecontainer")
-local VerticalGroup = require("ui/widget/verticalgroup")
-local GestureRange = require("ui/gesturerange")
 local Blitbuffer = require("ffi/blitbuffer")
 local Device = require("device")
-local Screen = Device.screen
+local FrameContainer = require("ui/widget/container/framecontainer")
 local Geom = require("ui/geometry")
+local GestureRange = require("ui/gesturerange")
+local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
+local VerticalGroup = require("ui/widget/verticalgroup")

 local ListView = InputContainer:new{
    width = nil,
@@ -68,7 +68,7 @@ function ListView:init()
        }
    end

-    local padding = self.padding or Screen:scaleBySize(10)
+    local padding = self.padding or Size.padding.large
    self.item_height = self.item_height or self.items[1]:getSize().h
    self.item_width = self.dimen.w - 2 * padding
    self.items_per_page = math.floor(self.height / self.item_height)
--- a/frontend/ui/widget/logindialog.lua
+++ b/frontend/ui/widget/logindialog.lua
@@ -1,9 +1,14 @@
+--[[--
+This widget displays a login dialog with a username and password.
+]]
+
 local Blitbuffer = require("ffi/blitbuffer")
 local CenterContainer = require("ui/widget/container/centercontainer")
 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 Size = require("ui/size")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local _ = require("gettext")
@@ -41,7 +46,7 @@ function LoginDialog:init()
    }

    self.dialog_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(8),
+        radius = Size.radius.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
--- a/frontend/ui/widget/menu.lua
+++ b/frontend/ui/widget/menu.lua
@@ -1,3 +1,7 @@
+--[[--
+Widget that displays a shortcut icon for menu item.
+--]]
+
 local Blitbuffer = require("ffi/blitbuffer")
 local BottomContainer = require("ui/widget/container/bottomcontainer")
 local Button = require("ui/widget/button")
@@ -16,6 +20,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local RenderText = require("ui/rendertext")
 local RightContainer = require("ui/widget/container/rightcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local UnderlineContainer = require("ui/widget/container/underlinecontainer")
@@ -29,13 +34,10 @@ local Input = Device.input
 local Screen = Device.screen
 local getMenuText = require("util").getMenuText

--[[
-Widget that displays a shortcut icon for menu item
--]]
 local ItemShortCutIcon = WidgetContainer:new{
    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
    key = nil,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.border.default,
    radius = 0,
    style = "square",
 }
@@ -245,13 +247,13 @@ function MenuItem:init()
        padding = 0,
        HorizontalGroup:new{
            align = "center",
-            HorizontalSpan:new{ width = Screen:scaleBySize(5) },
+            HorizontalSpan:new{ width = Size.span.horizontal_small },
            ItemShortCutIcon:new{
                dimen = shortcut_icon_dimen,
                key = self.shortcut,
                style = self.shortcut_style,
            },
-            HorizontalSpan:new{ width = Screen:scaleBySize(10) },
+            HorizontalSpan:new{ width = Size.span.horizontal_default },
            self._underline_container
        }
    }
@@ -335,7 +337,7 @@ local Menu = FocusManager:new{
    width = nil,
    -- height will be calculated according to item number if not given
    height = nil,
-    header_padding = Screen:scaleBySize(10),
+    header_padding = Size.padding.large,
    dimen = Geom:new{},
    item_table = {},
    item_shortcuts = {
@@ -477,7 +479,7 @@ function Menu:init()
    self.page_return_arrow:hide()
    self.return_button = HorizontalGroup:new{
        HorizontalSpan:new{
-            width = Screen:scaleBySize(5),
+            width = Size.span.horizontal_small,
        },
        self.page_return_arrow,
    }
--- a/frontend/ui/widget/multiconfirmbox.lua
+++ b/frontend/ui/widget/multiconfirmbox.lua
@@ -25,6 +25,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -42,8 +43,8 @@ local MultiConfirmBox = InputContainer:new{
    choice1_callback = function() end,
    choice2_callback = function() end,
    cancel_callback = function() end,
-    margin = Screen:scaleBySize(5),
-    padding = Screen:scaleBySize(5),
+    margin = Size.margin.default,
+    padding = Size.padding.default,
 }

 function MultiConfirmBox:init()
@@ -52,7 +53,7 @@ function MultiConfirmBox:init()
        ImageWidget:new{
            file = "resources/info-i.png"
        },
-        HorizontalSpan:new{ width = Screen:scaleBySize(10) },
+        HorizontalSpan:new{ width = Size.span.horizontal_default },
        TextBoxWidget:new{
            text = self.text,
            face = self.face,
--- a/frontend/ui/widget/multiinputdialog.lua
+++ b/frontend/ui/widget/multiinputdialog.lua
@@ -6,6 +6,7 @@ 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 Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -18,8 +19,8 @@ local MultiInputDialog = InputDialog:extend{
    field = {},
    field_hint = {},
    fields = {},
-    description_padding = Screen:scaleBySize(5),
-    description_margin = Screen:scaleBySize(2),
+    description_padding = Size.padding.default,
+    description_margin = Size.margin.small,
 }

 function MultiInputDialog:init()
@@ -84,8 +85,8 @@ function MultiInputDialog:init()
    })

    self.dialog_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(8),
-        bordersize = Screen:scaleBySize(3),
+        radius = Size.radius.window,
+        bordersize = Size.border.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
--- a/frontend/ui/widget/networksetting.lua
+++ b/frontend/ui/widget/networksetting.lua
@@ -48,6 +48,7 @@ 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 Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -119,7 +120,7 @@ function NetworkItem:init()
            wifi_icon_path,
            self.info.signal_quality + 25 - self.info.signal_quality % 25)
    end
-    local horizontal_space = HorizontalSpan:new{width = Screen:scaleBySize(8)}
+    local horizontal_space = HorizontalSpan:new{width = Size.span.horizontal_default}
    self.content_container = OverlapGroup:new{
        dimen = self.dimen:copy(),
        LeftContainer:new{
@@ -419,7 +420,7 @@ function NetworkSetting:init()
    self.popup = FrameContainer:new{
        background = Blitbuffer.COLOR_WHITE,
        padding = 0,
-        bordersize = Screen:scaleBySize(3),
+        bordersize = Size.border.window,
        VerticalGroup:new{
            align = "left",
            self.pagination,
--- a/frontend/ui/widget/notification.lua
+++ b/frontend/ui/widget/notification.lua
@@ -9,6 +9,7 @@ local Font = require("ui/font")
 local FrameContainer = require("ui/widget/container/framecontainer")
 local Geom = require("ui/geometry")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local Input = Device.input
@@ -18,8 +19,8 @@ local Notification = InputContainer:new{
    face = Font:getFace("x_smallinfofont"),
    text = "Null Message",
    timeout = nil,
-    margin = Screen:scaleBySize(5),
-    padding = Screen:scaleBySize(5),
+    margin = Size.margin.default,
+    padding = Size.padding.default,
 }

 function Notification:init()
--- a/frontend/ui/widget/numberpickerwidget.lua
+++ b/frontend/ui/widget/numberpickerwidget.lua
@@ -7,6 +7,7 @@ local Font = require("ui/font")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local TextWidget = require("ui/widget/textboxwidget")
 local RenderText = require("ui/rendertext")
+local Size = require("ui/size")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
@@ -14,7 +15,7 @@ local _ = require("gettext")
 local Screen = Device.screen

 local NumberPickerWidget = InputContainer:new{
-    spinner_face = Font:getFace("x_smalltfont",24),
+    spinner_face = Font:getFace("smalltfont"),
    precision = "%02d",
    width = nil,
    height = nil,
@@ -30,8 +31,8 @@ local NumberPickerWidget = InputContainer:new{
 }

 function NumberPickerWidget:init()
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    if self.width == nil then
        self.width = self.screen_width * 0.2
    end
@@ -45,11 +46,12 @@ function NumberPickerWidget:init()
 end

 function NumberPickerWidget:paintWidget()
-
+    local bordersize = Size.border.default
+    local margin = Size.margin.default
    local button_up = Button:new{
        text = "▲",
-        bordersize = 2,
-        margin = 2,
+        bordersize = bordersize,
+        margin = margin,
        radius = 0,
        text_font_size = 24,
        width = self.width,
@@ -71,8 +73,8 @@ function NumberPickerWidget:paintWidget()
    }
    local button_down = Button:new{
        text = "▼",
-        bordersize = 2,
-        margin = 2,
+        bordersize = bordersize,
+        margin = margin,
        radius = 0,
        text_font_size = 24,
        width = self.width,
@@ -127,7 +129,7 @@ function NumberPickerWidget:update()
    local widget_spinner = self:paintWidget()
    self.frame = FrameContainer:new{
        bordersize = 0,
-        padding = Screen:scaleBySize(5),
+        padding = Size.padding.default,
        CenterContainer:new{
            align = "center",
            dimen = Geom:new{
--- a/frontend/ui/widget/physicalkeyboard.lua
+++ b/frontend/ui/widget/physicalkeyboard.lua
@@ -8,6 +8,7 @@ local Geom = require("ui/geometry")
 local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local TopContainer = require("ui/widget/container/topcontainer")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -27,7 +28,7 @@ local PhysicalNumericKey = WidgetContainer:new{

    width = nil,
    height = nil,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.border.button,
    face = Font:getFace("infont"),
    pkey_face = Font:getFace("infont", 14),
 }
@@ -41,7 +42,7 @@ function PhysicalNumericKey:init()
        margin = 0,
        bordersize = self.bordersize,
        background = Blitbuffer.COLOR_WHITE,
-        radius = Screen:scaleBySize(5),
+        radius = Size.radius.default,
        padding = 0,
        CenterContainer:new{
            dimen = Geom:new{
@@ -69,10 +70,10 @@ end
 local PhysicalKeyboard = InputContainer:new{
    is_always_active = true,
    inputbox = nil,  -- expect ui/widget/inputtext instance
-    bordersize = Screen:scaleBySize(2),
-    padding = Screen:scaleBySize(2),
+    bordersize = Size.border.button,
+    padding = Size.padding.button,
    height = math.max(Screen:getWidth(), Screen:getHeight())*0.33,
-    key_padding = Screen:scaleBySize(6),
+    key_padding = Size.padding.default,
 }

 function PhysicalKeyboard:init()
@@ -124,7 +125,7 @@ end

 function PhysicalKeyboard:setupNumericMappingUI()
    local key_rows = VerticalGroup:new{}
-    local key_margin = Screen:scaleBySize(1)
+    local key_margin = Size.margin.tiny
    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/textboxwidget.lua
+++ b/frontend/ui/widget/textboxwidget.lua
@@ -16,6 +16,7 @@ local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
 local LineWidget = require("ui/widget/linewidget")
 local RenderText = require("ui/rendertext")
+local Size = require("ui/size")
 local TimeVal = require("ui/timeval")
 local Widget = require("ui/widget/widget")
 local logger = require("logger")
@@ -45,7 +46,7 @@ function TextBoxWidget:init()
    self.line_height_px = (1 + self.line_height) * self.face.size
    self.cursor_line = LineWidget:new{
        dimen = Geom:new{
-            w = Screen:scaleBySize(1),
+            w = Size.line.medium,
            h = self.line_height_px,
        }
    }
--- a/frontend/ui/widget/textviewer.lua
+++ b/frontend/ui/widget/textviewer.lua
@@ -1,5 +1,12 @@
--[[
-Display some text in scrollable view
+--[[--
+Displays some text in a scrollable view.
+
+@usage
+    local textviewer = TextViewer:new{
+        title = _("I can scroll!"),
+        text = _("I'll need to be longer than this example to scroll."),
+    }
+    UIManager:show(textviewer)
 ]]
 local Blitbuffer = require("ffi/blitbuffer")
 local ButtonTable = require("ui/widget/buttontable")
@@ -14,6 +21,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local ScrollTextWidget = require("ui/widget/scrolltextwidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -31,11 +39,11 @@ local TextViewer = InputContainer:new{

    title_face = Font:getFace("x_smalltfont"),
    text_face = Font:getFace("x_smallinfofont"),
-    title_padding = Screen:scaleBySize(5),
-    title_margin = Screen:scaleBySize(2),
-    text_padding = Screen:scaleBySize(10),
-    text_margin = Screen:scaleBySize(2),
-    button_padding = Screen:scaleBySize(14),
+    title_padding = Size.padding.default,
+    title_margin = Size.margin.title,
+    text_padding = Size.padding.large,
+    text_margin = Size.margin.small,
+    button_padding = Size.padding.large,
 }

 function TextViewer:init()
@@ -112,7 +120,7 @@ function TextViewer:init()
    local separator = LineWidget:new{
        dimen = Geom:new{
            w = self.width,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }

@@ -132,7 +140,7 @@ function TextViewer:init()
        buttons = self.buttons_table
    end
    local button_table = ButtonTable:new{
-        width = self.width - self.button_padding,
+        width = self.width - 2*self.button_padding,
        button_font_face = "cfont",
        button_font_size = 20,
        buttons = buttons,
@@ -158,7 +166,7 @@ function TextViewer:init()
    }

    self.frame = FrameContainer:new{
-        radius = Screen:scaleBySize(8),
+        radius = Size.radius.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
--- a/frontend/ui/widget/timewidget.lua
+++ b/frontend/ui/widget/timewidget.lua
@@ -12,6 +12,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local NumberPickerWidget = require("ui/widget/numberpickerwidget")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
@@ -33,8 +34,8 @@ local TimeWidget = InputContainer:new{
 function TimeWidget:init()
    self.medium_font_face = Font:getFace("ffont")
    self.light_bar = {}
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    self.width = self.screen_width * 0.95
    if Device:hasKeys() then
        self.key_events = {
@@ -91,8 +92,7 @@ function TimeWidget:update()
    }

    local time_title = FrameContainer:new{
-        padding = Screen:scaleBySize(5),
-        margin = Screen:scaleBySize(2),
+        margin = Size.margin.small,
        bordersize = 0,
        TextWidget:new{
            text = self.title_text,
@@ -104,7 +104,7 @@ function TimeWidget:update()
    local time_line = LineWidget:new{
        dimen = Geom:new{
            w = self.width,
-            h = Screen:scaleBySize(2),
+            h = Size.line.thick,
        }
    }
    local time_bar = OverlapGroup:new{
@@ -144,7 +144,7 @@ function TimeWidget:update()
    }

    self.time_frame = FrameContainer:new{
-        radius = Screen:scaleBySize(5),
+        radius = Size.radius.window,
        padding = 0,
        margin = 0,
        background = Blitbuffer.COLOR_WHITE,
@@ -172,7 +172,6 @@ function TimeWidget:update()
        },
        FrameContainer:new{
            bordersize = 0,
-            padding = Screen:scaleBySize(5),
            self.time_frame,
        }
    }
--- a/frontend/ui/widget/toggleswitch.lua
+++ b/frontend/ui/widget/toggleswitch.lua
@@ -15,6 +15,7 @@ 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 Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -33,7 +34,7 @@ end

 local ToggleSwitch = InputContainer:new{
    width = Screen:scaleBySize(216),
-    height = Screen:scaleBySize(30),
+    height = Size.item.height_default,
    bgcolor = Blitbuffer.COLOR_WHITE, -- unfocused item color
    fgcolor = Blitbuffer.COLOR_GREY, -- focused item color
    font_face = "cfont",
@@ -50,9 +51,9 @@ function ToggleSwitch:init()
    self.toggle_frame = FrameContainer:new{
        background = Blitbuffer.COLOR_WHITE,
        color = Blitbuffer.COLOR_GREY,
-        radius = Screen:scaleBySize(7),
-        bordersize = Screen:scaleBySize(1),
-        padding = Screen:scaleBySize(2),
+        radius = Size.radius.window,
+        bordersize = Size.border.thin,
+        padding = Size.padding.small,
        dim = not self.enabled,
    }

@@ -79,8 +80,8 @@ function ToggleSwitch:init()
            background = Blitbuffer.COLOR_WHITE,
            color = Blitbuffer.COLOR_GREY,
            margin = 0,
-            radius = Screen:scaleBySize(5),
-            bordersize = Screen:scaleBySize(1),
+            radius = Size.radius.window,
+            bordersize = Size.border.thin,
            padding = 0,
            content,
        }
--- a/frontend/ui/widget/touchmenu.lua
+++ b/frontend/ui/widget/touchmenu.lua
@@ -1,3 +1,6 @@
+--[[--
+TouchMenu widget for hierarchical menus.
+]]
 local Blitbuffer = require("ffi/blitbuffer")
 local Button = require("ui/widget/button")
 local CenterContainer = require("ui/widget/container/centercontainer")
@@ -14,6 +17,7 @@ local InputContainer = require("ui/widget/container/inputcontainer")
 local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local RightContainer = require("ui/widget/container/rightcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -155,7 +159,7 @@ local TouchMenuBar = InputContainer:new{
 }

 function TouchMenuBar:init()
-    local icon_sep_width = Screen:scaleBySize(2)
+    local icon_sep_width = Size.span.vertical_default
    local icons_sep_width = icon_sep_width * (#self.icons + 1)
    -- we assume all icons are of the same width
    local tmp_ib = IconButton:new{icon_file = self.icons[1]}
@@ -197,7 +201,7 @@ function TouchMenuBar:init()
            self.bar_sep = LineWidget:new{
                dimen = Geom:new{
                    w = self.width,
-                    h = Screen:scaleBySize(2),
+                    h = Size.line.thick,
                },
                empty_segments = {
                    {
@@ -307,9 +311,9 @@ local TouchMenu = InputContainer:new{
    -- for returnning in multi-level menus
    item_table_stack = nil,
    item_table = nil,
-    item_height = Screen:scaleBySize(50),
-    bordersize = Screen:scaleBySize(2),
-    padding = Screen:scaleBySize(5),
+    item_height = Size.item.height_large,
+    bordersize = Size.border.default,
+    padding = Size.padding.default,
    fface = Font:getFace("ffont"),
    width = nil,
    height = nil,
@@ -403,7 +407,7 @@ function TouchMenu:init()
        end,
    }
    local footer_width = self.width - self.padding*2 - self.bordersize*2
-    local footer_height = up_button:getSize().h + Screen:scaleBySize(2)
+    local footer_height = up_button:getSize().h + Size.line.thick
    self.footer = HorizontalGroup:new{
        LeftContainer:new{
            dimen = Geom:new{ w = footer_width*0.33, h = footer_height},
@@ -431,16 +435,16 @@ 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 = Screen:scaleBySize(10)},
+        HorizontalSpan:new{width = Size.span.horizontal_default},
        LineWidget:new{
            background = Blitbuffer.gray(0.33),
            dimen = Geom:new{
-                w = self.item_width - 20,
-                h = Screen:scaleByDPI(1),
+                w = self.item_width - Screen:scaleBySize(20),
+                h = Size.line.medium,
            }
        }
    }
-    self.footer_top_margin = VerticalSpan:new{width = Screen:scaleBySize(2)}
+    self.footer_top_margin = VerticalSpan:new{width = Size.span.vertical_default}
    self.bar:switchToTab(self.last_index or 1)
 end

--- a/frontend/ui/widget/verticalscrollbar.lua
+++ b/frontend/ui/widget/verticalscrollbar.lua
@@ -1,15 +1,15 @@
 local Blitbuffer = require("ffi/blitbuffer")
 local Geom = require("ui/geometry")
+local Size = require("ui/size")
 local Widget = require("ui/widget/widget")
-local Screen = require("device").screen

 local VerticalScrollBar = Widget:new{
    enable = true,
    low = 0,
    high = 1,
-    width = Screen:scaleBySize(6),
-    height = Screen:scaleBySize(50),
-    bordersize = Screen:scaleBySize(1),
+    width = Size.padding.default,
+    height = Size.item.height_large,
+    bordersize = Size.border.thin,
    bordercolor = Blitbuffer.COLOR_BLACK,
    radius = 0,
    rectcolor = Blitbuffer.COLOR_BLACK,
--- a/frontend/ui/widget/virtualkeyboard.lua
+++ b/frontend/ui/widget/virtualkeyboard.lua
@@ -10,6 +10,7 @@ local HorizontalGroup = require("ui/widget/horizontalgroup")
 local HorizontalSpan = require("ui/widget/horizontalspan")
 local ImageWidget = require("ui/widget/imagewidget")
 local InputContainer = require("ui/widget/container/inputcontainer")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -27,7 +28,7 @@ local VirtualKey = InputContainer:new{

    width = nil,
    height = math.max(Screen:getWidth(), Screen:getHeight())*0.33,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.border.default,
    face = Font:getFace("infont"),
 }

@@ -62,7 +63,7 @@ function VirtualKey:init()
        margin = 0,
        bordersize = self.bordersize,
        background = Blitbuffer.COLOR_WHITE,
-        radius = Screen:scaleBySize(5),
+        radius = Size.radius.window,
        padding = 0,
        CenterContainer:new{
            dimen = Geom:new{
@@ -159,9 +160,9 @@ local VirtualKeyboard = InputContainer:new{

    width = Screen:scaleBySize(600),
    height = nil,
-    bordersize = Screen:scaleBySize(2),
-    padding = Screen:scaleBySize(2),
-    key_padding = Screen:scaleBySize(6),
+    bordersize = Size.border.default,
+    padding = Size.padding.small,
+    key_padding = Size.padding.default,
 }

 local lang_to_keyboard_layout = {
--- a/plugins/coverbrowser.koplugin/listmenu.lua
+++ b/plugins/coverbrowser.koplugin/listmenu.lua
@@ -15,6 +15,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local RightContainer = require("ui/widget/container/rightcontainer")
+local Size = require("ui/size")
 local TextBoxWidget = require("ui/widget/textboxwidget")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
@@ -46,7 +47,7 @@ local corner_mark = ImageWidget:new{
 local ItemShortCutIcon = WidgetContainer:new{
    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
    key = nil,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.border.default,
    radius = 0,
    style = "square",
 }
@@ -699,7 +700,7 @@ end
 function ListMenu:_updateItemsBuildUI()
    -- Build our list
    table.insert(self.item_group, LineWidget:new{
-                    dimen = Geom:new{ w = self.width, h = Screen:scaleBySize(1) },
+                    dimen = Geom:new{ w = self.width, h = Size.line.thin },
                    background = Blitbuffer.COLOR_GREY,
                    style = "solid",
                })
@@ -740,7 +741,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 = Screen:scaleBySize(1) },
+                        dimen = Geom:new{ w = self.width, h = Size.line.thin },
                        background = Blitbuffer.COLOR_GREY,
                        style = "solid",
                    })
--- a/plugins/coverbrowser.koplugin/mosaicmenu.lua
+++ b/plugins/coverbrowser.koplugin/mosaicmenu.lua
@@ -44,7 +44,7 @@ local corner_mark = ImageWidget:new{
 local ItemShortCutIcon = WidgetContainer:new{
    dimen = Geom:new{ w = Screen:scaleBySize(22), h = Screen:scaleBySize(22) },
    key = nil,
-    bordersize = Screen:scaleBySize(2),
+    bordersize = Size.border.default,
    radius = 0,
    style = "square",
 }
@@ -106,8 +106,8 @@ local FakeCover = FrameContainer:new{
    title_font_min = 10,
    filename_font_max = 10,
    filename_font_min = 8,
-    top_pad = Screen:scaleBySize(5),
-    bottom_pad = Screen:scaleBySize(5),
+    top_pad = Size.padding.default,
+    bottom_pad = Size.padding.default,
    sizedec_step = Screen:scaleBySize(2), -- speeds up a bit if we don't do all font sizes
    initial_sizedec = 0,
 }
--- a/plugins/goodreads.koplugin/goodreadsbook.lua
+++ b/plugins/goodreads.koplugin/goodreadsbook.lua
@@ -12,6 +12,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local Pic = require("ffi/pic")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
@@ -23,15 +24,15 @@ local T = require("ffi/util").template
 local _ = require("gettext")

 local GoodreadsBook = InputContainer:new{
-    padding = Screen:scaleBySize(15),
+    padding = Size.padding.fullscreen,
 }

 function GoodreadsBook:init()
    self.small_font_face = Font:getFace("smallffont")
    self.medium_font_face = Font:getFace("ffont")
    self.large_font_face = Font:getFace("largeffont")
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    UIManager:setDirty(self, function()
        return "ui", self.dimen
    end)
@@ -49,7 +50,7 @@ function GoodreadsBook:getStatusContent(width)
    return VerticalGroup:new{
        align = "left",
        OverlapGroup:new{
-            dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) },
+            dimen = Geom:new{ w = width, h = Size.item.height_default },
            CloseButton:new{ window = self },
        },
        self:genHeader(_("Book info")),
@@ -73,13 +74,13 @@ function GoodreadsBook:genHeader(title)
            background = Blitbuffer.gray(0.2),
            dimen = Geom:new{
                w = line_width,
-                h = 2,
+                h = Size.line.thick,
            }
        }
    }

    return VerticalGroup:new{
-        VerticalSpan:new{ width = Screen:scaleBySize(5) },
+        VerticalSpan:new{ width = Size.span.vertical_large },
        HorizontalGroup:new{
            align = "center",
            padding_span,
@@ -90,7 +91,7 @@ function GoodreadsBook:genHeader(title)
            line_container,
            padding_span,
        },
-        VerticalSpan:new{ width = Screen:scaleBySize(5) },
+        VerticalSpan:new{ width = Size.span.vertical_large },
    }
 end

@@ -112,7 +113,7 @@ function GoodreadsBook:genBookInfoGroup()
        TextBoxWidget:new{
            text = self.dates.title,
            face = self.medium_font_face,
-            padding = Screen:scaleBySize(2),
+            padding = Size.padding.small,
            alignment = "center",
            width = width,
        },
@@ -142,7 +143,7 @@ function GoodreadsBook:genBookInfoGroup()
    local text_series = TextWidget:new{
        text = T(_("Series: %1"), self.dates.series),
        face = self.small_font_face,
-        padding = Screen:scaleBySize(2),
+        padding = Size.padding.small,
    }
    table.insert(book_meta_info_group,
        CenterContainer:new{
@@ -154,7 +155,7 @@ function GoodreadsBook:genBookInfoGroup()
    local text_rating = TextWidget:new{
        text = T(_("Rating: %1"), self.dates.rating),
        face = self.small_font_face,
-        padding = Screen:scaleBySize(2),
+        padding = Size.padding.small,
    }
    table.insert(book_meta_info_group,
        CenterContainer:new{
@@ -166,7 +167,7 @@ function GoodreadsBook:genBookInfoGroup()
    local text_pages = TextWidget:new{
        text = T(_("Pages: %1"), self.dates.pages),
        face = self.small_font_face,
-        padding = Screen:scaleBySize(2),
+        padding = Size.padding.small,
    }
    table.insert(book_meta_info_group,
        CenterContainer:new{
@@ -178,7 +179,7 @@ function GoodreadsBook:genBookInfoGroup()
    local text_release = TextWidget:new{
        text = T(_("Release date: %1"), self.dates.release),
        face = self.small_font_face,
-        padding = Screen:scaleBySize(2),
+        padding = Size.padding.small,
    }
    table.insert(book_meta_info_group,
        CenterContainer:new{
--- a/plugins/statistics.koplugin/readerprogress.lua
+++ b/plugins/statistics.koplugin/readerprogress.lua
@@ -11,6 +11,7 @@ local LeftContainer = require("ui/widget/container/leftcontainer")
 local LineWidget = require("ui/widget/linewidget")
 local OverlapGroup = require("ui/widget/overlapgroup")
 local ProgressWidget = require("ui/widget/progresswidget")
+local Size = require("ui/size")
 local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
@@ -23,7 +24,7 @@ local LINE_COLOR = Blitbuffer.gray(0.4)
 local BG_COLOR = Blitbuffer.gray(0.2)

 local ReaderProgress = InputContainer:new{
-    padding = Screen:scaleBySize(15),
+    padding = Size.padding.fullscreen,
 }

 local dayOfWeekTranslation = {
@@ -40,8 +41,8 @@ function ReaderProgress:init()
    self.small_font_face = Font:getFace("smallffont")
    self.medium_font_face = Font:getFace("ffont")
    self.large_font_face = Font:getFace("largeffont")
-    self.screen_width = Screen:getSize().w
-    self.screen_height = Screen:getSize().h
+    self.screen_width = Screen:getWidth()
+    self.screen_height = Screen:getHeight()
    UIManager:setDirty(self, function()
        return "ui", self.dimen
    end)
@@ -69,7 +70,7 @@ function ReaderProgress:getStatusContent(width)
    return VerticalGroup:new{
        align = "left",
        OverlapGroup:new{
-            dimen = Geom:new{ w = width, h = Screen:scaleBySize(30) },
+            dimen = Geom:new{ w = width, h = Size.item.height_default },
            CloseButton:new{ window = self },
        },
        self:genSingleHeader(_("Last week")),
@@ -95,7 +96,7 @@ function ReaderProgress:genSingleHeader(title)
            background = BG_COLOR,
            dimen = Geom:new{
                w = line_width,
-                h = 2,
+                h = Size.line.thick,
            }
        }
    }
@@ -112,7 +113,7 @@ function ReaderProgress:genSingleHeader(title)
            line_container,
            padding_span,
        },
-        VerticalSpan:new{ width = Screen:scaleBySize(5), height = self.screen_height / 25 },
+        VerticalSpan:new{ width = Size.span.vertical_large, height = self.screen_height / 25 },
    }
 end

@@ -135,7 +136,7 @@ function ReaderProgress:genDoubleHeader(title_left, title_right)
            background = BG_COLOR,
            dimen = Geom:new{
                w = line_width,
-                h = 2,
+                h = Size.line.thick,
            }
        }
    }
@@ -158,7 +159,7 @@ function ReaderProgress:genDoubleHeader(title_left, title_right)
            line_container,
            padding_span,
        },
-        VerticalSpan:new{ width = Screen:scaleBySize(5), height = self.screen_height / 25 },
+        VerticalSpan:new{ width = Size.span.vertical_large, height = self.screen_height / 25 },
    }
 end

@@ -210,11 +211,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 = Screen:scaleBySize(2),
+            padding = Size.padding.small,
            LeftContainer:new{
                dimen = Geom:new{ w = self.screen_width , h = height / 3 },
                TextWidget:new{
-                    padding = Screen:scaleBySize(2),
+                    padding = Size.padding.small,
                    text = date_format_show .. " - " .. util.secondsToClock(select_day_time, true),
                    face = Font:getFace("smallffont"),
                },
@@ -291,7 +292,7 @@ function ReaderProgress:genSummaryDay(width)
    local span_group = HorizontalGroup:new{
        align = "center",
        LeftContainer:new{
-            dimen = Geom:new{ h = Screen:scaleBySize(10) },
+            dimen = Geom:new{ h = Size.span.horizontal_default },
            padding_span
        },
    }
@@ -353,7 +354,7 @@ function ReaderProgress:genSummaryWeek(width)
        CenterContainer:new{
            dimen = Geom:new{ w = tile_width, h = tile_height },
            TextWidget:new{
-                padding = Screen:scaleBySize(5),
+                padding = Size.padding.default,
                text = _("Total"),
                face = self.small_font_face,
            },
@@ -417,7 +418,7 @@ function ReaderProgress:genSummaryWeek(width)
    local span_group = HorizontalGroup:new{
        align = "center",
        LeftContainer:new{
-            dimen = Geom:new{ h = Screen:scaleBySize(10) },
+            dimen = Geom:new{ h = Size.span.horizontal_default },
            padding_span
        },
    }
--- a/spec/unit/size_spec.lua
+++ b/spec/unit/size_spec.lua
@@ -0,0 +1,31 @@
+describe("Size module", function()
+    local Size
+    setup(function()
+        require("commonrequire")
+        Size = require("ui/size")
+    end)
+    describe("should get size", function()
+        it("for window border", function()
+            assert.is_true(Size.border.window >= 1)
+        end)
+    end)
+    it("should be nil for non-existent property", function()
+        assert.is_nil(Size.supercalifragilisticexpialidocious)
+        assert.is_nil(Size.border.supercalifragilisticexpialidocious)
+    end)
+    it("should fail for non-existent property when debug is activated", function()
+        local dbg = require("dbg")
+        dbg:turnOn()
+        Size = package.reload("ui/size")
+        local supercalifragilisticexpialidocious1 = function()
+            return Size.supercalifragilisticexpialidocious
+        end
+        local supercalifragilisticexpialidocious2 = function()
+            return Size.border.supercalifragilisticexpialidocious
+        end
+
+        assert.has_error(supercalifragilisticexpialidocious1, "Size: this property does not exist: Size.supercalifragilisticexpialidocious")
+        assert.has_error(supercalifragilisticexpialidocious2, "Size: this property does not exist: Size.border.supercalifragilisticexpialidocious")
+        dbg:turnOff()
+    end)
+end)