Drying Code

config/action_buttons.lua

@@ -137,7 +137,7 @@ end
 
 --- Jails the action player, requires a reason
 -- @element jail_player
-local jail_player = new_button('utility/item_editor_icon',{'player-list.jail-player'})
+local jail_player = new_button('utility/multiplayer_waiting_icon',{'player-list.jail-player'})
 :on_click(function(player)
     local selected_player_name, selected_player_color = get_action_player_name(player)
     if Jail.is_jailed(selected_player_name) then
@@ -156,7 +156,7 @@ end
 
 --- Temp bans the action player, requires a reason
 -- @element temp_ban_player
-local temp_ban_player = new_button('utility/clock',{'player-list.temp-ban-player'})
+local temp_ban_player = new_button('utility/warning_white',{'player-list.temp-ban-player'})
 :on_click(function(player)
     local selected_player_name, selected_player_color = get_action_player_name(player)
     if Jail.is_jailed(selected_player_name) then

expcore/gui.lua

@@ -340,22 +340,6 @@ Gui._prototype_element.on_value_changed = event_handler_factory(defines.events.o
 --- Top Flow.
 -- @section topFlow
 
---- Button which toggles the top flow elements
--- @element toggle_top_flow
-local toggle_top_flow =
-Gui.element{
-    type = 'button',
-    style = 'back_button',
-    tooltip = {'gui_util.button_tooltip'}
-}
-:style{
-    width = 18,
-    height = 36
-}
-:on_click(function(player,_,_)
-    Gui.toggle_top_flow(player)
-end)
-
 --- The style that should be used for buttons on the top flow
 -- @field Gui.top_flow_button_style
 Gui.top_flow_button_style = mod_gui.button_style
@@ -371,6 +355,42 @@ local top_flow = Gui.get_top_flow(game.player)
 ]]
 Gui.get_top_flow = mod_gui.get_button_flow
 
+--- Button which toggles the top flow elements, shows inside top flow
+-- @element hide_top_flow
+local hide_top_flow =
+Gui.element{
+    type = 'sprite-button',
+    sprite = 'utility/preset',
+    style = 'tool_button',
+    tooltip = {'gui_util.button_tooltip'}
+}
+:style{
+    padding = -2,
+    width = 18,
+    height = 36
+}
+:on_click(function(player,_,_)
+    Gui.toggle_top_flow(player)
+end)
+
+--- Button which toggles the top flow elements, shows inside left flow
+-- @element show_top_flow
+local show_top_flow =
+Gui.element{
+    type = 'sprite-button',
+    sprite = 'utility/preset',
+    style = 'tool_button',
+    tooltip = {'gui_util.button_tooltip'}
+}
+:style{
+    padding = -2,
+    width = 18,
+    height = 20
+}
+:on_click(function(player,_,_)
+    Gui.toggle_top_flow(player)
+end)
+
 --[[-- Updates the visible states of all the elements on a players top flow
 @tparam LuaPlayer player the player that you want to update the flow for
 
@@ -380,8 +400,8 @@ Gui.update_top_flow(game.player)
 ]]
 function Gui.update_top_flow(player)
     local top_flow = Gui.get_top_flow(player)
-    local toggle_button = top_flow[toggle_top_flow.name]
+    local hide_button = top_flow[hide_top_flow.name]
-    local is_visible = toggle_button.style.name == 'back_button'
+    local is_visible = hide_button.visible
 
     -- Set the visible state of all elements in the flow
     for name,authenticator in pairs(Gui.top_elements) do
@@ -409,27 +429,15 @@ Gui.toggle_top_flow(game.player,true)
 
 ]]
 function Gui.toggle_top_flow(player,state)
+    -- Get the top flow and hide button
     local top_flow = Gui.get_top_flow(player)
-    local toggle_button = top_flow[toggle_top_flow.name]
+    if state == nil then state = not top_flow.visible end
-    if state == nil then state = toggle_button.style.name == 'forward_button' end
 
-    -- Set the visible state of all elements in the flow
+    -- Change the visiblty of the flow
-    for name,authenticator in pairs(Gui.top_elements) do
+    local left_flow = Gui.get_left_flow(player)
-        top_flow[name].visible = state and authenticator(player) or false
+    local show_button = left_flow.gui_core_buttons[show_top_flow.name]
-    end
+    show_button.visible = not state
-
+    top_flow.visible = state
-    -- Change the style of the toggle button
-    if state then
-        toggle_button.style = 'back_button'
-        local style = toggle_button.style
-        style.height = 36
-        style.width = 18
-    else
-        toggle_button.style = 'forward_button'
-        local style = toggle_button.style
-        style.height = 20
-        style.width = 18
-    end
 
     return state
 end
@@ -437,22 +445,6 @@ end
 --- Left Flow.
 -- @section leftFlow
 
---- Button which hides the elements in the left flow
--- @element hide_left_flow
-local hide_left_flow =
-Gui.element{
-    type = 'button',
-    style = 'back_button',
-    tooltip = {'expcore-gui.left-button-tooltip'}
-}
-:style{
-    width = 18,
-    height = 36
-}
-:on_click(function(player,_,_)
-    Gui.hide_left_flow(player)
-end)
-
 --[[-- Gets the flow which contains the elements for the left flow
 @function Gui.get_left_flow(player)
 @tparam LuaPlayer player the player that you want to get the flow for
@@ -464,6 +456,52 @@ local left_flow = Gui.get_left_flow(game.player)
 ]]
 Gui.get_left_flow = mod_gui.get_frame_flow
 
+--- Button which hides the elements in the left flow
+-- @element hide_left_flow
+local hide_left_flow =
+Gui.element{
+    type = 'sprite-button',
+    sprite = 'utility/close_black',
+    style = 'tool_button',
+    tooltip = {'expcore-gui.left-button-tooltip'}
+}
+:style{
+    padding = -3,
+    width = 18,
+    height = 20
+}
+:on_click(function(player,_,_)
+    Gui.hide_left_flow(player)
+end)
+
+--[[-- Button which can be used to toggle a left element, placed on the top flow
+@tparam string sprite the sprite that you want to use on the button
+@tparam ?string|Concepts.LocalizedString tooltip the tooltip that you want the button to have
+@tparam table element_define the element define that you want to be toggled on the left flow
+@tparam[opt] function authenticator used to decide if the button should be visible to a player
+
+@usage-- Add a button to toggle a left element
+local toolbar_button = Gui.left_toolbar_button('entity/inserter','Nothing to see here',example_flow_with_button,function(player)
+    return player.admin
+end)
+
+]]
+function Gui.left_toolbar_button(sprite,tooltip,element_define,authenticator)
+    return Gui.element{
+        type = 'sprite-button',
+        sprite = sprite,
+        tooltip = tooltip,
+        style = Gui.top_flow_button_style
+    }
+    :style{
+        padding = -2
+    }
+    :add_to_top_flow(authenticator)
+    :on_click(function(player,_,_)
+        Gui.toggle_left_element(player, element_define)
+    end)
+end
+
 --[[-- Hides all left elements for a player
 @tparam LuaPlayer player the player to hide the elements for
 
@@ -473,7 +511,7 @@ Gui.hide_left_flow(game.player)
 ]]
 function Gui.hide_left_flow(player)
     local left_flow = Gui.get_left_flow(player)
