E-book viewer: Show the current progress percentage in the bottom bar of the viewer controls. This can be customized in the viewer preferences under Headers and footers. Fixes #1921610 [[Enhancement - Viewer] Progress bar](https://bugs.launchpad.net/calibre/+bug/1921610)

src/pyj/read_book/overlay.pyj

@@ -414,14 +414,22 @@ class MainOverlay:  # {{{
         ), user_select='none', background_color=get_color('window-background')))
 
         container.appendChild(
-            set_css(E.div( # bottom bar
+            E.div( # bottom bar
-                svgicon('close', icon_size, icon_size), '\xa0', _('Close'),
+                  style='position: fixed; width: 100%; bottom: 0; display: flex; justify-content: space-between; align-items: center;'
+                        'user-select: none; background-color: {}'.format(get_color('window-background')),
+                E.div(
+                    style='display: flex; align-items: center; cursor: pointer; padding: 0.5ex 1rem',
+                    svgicon('close', icon_size, icon_size), '\xa0', _('Close')
+                ),
+                E.div(style='padding: 0.5ex 1rem', '\xa0'), E.div(style='padding: 0.5ex 1rem', '\xa0'),
             ),
-            cursor='pointer', position='fixed', width='100vw', bottom='0', display='flex', justify_content='center', align_items='center', padding='0.5ex 1em',
-            user_select='none', background_color=get_color('window-background'),
         )
-        )
+        renderer = self.overlay.view.create_template_renderer()
-
+        if renderer:
+            c = container.lastChild.lastChild
+            b = c.previousSibling
+            renderer(b, 'controls_footer', 'middle', '')
+            renderer(c, 'controls_footer', 'right', '')
 
         self.on_hide()
         self.timer = setInterval(self.update_time, 1000)

src/pyj/read_book/prefs/head_foot.pyj

@@ -87,30 +87,36 @@ def get_setting(table):
     return ans
 
 
+def groups():
+    return {'header': _('Header'), 'footer': _('Footer'),
+            'left-margin': _('Left margin'), 'right-margin': _('Right margin'),
+            'controls_footer': _('Controls footer'),
+    }
+
+
 def restore_defaults():
     container = document.getElementById(CONTAINER)
-    for which in 'header footer left-margin right-margin'.split(' '):
+    for which in Object.keys(groups()):
         table = container.querySelector(f'table[data-which={which}]')
         apply_setting(table, defaults[which] or {})
 
 
 def create_head_foot_panel(container, apply_func, cancel_func):
+    gr = groups()
     container.appendChild(E.div(id=CONTAINER))
     container = container.lastChild
-    container.appendChild(E.h4(_('Header'), style="margin: 1rem"))
+
-    container.appendChild(create_items('header'))
+    for key in gr:
+        s = 'margin: 1rem;'
+        if container.childNodes.length > 0:
+            s += 'margin-top: 0;'
+        container.appendChild(E.h4(gr[key], style=s))
+        container.appendChild(create_items(key))
         container.appendChild(E.hr())
-    container.appendChild(E.h4(_('Footer'), style="margin: 1rem; margin-top: 0"))
+    container.removeChild(container.lastChild)
-    container.appendChild(create_items('footer'))
-    container.appendChild(E.hr())
-    container.appendChild(E.h4(_('Left margin'), style="margin: 1rem; margin-top: 0"))
-    container.appendChild(create_items('left-margin'))
-    container.appendChild(E.hr())
-    container.appendChild(E.h4(_('Right margin'), style="margin: 1rem; margin-top: 0"))
-    container.appendChild(create_items('right-margin'))
 
     sd = get_session_data()
-    for which in 'header footer left-margin right-margin'.split(' '):
+    for which in Object.keys(gr):
         table = container.querySelector(f'table[data-which={which}]')
         apply_setting(table, sd.get(which) or {})
     container.appendChild(E.div(style='margin: 1rem', create_button_box(restore_defaults, apply_func, cancel_func)))
@@ -119,7 +125,7 @@ def create_head_foot_panel(container, apply_func, cancel_func):
 def commit_head_foot(onchange, container):
     sd = get_session_data()
     changed = False
-    for which in 'header footer left-margin right-margin'.split(' '):
+    for which in Object.keys(groups()):
         prev = sd.get(which) or {}
         table = container.querySelector(f'table[data-which={which}]')
         current = get_setting(table)

src/pyj/read_book/view.pyj

@@ -1256,17 +1256,27 @@ class View:
         if self.current_status_message:
             window.setTimeout(def(): self.show_status_message();, 10000)
 
-    def update_header_footer(self):
+    def create_template_renderer(self):
-        sd = get_session_data()
-        has_clock = False
-        pos = self.current_position_data
         if not self.book:
             return
-
+        pos = self.current_position_data
         book_length = pos.book_length * max(0, 1 - pos.progress_frac)
         chapter_length =  pos.chapter_length * max(0, 1 - pos.file_progress_frac)
         book_time = self.timers.time_for(book_length)
         chapter_time = self.timers.time_for(chapter_length)
+        mi = self.book.metadata
+
+        def render(div, name, which, override):
+            return render_head_foot(div, name, which, mi, self.current_toc_node, self.current_toc_toplevel_node, book_time, chapter_time, pos, override)
+
+        return render
+
+    def update_header_footer(self):
+        renderer = self.create_template_renderer()
+        if not renderer:
+            return
+        sd = get_session_data()
+        has_clock = False
 
         def render_template(div, edge, name):
             nonlocal has_clock
@@ -1274,11 +1284,10 @@ class View:
             b = c.previousSibling
             a = b.previousSibling
             if sd.get(f'margin_{edge}', 20) > 5:
-                mi = self.book.metadata
                 override = self.current_status_message if edge is 'bottom' else ''
-                hca = render_head_foot(a, name, 'left', mi, self.current_toc_node, self.current_toc_toplevel_node, book_time, chapter_time, pos, override)
+                hca = renderer(a, name, 'left', override)
-                hcb = render_head_foot(b, name, 'middle', mi, self.current_toc_node, self.current_toc_toplevel_node, book_time, chapter_time, pos, '')
+                hcb = renderer(b, name, 'middle', '')
-                hcc = render_head_foot(c, name, 'right', mi, self.current_toc_node, self.current_toc_toplevel_node, book_time, chapter_time, pos, '')
+                hcc = renderer(c, name, 'right', '')
                 if hca or hcb or hcc:
                     has_clock = True
             else:

src/pyj/session.pyj

@@ -36,6 +36,7 @@ defaults = {
     'current_color_scheme': 'system',
     'footer': {'right': 'progress'},
     'header': {},
+    'controls_footer': {'right': 'progress'},
     'left-margin': {},
     'right-margin': {},
     'hide_tooltips': False,