-    local hide_button = left_flow[hide_left_flow.name]
+    local hide_button = left_flow.gui_core_buttons[hide_left_flow.name]
 
     -- Set the visible state of all elements in the flow
     hide_button.visible = false
@@ -482,7 +520,21 @@ function Gui.hide_left_flow(player)
     end
 end
 
---[[-- Toggles the visible state of all a left element for a player
+--[[-- Get the element define that is in the left flow
+@tparam LuaPlayer player the player that you want tog et the element for
+@tparam table element_define the element that you want to get for the player
+@treturn LuaGuiElement the gui element linked to this define in the left flow
+
+@usage-- Get your left element
+local frame = Gui.get_left_element(game.player,example_flow_with_button)
+
+]]
+function Gui.get_left_element(player,element_define)
+    local left_flow = Gui.get_left_flow(player)
+    return left_flow[element_define.name]
+end
+
+--[[-- Toggles the visible state of a left element for a player
 @tparam LuaPlayer player the player that you want to toggle the element for
 @tparam table element_define the element that you want to toggle for the player
 @tparam[opt] boolean state if given then the state will be set to this state
@@ -497,7 +549,7 @@ Gui.toggle_top_flow(game.player,example_flow_with_button,true)
 ]]
 function Gui.toggle_left_element(player,element_define,state)
     local left_flow = Gui.get_left_flow(player)
-    local hide_button = left_flow[hide_left_flow.name]
+    local hide_button = left_flow.gui_core_buttons[hide_left_flow.name]
 
     -- Set the visible state
     local element = left_flow[element_define.name]
@@ -523,12 +575,15 @@ Event.add(defines.events.on_player_created,function(event)
 
     -- Draw the top flow
     local top_flow = Gui.get_top_flow(player)
-    toggle_top_flow(top_flow)
+    hide_top_flow(top_flow)
     Gui.update_top_flow(player)
 
     -- Draw the left flow
     local left_flow = Gui.get_left_flow(player)
-    local hide_left = hide_left_flow(left_flow)
+    local button_flow = left_flow.add{ type = 'flow', name = 'gui_core_buttons', direction = 'vertical' }
+    local show_top = show_top_flow(button_flow)
+    local hide_left = hide_left_flow(button_flow)
+    show_top.visible = false
 
     -- Draw the elements on the left flow
     local show_hide_left = false
@@ -538,7 +593,7 @@ Event.add(defines.events.on_player_created,function(event)
         -- Check if the element should be visible
         local visible = type(open_on_join) == 'boolean' and open_on_join or false
         if type(open_on_join) == 'function' then
-            local success, err = pcall(open_on_join,player)
+            local success, err = pcall(open_on_join, player)
             if not success then
                 error('There as been an error with an open on join hander for a gui element:\n\t'..err)
             end
@@ -616,7 +671,31 @@ function Gui.destroy_if_valid(element)
     return true
 end
 
+--[[-- Returns a table to be used as a style on sprite buttons, produces a sqaure button
+@tparam number size the size that you want the button to be
+@tparam[opt=-2] number padding the padding that you want on the sprite
+@tparam[opt] table style any extra style settings that you want to have
+@treturn table the style table to be used with element_define:style()
+
+@usage-- Adding a sprite button with size 20
+local button =
+Gui.element{
+    type = 'sprite-button',
+    sprite = 'entity/inserter'
+}
+:style(Gui.sprite_style(20))
+
+]]
+function Gui.sprite_style(size,padding,style)
+    style = style or {}
+    style.padding = padding or -2
+    style.height = size
+    style.width = size
+    return style
+end
+
 --[[-- Draw a flow that has custom element alignments, default is right align
+@element Gui.alignment
 @tparam LuaGuiElement parent the parent element that the alignment flow will be added to
 @tparam[opt='right'] string horizontal_align the horizontal alignment of the elements in the flow
 @tparam[opt='center'] string vertical_align the vertical alignment of the elements in the flow
@@ -630,27 +709,23 @@ local alignment = Gui.alignment(element,'example_right_alignment')
 local alignment = Gui.alignment(element,'example_center_top_alignment','center','top')
 
 ]]
-function Gui.alignment(parent,horizontal_align,vertical_align,name)
+Gui.alignment =
-    -- Draw the alignment flow
+Gui.element(function(_,parent,_,_,name)
-    local alignment =
+    return parent.add{
-    parent.add{
         name = name or 'alignment',
         type = 'flow',
     }
-
+end)
-    -- Change its style
+:style(function(style,_,horizontal_align,vertical_align,_)
-    local style = alignment.style
     style.padding = {1,2}
     style.vertical_align = vertical_align or 'center'
     style.horizontal_align = horizontal_align or 'right'
     style.vertically_stretchable  = style.vertical_align ~= 'center'
     style.horizontally_stretchable = style.horizontal_align ~= 'center'
-
+end)
-    -- Return the flow
-    return alignment
-end
 
 --[[-- Draw a scroll pane that has a table inside of it
+@element Gui.scroll_table
 @tparam LuaGuiElement parent the parent element that the scroll table will be added to
 @tparam number height the maximum height for the scroll pane
 @tparam number column_count the number of columns that the table will have
@@ -661,9 +736,10 @@ end
 local scroll_table = Gui.scroll_table(element,'example_scroll_table',200,3)
 
 ]]
-function Gui.scroll_table(parent,height,column_count,name)
+Gui.scroll_table =
+Gui.element(function(_,parent,_,column_count,name)
     -- Draw the scroll
-    local scroll =
+    local scroll_pane =
     parent.add{
         name = name or 'scroll',
         type = 'scroll-pane',
@@ -673,32 +749,33 @@ function Gui.scroll_table(parent,height,column_count,name)
         style = 'scroll_pane_under_subheader'
     }
 
-    -- Change the style of the scroll
-    local scroll_style = scroll.style
-    scroll_style.padding = {1,3}
-    scroll_style.maximal_height = height
-    scroll_style.horizontally_stretchable = true
-
     -- Draw the table
     local scroll_table =
-    scroll.add{
+    scroll_pane.add{
         type = 'table',
         name = 'table',
         column_count = column_count
     }
 
-    -- Change the style of the table
-    local table_style = scroll_table.style
-    table_style.padding = 0
-    table_style.cell_padding = 0
-    table_style.vertical_align = 'center'
-    table_style.horizontally_stretchable = true
-
     -- Return the scroll table
     return scroll_table
-end
+end)
+:style(function(style,element,height,_,_)
+    -- Change the style of the scroll
+    local scroll_style = element.parent.style
+    scroll_style.padding = {1,3}
+    scroll_style.maximal_height = height
+    scroll_style.horizontally_stretchable = true
+
+    -- Change the style of the table
+    style.padding = 0
+    style.cell_padding = 0
+    style.vertical_align = 'center'
+    style.horizontally_stretchable = true
+end)
 
 --[[-- Used to add a header to a frame, this has the option for a custom right alignment flow for buttons
+@element Gui.header
 @tparam LuaGuiElement parent the parent element that the header will be added to
 @tparam ?string|Concepts.LocalizedString caption the caption that will be shown on the header
 @tparam[opt] ?string|Concepts.LocalizedString tooltip the tooltip that will be shown on the header
@@ -706,17 +783,17 @@ end
 @tparam[opt='header'] string name the name of the header that is being added, the alignment is always called 'alignment'
 @treturn LuaGuiElement either the header or the header alignment if add_alignment is true
 
-@usage-- Adding a custom header
+@usage-- Adding a custom header with a label
 local header_alignment = Gui.header(
     element,
-    'example_header',
     'Example Caption',
     'Example Tooltip',
     true
 )
 
 ]]
-function Gui.header(parent,caption,tooltip,add_alignment,name)
+Gui.header =
+Gui.element(function(_,parent,caption,tooltip,add_alignment,name)
     -- Draw the header
     local header =
     parent.add{
@@ -732,17 +809,102 @@ function Gui.header(parent,caption,tooltip,add_alignment,name)
     style.horizontally_stretchable = true
 
     -- Draw the caption label
-    header.add{
+    if caption then
-        name = 'header_label',
+        header.add{
-        type = 'label',
+            name = 'header_label',
-        style = 'heading_1_label',
+            type = 'label',
-        caption = caption,
+            style = 'heading_1_label',
-        tooltip = tooltip
+            caption = caption,
-    }
+            tooltip = tooltip
+        }
+    end
 
     -- Return either the header or the added alignment
     return add_alignment and Gui.alignment(header) or header
-end
+end)
+
+--[[-- Used to add a footer to a frame, this has the option for a custom right alignment flow for buttons
+@element Gui.header
+@tparam LuaGuiElement parent the parent element that the footer will be added to
+@tparam ?string|Concepts.LocalizedString caption the caption that will be shown on the footer
+@tparam[opt] ?string|Concepts.LocalizedString tooltip the tooltip that will be shown on the footer
+@tparam[opt=false] boolean add_alignment when true an alignment flow will be added for buttons
+@tparam[opt='footer'] string name the name of the footer that is being added, the alignment is always called 'alignment'
+@treturn LuaGuiElement either the footer or the footer alignment if add_alignment is true
+
+@usage-- Adding a custom footer with a label
+local header_alignment = Gui.footer(
+    element,
+    'Example Caption',
+    'Example Tooltip',
+    true
+)
+
+]]
+Gui.footer =
+Gui.element(function(_,parent,caption,tooltip,add_alignment,name)
+    -- Draw the header
+    local footer =
+    parent.add{
+        name = name or 'footer',
+        type = 'frame',
+        style = 'subfooter_frame'
+    }
+
+    -- Change the style of the footer
+    local style = footer.style
+    style.padding = {2,4}
+    style.use_header_filler = false
+    style.horizontally_stretchable = true
+
+    -- Draw the caption label
+    if caption then
+        footer.add{
+            name = 'footer_label',
+            type = 'label',
+            style = 'heading_1_label',
+            caption = caption,
+            tooltip = tooltip
+        }
+    end
+
+    -- Return either the footer or the added alignment
+    return add_alignment and Gui.alignment(footer) or footer
+end)
+
+--[[-- Used for left frame to add a nice boarder to them and contain them
+@element Gui.container
+@tparam LuaGuiElement parent the parent element that the container will be added to
+@tparam string name the name that you want to give the outer frame, often just event_trigger for a left frame
+@tparam number width the minimal width that the frame will have
+
+@usage-- Adding a container as a base
+local container = Gui.container(parent,'my_container',200)
+
+]]
+Gui.container =
+Gui.element(function(_,parent,name,_)
+    -- Draw the external container
+    local frame =
+    parent.add{
+        name = name,
+        type = 'frame'
+    }
+
+    -- Return the container
+    return frame.add{
+        name = 'container',
+        type = 'frame',
+        direction = 'vertical',
+        style = 'window_content_frame_packed'
+    }
+end)
+:style(function(style,element,_,width)
+    style.vertically_stretchable = false
+    local frame_style = element.parent.style
+    frame_style.padding = 2
+    frame_style.minimal_width = width
+end)
 
 -- Module return
 return Gui

modules/gui/player-list.lua

@@ -56,15 +56,10 @@ local close_action_bar =
 Gui.element{
     type = 'sprite-button',
     sprite = 'utility/close_black',
-    hovered_sprite = 'utility/close_white',
     tooltip = {'player-list.close-action-bar'},
-    style = 'tool_button'
+    style = 'shortcut_bar_button_red'
-}
-:style{
-    padding = -1,
-    width = 28,
-    height = 28
 }
+:style(Gui.sprite_style(30,-1,{ top_margin = -1, right_margin = -1 }))
 :on_click(function(player,element)
     Store.clear(selected_player_store,player)
     Store.clear(selected_action_store,player)
@@ -77,13 +72,9 @@ Gui.element{
     type = 'sprite-button',
     sprite = 'utility/confirm_slot',
     tooltip = {'player-list.reason-confirm'},
-    style = 'tool_button'
+    style = 'shortcut_bar_button_green'
-}
-:style{
-    padding = -1,
-    width = 28,
-    height = 28
 }
+:style(Gui.sprite_style(30,-1,{ left_margin = -2, right_margin = -1 }))
 :on_click(function(player,element)
     local reason = element.parent.entry.text or 'Non Given'
     local action_name = Store.get(selected_action_store,player)
@@ -167,17 +158,12 @@ Gui.element(function(_,parent)
     -- Loop over all the buttons in the config
     for action_name,button_data in pairs(config.buttons) do
         -- Added the permission flow
-        local permission_flow =
+        local permission_flow = parent.add{ type = 'flow', name = action_name }
-        parent.add{
+        permission_flow.visible = false
-            type = 'flow',
-            name = action_name
-        }
         -- Add the buttons under that permission
         for _,button in ipairs(button_data) do
             button(permission_flow)
         end
-        -- Hide the flow by default, will be made visble when a player is selected
-        permission_flow.visible = false
     end
 
     return parent
@@ -189,6 +175,7 @@ local function update_action_bar_buttons(element)
     local selected_player_name = Store.get(selected_player_store,player)
 
     if not selected_player_name then
+        -- Hide the action bar when no player is selected
         element.visible = false
 
     else
@@ -218,30 +205,8 @@ end
 -- @element player_list_container
 local player_list_container =
 Gui.element(function(event_trigger,parent)
-    -- Draw the external container
-    local frame =
-    parent.add{
-        name = event_trigger,
-        type = 'frame'
-    }
-
-    -- Set the frame style
-    local frame_style = frame.style
-    frame_style.padding = 2
-    frame_style.minimal_width = 200
-
     -- Draw the internal container
-    local container =
+    local container = Gui.container(parent,event_trigger,200)
-    frame.add{
-        name = 'container',
-        type = 'frame',
-        direction = 'vertical',
-        style = 'window_content_frame_packed'
-    }
-
-    -- Set the container style
-    local style = container.style
-    style.vertically_stretchable = false
 
     -- Draw the scroll table for the players
     local scroll_table = Gui.scroll_table(container,184,3)
@@ -251,38 +216,24 @@ Gui.element(function(event_trigger,parent)
     scroll_table_style.padding = {1,0,1,2}
 
     -- Add the action bar
-    local action_bar =
+    local action_bar = Gui.footer(container,nil,nil,false,'action_bar')
-    container.add{
-        name = 'action_bar',
-        type = 'frame',
-        style = 'subfooter_frame'
-    }
 
     -- Change the style of the action bar
     local action_bar_style = action_bar.style
     action_bar_style.height = 35
     action_bar_style.padding = {1,3}
-    action_bar_style.use_header_filler = false
-    action_bar_style.horizontally_stretchable = true
     action_bar.visible = false
 
     -- Add the buttons to the action bar
     add_action_bar_buttons(action_bar)
 
     -- Add the reason bar
-    local reason_bar =
+    local reason_bar = Gui.footer(container,nil,nil,false,'reason_bar')
-    container.add{
-        name = 'reason_bar',
-        type = 'frame',
-        style = 'subfooter_frame'
-    }
 
     -- Change the style of the reason bar
     local reason_bar_style = reason_bar.style
     reason_bar_style.height = 35
     reason_bar_style.padding = {-1,3}
-    reason_bar_style.use_header_filler = false
-    reason_bar_style.horizontally_stretchable = true
     reason_bar.visible = false
 
     -- Add the text entry for the reason bar
@@ -304,27 +255,24 @@ Gui.element(function(event_trigger,parent)
     reason_confirm(reason_bar)
 
     -- Return the exteral container
-    return frame
+    return container.parent
 end)
 :add_to_left_flow(true)
 
 --- Button on the top flow used to toggle the player list container
--- @element task_list_toggle
+-- @element toggle_left_element
-Gui.element{
+Gui.left_toolbar_button('entity/character', {'player-list.main-tooltip'}, player_list_container, function(player)
-    type = 'sprite-button',
-    sprite = 'entity/character',
-    tooltip = {'player-list.main-tooltip'},
-    style = Gui.top_flow_button_style
-}
-:style{
-    padding = -2
-}
-:add_to_top_flow(function(player)
     return Roles.player_allowed(player,'gui/player-list')
 end)
-:on_click(function(player,_,_)
+
-    Gui.toggle_left_element(player, player_list_container)
+-- Get caption and tooltip format for a player
-end)
+local function get_time_formats(online_time,afk_time)
+    local tick = game.tick > 0 and game.tick or 1
+    local percent = math.round(online_time/tick,3)*100
+    local caption = format_time(online_time)
+    local tooltip = {'player-list.afk-time', percent, format_time(afk_time,{minutes=true,long=true})}
+    return caption, tooltip
+end
 
 -- Get the player time to be used to update time label
 local function get_player_times()
@@ -332,18 +280,19 @@ local function get_player_times()
     local player_times = {}
     for _, player in pairs(game.connected_players) do
         ctn = ctn + 1
-        local tick = game.tick > 0 and game.tick or 1
+        -- Add the player time details to the array
-        local percent = math.round(player.online_time/tick,3)*100
+        local caption, tooltip = get_time_formats(player.online_time, player.afk_time)
         player_times[ctn] = {
             element_name = 'player-time-'..player.index,
-            caption = format_time(player.online_time),
+            caption = caption,
-            tooltip = {'player-list.afk-time',percent,format_time(player.afk_time,{minutes=true,long=true})}
+            tooltip = tooltip
         }
     end
 
     return player_times
 end
 
+-- Get a sorted list of all online players
 local function get_player_list_order()
     -- Sort all the online players into roles
     local players = {}
@@ -358,20 +307,20 @@ local function get_player_list_order()
     -- Sort the players from roles into a set order
     local ctn = 0
     local player_list_order = {}
-    local tick = game.tick > 0 and game.tick or 1
     for _,role_name in pairs(Roles.config.order) do
         if players[role_name] then
             for _,player in pairs(players[role_name]) do
                 ctn = ctn + 1
-                local percent = math.round(player.online_time/tick,3)*100
+                -- Add the player data to the array
+                local caption, tooltip = get_time_formats(player.online_time, player.afk_time)
                 player_list_order[ctn] = {
                     name = player.name,
                     index = player.index,
                     tag = player.tag,
                     role_name = role_name,
                     chat_color = player.chat_color,
-                    caption = format_time(player.online_time),
+                    caption = caption,
-                    tooltip = {'player-list.afk-time',percent,format_time(player.afk_time,{minutes=true,long=true})}
+                    tooltip = tooltip
                 }
             end
         end
@@ -381,15 +330,15 @@ local function get_player_list_order()
     for i = 1, 10 do
         local online_time = math.random(1,tick)
         local afk_time = math.random(online_time-(tick/10),tick)
-        local percent = math.round(online_time/tick,3)*100
+        local caption, tooltip = get_time_formats(online_time, afk_time)
         player_list_order[ctn+i] = {
             name='Player '..i,
             index=0-i,
             tag='',
             role_name = 'Fake Player',
-            chat_color=table.get_random_dictionary_entry(Colors),
+            chat_color = table.get_random_dictionary_entry(Colors),
-            caption = format_time(online_time),
+            caption = caption,
-            tooltip = {'player-list.afk-time',percent,format_time(afk_time,{minutes=true,long=true})},
+            tooltip = tooltip
         }
     end]]
 
@@ -400,8 +349,7 @@ end
 Event.on_nth_tick(1800,function()
     local player_times = get_player_times()
     for _,player in pairs(game.connected_players) do
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,player_list_container)
-        local frame = left_flow[player_list_container.name]
         local scroll_table = frame.container.scroll.table
         for _,player_time in pairs(player_times) do
             update_player_base(scroll_table,player_time)
@@ -413,8 +361,7 @@ end)
 Event.add(defines.events.on_player_left_game,function(event)
     local remove_player = event.player
     for _,player in pairs(game.connected_players) do
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,player_list_container)
-        local frame = left_flow[player_list_container.name]
         local scroll_table = frame.container.scroll.table
         remove_player_base(scroll_table,remove_player)
     end
@@ -424,8 +371,7 @@ end)
 local function redraw_player_list()
     local player_list_order = get_player_list_order()
     for _,player in pairs(game.connected_players) do
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,player_list_container)
-        local frame = left_flow[player_list_container.name]
         local scroll_table = frame.container.scroll.table
         scroll_table.clear()
         for _,next_player_data in ipairs(player_list_order) do
@@ -441,8 +387,7 @@ Event.add(Roles.events.on_role_unassigned,redraw_player_list)
 --- When the action player is changed the action bar will update
 Store.watch(selected_player_store,function(value,player_name)
     local player = Game.get_player_from_any(player_name)
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,player_list_container)
-    local frame = left_flow[player_list_container.name]
     local scroll_table = frame.container.scroll.table
     update_action_bar_buttons(frame.container.action_bar)
     for _,next_player in pairs(game.connected_players) do
@@ -462,8 +407,7 @@ end)
 --- When the action name is changed the reason input will update
 Store.watch(selected_action_store,function(value,player_name)
     local player = Game.get_player_from_any(player_name)
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,player_list_container)
-    local frame = left_flow[player_list_container.name]
     local element = frame.container.reason_bar
     if value then
         -- if there is a new value then check the player is still online

modules/gui/rocket-info.lua

@@ -29,7 +29,8 @@ local function check_player_permissions(player,action)
         return false
     end
 
-    if config.progress[action..'_role_permission'] and not Roles.player_allowed(player,config.progress[action..'_role_permission']) then
+	if config.progress[action..'_role_permission']
+	and not Roles.player_allowed(player,config.progress[action..'_role_permission']) then
         return false
     end
 
@@ -45,12 +46,13 @@ Gui.element(function(_,parent,label_data)
 	local data_fullname = data_subname and data_name..data_subname or data_name
 
 	-- Add the name label
-	parent.add{
+	local name_label = parent.add{
 		type = 'label',
 		name = data_fullname..'-label',
         caption = {'rocket-info.data-caption-'..data_name,data_subname},
         tooltip = {'rocket-info.data-tooltip-'..data_name,data_subname}
 	}
+	name_label.style.padding = {0,2}
 
     --- Right aligned label to store the data
 	local alignment = Gui.alignment(parent,nil,nil,data_fullname)
@@ -61,6 +63,7 @@ Gui.element(function(_,parent,label_data)
         caption = label_data.value,
         tooltip = label_data.tooltip
 	}
+	element.style.padding = {0,2}
 
 	return element
 end)
@@ -187,11 +190,7 @@ Gui.element{
 	sprite = 'utility/play',
 	tooltip = {'rocket-info.toggle-rocket-tooltip'}
 }
-:style{
+:style(Gui.sprite_style(16))
-	padding = -2,
-	width = 16,
-	height = 16
-}
 :on_click(function(player,element,_)
 	local rocket_silo_name = element.parent.name:sub(8)
 	local rocket_silo = Rockets.get_silo_entity(rocket_silo_name)
@@ -214,11 +213,7 @@ Gui.element{
 	sprite = 'utility/center',
 	tooltip = {'rocket-info.launch-tooltip'}
 }
-:style{
+:style(Gui.sprite_style(16,-1))
-	padding = -2,
-	width = 16,
-	height = 16
-}
 :on_click(function(player,element,_)
 	local rocket_silo_name = element.parent.name:sub(8)
     local silo_data = Rockets.get_silo_data_by_name(rocket_silo_name)
@@ -333,6 +328,7 @@ local function get_progress_data(force_name)
 				silo_name = silo_data.name,
 				remove = true
 			})
+
 		else
 			-- Get the progress caption and tooltip
 			local progress_color = Colors.white
@@ -430,12 +426,8 @@ Gui.element{
 	hovered_sprite = 'utility/expand',
 	tooltip = {'rocket-info.toggle-section-tooltip'}
 }
-:style{
+:style(Gui.sprite_style(20))
-	padding = -2,
+:on_click(function(_,element,_)
-	height = 20,
-	width = 20
-}
-:on_click(function(player,element,_)
 	local header_flow = element.parent
 	local flow_name = header_flow.caption
 	local flow = header_flow.parent.parent[flow_name]
@@ -479,33 +471,13 @@ end)
 -- @element rocket_list_container
 local rocket_list_container =
 Gui.element(function(event_trigger,parent)
-    -- Draw the external container
-    local frame =
-    parent.add{
-        name = event_trigger,
-        type = 'frame'
-    }
-
-    -- Set the frame style
-    local frame_style = frame.style
-    frame_style.padding = 2
-    frame_style.minimal_width = 200
-
     -- Draw the internal container
-    local container =
+    local container = Gui.container(parent,event_trigger,200)
-    frame.add{
-        name = 'container',
-        type = 'frame',
-        direction = 'vertical',
-        style = 'window_content_frame_packed'
-    }
 
     -- Set the container style
     local style = container.style
-	style.vertically_stretchable = false
 	style.padding = 0
 
-
 	local player = Gui.get_player_from_element(parent)
 	local force_name = player.force.name
 	-- Draw stats section
@@ -525,37 +497,27 @@ Gui.element(function(event_trigger,parent)
 		if check_player_permissions(player,'toggle_active') then col_count = col_count+1 end
 		local progress = section(container,'progress',col_count)
 		-- Label used when there are no active silos
-        progress.add{
+        local no_silos = progress.add{
             type = 'label',
             name = 'no_silos',
             caption = {'rocket-info.progress-no-silos'}
-        }
+		}
+		no_silos.style.padding = {1,2}
 		update_build_progress(progress,get_progress_data(force_name))
 	end
 
 	-- Return the exteral container
-	return frame
+	return container.parent
 end)
 :add_to_left_flow(function(player)
     return player.force.rockets_launched > 0 and Roles.player_allowed(player,'gui/rocket-info')
 end)
 
 --- Button on the top flow used to toggle the container
--- @element rocket_list_toggle
+-- @element toggle_left_element
-Gui.element{
+Gui.left_toolbar_button('entity/rocket-silo', {'rocket-info.main-tooltip'}, rocket_list_container, function(player)
-    type = 'sprite-button',
-    sprite = 'entity/rocket-silo',
-    style = Gui.top_flow_button_style
-}
-:style{
-	padding = -2
-}
-:add_to_top_flow(function(player)
     return Roles.player_allowed(player,'gui/rocket-info')
 end)
-:on_click(function(player,_,_)
-    Gui.toggle_left_element(player, rocket_list_container)
-end)
 
 --- Update the gui for all players on a force
 local function update_rocket_gui_all(force_name)
@@ -563,8 +525,7 @@ local function update_rocket_gui_all(force_name)
 	local milestones = get_milestone_data(force_name)
 	local progress = get_progress_data(force_name)
 	for _,player in pairs(game.forces[force_name].players) do
-		local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,rocket_list_container)
-        local frame = left_flow[rocket_list_container.name]
 		local container = frame.container
 		update_data_labels(container.stats.table,stats)
 		update_data_labels(container.milestones.table,milestones)
@@ -587,8 +548,7 @@ end)
 local function update_rocket_gui_progress(force_name)
 	local progress = get_progress_data(force_name)
 	for _,player in pairs(game.forces[force_name].players) do
-		local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,rocket_list_container)
-        local frame = left_flow[rocket_list_container.name]
 		local container = frame.container
 		update_build_progress(container.progress.table,progress)
 	end
@@ -616,8 +576,7 @@ Event.add(defines.events.on_robot_built_entity,on_built)
 --- Redraw the progress section on role change
 local function role_update_event(event)
 	local player = game.players[event.player_index]
-    local left_flow = Gui.get_left_flow(player)
+	local container = Gui.get_left_element(player,rocket_list_container).container
-	local container = left_flow[rocket_list_container.name].container
 	local progress = container.progress
 	if config.progress.show_progress then
 		progress.destroy()

modules/gui/science-info.lua

@@ -47,7 +47,9 @@ Gui.element(function(_,parent,production_label_data)
     }
 
     -- Change the style
-    surfix_element.style.font_color = color
+    local surfix_element_style = surfix_element.style
+    surfix_element_style.font_color = color
+    surfix_element_style.right_margin = 1
 
     -- Return the value label
     return element
@@ -119,8 +121,6 @@ Gui.element(function(_,parent,science_pack_data)
         type = 'frame',
         style = 'bordered_frame'
     }
-
-    -- Change the style of the delta flow
     delta_flow.style.padding = {0,3}
 
     -- Draw the delta flow table
@@ -130,8 +130,6 @@ Gui.element(function(_,parent,science_pack_data)
         type = 'table',
         column_count = 2
     }
-
-    -- Change the style of the delta flow table
     delta_table.style.padding = 0
 
     -- Draw the production labels
@@ -223,9 +221,9 @@ local function get_eta_label_data(player)
         return { research = false }
     end
 
+    local limit
     local progress = force.research_progress
     local remaining = research.research_unit_count*(1-progress)
-    local limit
 
     -- Check for the limiting science pack
     for _,ingredient in pairs(research.research_unit_ingredients) do
@@ -266,40 +264,14 @@ local science_info_container =
 Gui.element(function(event_trigger,parent)
     local player = Gui.get_player_from_element(parent)
 
-    -- Draw the external container
-    local frame =
-    parent.add{
-        name = event_trigger,
-        type = 'frame'
-    }
-
-    -- Set the frame style
-    local frame_style = frame.style
-    frame_style.padding = 2
-    frame_style.minimal_width = 200
-
     -- Draw the internal container
-    local container =
+    local container = Gui.container(parent,event_trigger,200)
-    frame.add{
-        name = 'container',
-        type = 'frame',
-        direction = 'vertical',
-        style = 'window_content_frame_packed'
-    }
-
-    -- Set the container style
-    local style = container.style
-    style.vertically_stretchable = false
 
     -- Draw the header
-    Gui.header(
+    Gui.header(container, {'science-info.main-caption'}, {'science-info.main-tooltip'})
-        container,
-        {'science-info.main-caption'},
-        {'science-info.main-tooltip'}
-    )
 
     -- Draw the scroll table for the tasks
-    local scroll_table = Gui.scroll_table(container,185,4)
+    local scroll_table = Gui.scroll_table(container,178,4)
 
     -- Draw the no packs label
     local no_packs_label =
@@ -318,20 +290,7 @@ Gui.element(function(event_trigger,parent)
     -- Add the footer and eta
     if config.show_eta then
         -- Draw the footer
-        local footer = Gui.header(
+        local footer = Gui.footer(container, {'science-info.eta-caption'}, {'science-info.eta-tooltip'}, true)
-            container,
-            {'science-info.eta-caption'},
-            {'science-info.eta-tooltip'},
-            true,
-            'footer'
-        )
-
-        -- Set the style
-        footer.parent.style = 'subheader_frame'
-        local footer_style = footer.parent.style
-        footer_style.padding = {2,4}
-        footer_style.use_header_filler = false
-        footer_style.horizontally_stretchable = true
 
         -- Draw the eta label
         local eta_label =
@@ -354,27 +313,15 @@ Gui.element(function(event_trigger,parent)
     end
 
     -- Return the exteral container
-    return frame
+    return container.parent
 end)
 :add_to_left_flow()
 
 --- Button on the top flow used to toggle the task list container
--- @element task_list_toggle
+-- @element toggle_left_element
-Gui.element{
+Gui.left_toolbar_button('entity/lab', {'science-info.main-tooltip'}, science_info_container, function(player)
-    type = 'sprite-button',
-    sprite = 'entity/lab',
-    tooltip = {'science-info.main-tooltip'},
-    style = Gui.top_flow_button_style
-}
-:style{
-    padding = -2
-}
-:add_to_top_flow(function(player)
     return Roles.player_allowed(player,'gui/science-info')
 end)
-:on_click(function(player,_,_)
-    Gui.toggle_left_element(player, science_info_container)
-end)
 
 --- Updates the gui every 1 second
 Event.on_nth_tick(60,function()
@@ -382,8 +329,7 @@ Event.on_nth_tick(60,function()
     local force_eta_data = {}
     for _,player in pairs(game.connected_players) do
         local force_name = player.force.name
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,science_info_container)
-        local frame = left_flow[science_info_container.name]
         local container = frame.container
 
         -- Update the science packs

modules/gui/task-list.lua

@@ -11,6 +11,12 @@ local config = require 'config.tasks' --- @dep config.tasks
 local format_time,table_keys = ext_require('expcore.common','format_time','table_keys') --- @dep expcore.common
 local Tasks = require 'modules.control.tasks' --- @dep modules.control.tasks
 
+-- Styles used for sprite buttons
+local Styles = {
+    sprite20 = Gui.sprite_style(20),
+    sprite22 = Gui.sprite_style(20, nil, { right_margin = -3 })
+}
+
 --- If a player is allowed to use the edit buttons
 local function check_player_permissions(player,task)
     if task then
@@ -60,11 +66,7 @@ Gui.element{
     tooltip = {'task-list.add-tooltip'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(player,_,_)
     Tasks.add_task(player.force.name,nil,player.name)
 end)
@@ -78,11 +80,7 @@ Gui.element{
     tooltip = {'task-list.edit-tooltip-none'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(player,element,_)
     local task_id = element.parent.name:sub(6)
     Tasks.set_editing(task_id,player.name,true)
@@ -97,11 +95,7 @@ Gui.element{
     tooltip = {'task-list.discard-tooltip'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(_,element,_)
     local task_id = element.parent.name:sub(6)
     Tasks.remove_task(task_id)
@@ -112,22 +106,16 @@ end)
 local add_task_base =
 Gui.element(function(_,parent,task_id)
     -- Add the task number label
-    parent.add{
+    local task_number = parent.add{
         name = 'count-'..task_id,
         type = 'label',
         caption = '0)'
     }
+    task_number.style.left_margin = 1
 
     -- Add a flow which will contain the task message and edit buttons
-    local task_flow =
+    local task_flow = parent.add{ name = task_id, type = 'flow', }
-    parent.add{
+    task_flow.style.padding = 0
-        name = task_id,
-        type = 'flow',
-    }
-
-    -- Set the padding on the task flow
-    local task_flow_style = task_flow.style
-    task_flow_style.padding = 0
 
     -- Add the two edit buttons outside the task flow
     local edit_flow = Gui.alignment(parent,nil,nil,'edit-'..task_id)
@@ -155,12 +143,7 @@ Gui.element{
     tooltip = {'task-list.confirm-tooltip'},
     style = 'shortcut_bar_button_green'
 }
-:style{
+:style(Styles.sprite22)
-    padding = -2,
-    right_margin = -3,
-    height = 22,
-    width = 22
-}
 :on_click(function(player,element,_)
     local task_id = element.parent.name
     local new_message = element.parent[task_editing.name].text
@@ -177,12 +160,7 @@ Gui.element{
     tooltip = {'task-list.cancel-tooltip'},
     style = 'shortcut_bar_button_red'
 }
-:style{
+:style(Styles.sprite22)
-    padding = -2,
-    right_margin = -3,
-    height = 22,
-    width = 22
-}
 :on_click(function(player,element,_)
     local task_id = element.parent.name
     Tasks.set_editing(task_id,player.name)
@@ -203,11 +181,6 @@ Gui.element(function(event_trigger,parent,task)
         clear_and_focus_on_right_click = true
     }
 
-    -- Change the style
-    local style = element.style
-    style.maximal_width = 110
-    style.height = 20
-
     -- Add the edit buttons
     cancel_edit(parent)
     confirm_edit(parent)
@@ -215,6 +188,10 @@ Gui.element(function(event_trigger,parent,task)
     -- Return the element
     return element
 end)
+:style{
+    maximal_width = 110,
+    height = 20
+}
 :on_confirmed(function(player,element,_)
     local task_id = element.parent.name
     local new_message = element.text
@@ -229,24 +206,18 @@ Gui.element(function(_,parent,task)
     local message = task.message
     local last_edit_name = task.last_edit_name
     local last_edit_time = task.last_edit_time
-
     -- Draw the element
-    local element =
+    return parent.add{
-    parent.add{
         name = task_editing.name,
         type = 'label',
         caption = message,
         tooltip = {'task-list.last-edit', last_edit_name, format_time(last_edit_time)}
     }
-
-    -- Change the style
-    local style = element.style
-    style.single_line = false
-    style.maximal_width = 150
-
-    -- Return the element
-    return element
 end)
+:style{
+    single_line = false,
+    maximal_width = 150
+}
 
 --- Updates a task for a player
 local function update_task(player,task_table,task_id)
@@ -308,10 +279,12 @@ local function update_task(player,task_table,task_id)
         edit_task_element.enabled = false
         task_flow.clear()
         task_editing(task_flow,task).focus()
+        task_table.parent.scroll_to_element(task_flow,'top-third')
 
     end
 end
 
+-- Update all the tasks for a player
 local function update_all_tasks(player,scroll_table)
     local task_ids = Tasks.get_force_task_ids(player.force.name)
     if #task_ids > 0 then
@@ -325,30 +298,8 @@ end
 -- @element task_list_container
 local task_list_container =
 Gui.element(function(event_trigger,parent)
-    -- Draw the external container
-    local frame =
-    parent.add{
-        name = event_trigger,
-        type = 'frame'
-    }
-
-    -- Set the frame style
-    local frame_style = frame.style
-    frame_style.padding = 2
-    frame_style.minimal_width = 200
-
     -- Draw the internal container
-    local container =
+    local container = Gui.container(parent,event_trigger,200)
-    frame.add{
-        name = 'container',
-        type = 'frame',
-        direction = 'vertical',
-        style = 'window_content_frame_packed'
-    }
-
-    -- Set the container style
-    local style = container.style
-    style.vertically_stretchable = false
 
     -- Draw the header
     local header = Gui.header(
@@ -364,7 +315,7 @@ Gui.element(function(event_trigger,parent)
     add_new_task_element.visible = check_player_permissions(player)
 
     -- Draw the scroll table for the tasks
-    local scroll_table = Gui.scroll_table(container,185,3)
+    local scroll_table = Gui.scroll_table(container,190,3)
     scroll_table.draw_horizontal_lines = true
     scroll_table.vertical_centering = false
 
@@ -397,7 +348,7 @@ Gui.element(function(event_trigger,parent)
     end
 
     -- Return the exteral container
-    return frame
+    return container.parent
 end)
 :add_to_left_flow(function(player)
     local task_ids = Tasks.get_force_task_ids(player.force.name)
@@ -405,22 +356,10 @@ end)
 end)
 
 --- Button on the top flow used to toggle the task list container
--- @element task_list_toggle
+-- @element toggle_left_element
-Gui.element{
+Gui.left_toolbar_button('utility/not_enough_repair_packs_icon', {'task-list.main-tooltip'}, task_list_container, function(player)
-    type = 'sprite-button',
-    sprite = 'utility/not_enough_repair_packs_icon',
-    tooltip = {'task-list.main-tooltip'},
-    style = Gui.top_flow_button_style
-}
-:style{
-    padding = -2
-}
-:add_to_top_flow(function(player)
     return Roles.player_allowed(player,'gui/task-list')
 end)
-:on_click(function(player,_,_)
-    Gui.toggle_left_element(player, task_list_container)
-end)
 
 --- When a new task is added it will udpate the task list for everyone on that force
 Tasks.on_update(function(task,task_id,removed_task)
@@ -435,8 +374,7 @@ Tasks.on_update(function(task,task_id,removed_task)
     -- Update the task for all the players on the force
     local task_ids = Tasks.get_force_task_ids(force.name)
     for _,player in pairs(force.connected_players) do
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,task_list_container)
-        local frame = left_flow[task_list_container.name]
         local scroll_table = frame.container.scroll.table
 
         -- Update the task that was changed
@@ -455,8 +393,7 @@ end)
 --- Update the tasks when the player joins
 Event.add(defines.events.on_player_joined_game,function(event)
     local player = game.players[event.player_index]
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,task_list_container)
-    local frame = left_flow[task_list_container.name]
     local scroll_table = frame.container.scroll.table
     update_all_tasks(player,scroll_table)
 end)
@@ -464,8 +401,7 @@ end)
 --- Makes sure the right buttons are present when roles change
 local function role_update_event(event)
     local player = game.players[event.player_index]
-    local left_flow = Gui.get_left_flow(player)
+    local container = Gui.get_left_element(player,task_list_container).container
-    local container = left_flow[task_list_container.name].container
 
     -- Update the tasks, incase the user can now edit them
     local scroll_table = container.scroll.table

modules/gui/warp-list.lua

@@ -31,6 +31,13 @@ Global.register(keep_gui_open,function(tbl)
     keep_gui_open = tbl
 end)
 
+-- Styles used for sprite buttons
+local Styles = {
+    sprite20 = Gui.sprite_style(20),
+    sprite22 = Gui.sprite_style(20, nil, { right_margin = -3 }),
+    sprite32 = { height = 32, width = 32, left_margin = 1 }
+}
+
 --- Returns if a player is allowed to edit the given warp
 --- If a player is allowed to use the edit buttons
 local function check_player_permissions(player,action,warp)
@@ -71,11 +78,7 @@ Gui.element{
     tooltip = {'warp-list.add-tooltip'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(player,element)
     -- Add the new warp
     local force_name = player.force.name
@@ -95,11 +98,7 @@ Gui.element{
     tooltip = {'warp-list.discard-tooltip'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(_,element)
     local warp_id = element.parent.name:sub(6)
     Warps.remove_warp(warp_id)
@@ -114,11 +113,7 @@ Gui.element{
     tooltip = {'warp-list.edit-tooltip-none'},
     style = 'tool_button'
 }
-:style{
+:style(Styles.sprite20)
-    padding = -2,
-    height = 20,
-    width = 20
-}
 :on_click(function(player,element)
     local warp_id = element.parent.name:sub(6)
     Warps.set_editing(warp_id,player.name,true)
@@ -135,18 +130,10 @@ Gui.element(function(_,parent,warp_id)
         type = 'flow',
         caption = warp_id
     }
-
-    -- Change the style of the flow
     icon_flow.style.padding = 0
 
     -- Add a flow which will contain the warp name and edit buttons
-    local warp_flow =
+    local warp_flow = parent.add{ type = 'flow', name = warp_id }
-    parent.add{
-        name = warp_id,
-        type = 'flow',
-    }
-
-    -- Set the padding on the warp flow
     warp_flow.style.padding = 0
 
     -- Add the two edit buttons outside the warp flow
@@ -176,12 +163,7 @@ Gui.element{
     tooltip = {'warp-list.confirm-tooltip'},
     style = 'shortcut_bar_button_green'
 }
-:style{
+:style(Styles.sprite22)
-    padding = -2,
-    right_margin = -3,
-    height = 22,
-    width = 22
-}
 :on_click(function(player,element)
     local warp_id = element.parent.name
     local warp_name = element.parent[warp_editing.name].text
@@ -199,12 +181,7 @@ Gui.element{
     tooltip = {'warp-list.cancel-tooltip'},
     style = 'shortcut_bar_button_red'
 }
-:style{
+:style(Styles.sprite22)
-    padding = -2,
-    right_margin = -3,
-    height = 22,
-    width = 22
-}
 :on_click(function(player,element)
     local warp_id = element.parent.name
     Warps.set_editing(warp_id,player.name)
@@ -225,11 +202,6 @@ Gui.element(function(event_trigger,parent,warp)
         clear_and_focus_on_right_click = true
     }
 
-    -- Change the style
-    local style = element.style
-    style.maximal_width = 110
-    style.height = 20
-
     -- Add the edit buttons
     cancel_edit(parent)
     confirm_edit(parent)
@@ -237,6 +209,10 @@ Gui.element(function(event_trigger,parent,warp)
     -- Return the element
     return element
 end)
+:style{
+    maximal_width = 110,
+    height = 20
+}
 :on_confirmed(function(player,element,_)
     local warp_id = element.parent.name
     local warp_name = element.text
@@ -249,27 +225,20 @@ end)
 -- @element warp_label
 local warp_label =
 Gui.element(function(event_trigger,parent,warp)
-    local name = warp.name
     local last_edit_name = warp.last_edit_name
     local last_edit_time = warp.last_edit_time
-
     -- Draw the element
-    local element =
+    return parent.add{
-    parent.add{
         name = event_trigger,
         type = 'label',
-        caption = name,
+        caption = warp.name,
         tooltip = {'warp-list.last-edit',last_edit_name,format_time(last_edit_time)}
     }
-
-    -- Change the style
-    local style = element.style
-    style.single_line = false
-    style.maximal_width = 150
-
-    -- Return the element
-    return element
 end)
+:style{
+    single_line = false,
+    maximal_width = 150
+}
 :on_click(function(player,element,_)
     local warp_id = element.parent.name
     local warp = Warps.get_warp(warp_id)
@@ -283,25 +252,16 @@ end)
 warp_icon_button =
 Gui.element(function(event_trigger,parent,warp)
     local warp_position = warp.position
-
     -- Draw the element
-    local element =
+    return parent.add{
-    parent.add{
         name = event_trigger,
         type = 'sprite-button',
         sprite = 'item/'..warp.icon,
         tooltip = {'warp-list.goto-tooltip',warp_position.x,warp_position.y},
         style = 'quick_bar_slot_button'
     }
-
-    -- Change the style
-    local style = element.style
-    style.height = 32
-    style.width = 32
-
-    -- Return the element
-    return element
 end)
+:style(Styles.sprite32)
 :on_click(function(player,element,_)
     local warp_id = element.parent.caption
     Warps.teleport_player(warp_id,player)
@@ -316,27 +276,16 @@ end)
 --- Editing state for the warp icon, chose elem used to chosse icon
 -- @element warp_icon_editing
 local warp_icon_editing =
-Gui.element(function(event_trigger,parent,warp)
+Gui.element(function(_,parent,warp)
-    local warp_icon = warp.icon
+    return parent.add{
-
-    -- Draw the element
-    local element =
-    parent.add{
         name = warp_icon_button.name,
         type = 'choose-elem-button',
         elem_type = 'item',
-        item = warp_icon,
+        item = warp.icon,
         tooltip = {'warp-list.goto-edit'},
     }
-
-    -- Change the style
-    local style = element.style
-    style.height = 32
-    style.width = 32
-
-    -- Return the element
-    return element
 end)
+:style(Styles.sprite32)
 
 --- This timer controls when a player is able to warp, eg every 60 seconds
 -- @element warp_timer
@@ -421,12 +370,14 @@ local function update_warp(player,warp_table,warp_id)
         edit_warp_element.enabled = false
         warp_flow.clear()
         warp_editing(warp_flow,warp).focus()
+        warp_table.parent.scroll_to_element(warp_flow,'top-third')
         icon_flow.clear()
         warp_icon_editing(icon_flow,warp)
 
     end
 end
 
+-- Update all the warps for a player
 local function update_all_warps(player,warp_table)
     local warp_ids = Warps.get_force_warp_ids(player.force.name)
     if #warp_ids > 0 then
@@ -440,30 +391,8 @@ end
 -- @element warp_list_container
 local warp_list_container =
 Gui.element(function(event_trigger,parent)
-    -- Draw the external container
-    local frame =
-    parent.add{
-        name = event_trigger,
-        type = 'frame'
-    }
-
-    -- Set the frame style
-    local frame_style = frame.style
-    frame_style.padding = 2
-    frame_style.minimal_width = 200
-
     -- Draw the internal container
-    local container =
+    local container = Gui.container(parent,event_trigger,200)
-    frame.add{
-        name = 'container',
-        type = 'frame',
-        direction = 'vertical',
-        style = 'window_content_frame_packed'
-    }
-
-    -- Set the container style
-    local style = container.style
-    style.vertically_stretchable = false
 
     -- Draw the header
     local header = Gui.header(
@@ -479,7 +408,7 @@ Gui.element(function(event_trigger,parent)
     add_new_warp_element.visible = check_player_permissions(player,'allow_add_warp')
 
     -- Draw the scroll table for the warps
-    local scroll_table = Gui.scroll_table(container,258,3)
+    local scroll_table = Gui.scroll_table(container,250,3)
 
     -- Change the style of the scroll table
     local scroll_table_style = scroll_table.style
@@ -501,7 +430,7 @@ Gui.element(function(event_trigger,parent)
     update_all_warps(player,scroll_table)
 
     -- Return the exteral container
-    return frame
+    return container.parent
 end)
 :add_to_left_flow()
 
@@ -537,8 +466,7 @@ Warps.on_update(function(warp,_,removed_warp)
     -- Update the gui for selected players
     local warp_ids = Warps.get_force_warp_ids(force.name)
     for _,player in pairs(force.connected_players) do
-        local left_flow = Gui.get_left_flow(player)
+        local frame = Gui.get_left_element(player,warp_list_container)
-        local frame = left_flow[warp_list_container.name]
         local scroll_table = frame.container.scroll.table
 
         -- Update the gui
@@ -552,8 +480,7 @@ end)
 --- Update the warps when the player joins
 Event.add(defines.events.on_player_joined_game,function(event)
     local player = game.players[event.player_index]
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,warp_list_container)
-    local frame = left_flow[warp_list_container.name]
     local scroll_table = frame.container.scroll.table
     update_all_warps(player,scroll_table)
 end)
@@ -561,8 +488,7 @@ end)
 --- Makes sure the right buttons are present when roles change
 local function role_update_event(event)
     local player = game.players[event.player_index]
-    local left_flow = Gui.get_left_flow(player)
+    local container = Gui.get_left_element(player,warp_list_container).container
-    local container = left_flow[warp_list_container.name].container
 
     -- Update the warps, incase the user can now edit them
     local scroll_table = container.scroll.table
@@ -592,8 +518,7 @@ Store.watch(player_in_range_store,function(value,player_name)
     end
 
     -- Get the warp table
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,warp_list_container)
-    local frame = left_flow[warp_list_container.name]
     local scroll_table = frame.container.scroll.table
 
     -- Check if the buttons should be active
@@ -621,8 +546,7 @@ Store.watch(player_warp_cooldown_store,function(value,player_name,old_value)
     if value == old_value then return end
     -- Get the progress bar element
     local player = game.players[player_name]
-    local left_flow = Gui.get_left_flow(player)
+    local frame = Gui.get_left_element(player,warp_list_container)
-    local frame = left_flow[warp_list_container.name]
     local warp_timer_element = frame.container[warp_timer.name]
 
     -- Set the progress
@@ -702,8 +626,7 @@ Event.on_nth_tick(math.floor(60/config.update_smoothing),function()
             end
 
             -- Change the enabled state of the add warp button
-            local left_flow = Gui.get_left_flow(player)
+            local frame = Gui.get_left_element(player,warp_list_container)
-            local frame = left_flow[warp_list_container.name]
             local add_warp_element = frame.container.header.alignment[add_new_warp.name]
             local was_able_to_make_warp = add_warp_element.enabled
             local can_make_warp = closest_distance > mr2