Skip to content

Commit

Permalink
View HTML: add CSS helpers with long-press
Browse files Browse the repository at this point in the history 
Move View html code from ReaderHighlight to a new
dedicated module.
Long-press on an element or its text in the HTML will
show a popup with a list of selectors related to this
element that can be copied to clipboard (to be pasted
in Find or in a Book style tweak).
2 addtional buttons in this popup allow seeing all the
CSS rulesets in all stylesheets that would be matched by
this element, which should make it easier understanding
the publisher stylesheets and using or creating style
tweaks.
  • Loading branch information
@poire-z
poire-z committed Mar 5, 2023
1 parent 945a1cc commit eeb3c08
Show file tree
Hide file tree
Showing 3 changed files with 438 additions and 122 deletions.
124 changes: 2 additions & 122 deletions frontend/apps/reader/modules/readerhighlight.lua
View file
Expand Up @@ -1337,128 +1337,8 @@ end
function ReaderHighlight:viewSelectionHTML(debug_view, no_css_files_buttons)
if self.ui.paging then return end
if self.selected_text and self.selected_text.pos0 and self.selected_text.pos1 then
-- For available flags, see the "#define WRITENODEEX_*" in crengine/src/lvtinydom.cpp
-- Start with valid and classic displayed HTML (with only block nodes indented),
-- including styles found in <HEAD>, linked CSS files content, and misc info.
local html_flags = 0x6830
if not debug_view then
debug_view = 0
end
if debug_view == 1 then
-- Each node on a line, with markers and numbers of skipped chars and siblings shown,
-- with possibly invalid HTML (text nodes not escaped)
html_flags = 0x6B5A
elseif debug_view == 2 then
-- Additionally see rendering methods of each node
html_flags = 0x6F5A
elseif debug_view == 3 then
-- Or additionally see unicode codepoint of each char
html_flags = 0x6B5E
end
local html, css_files = self.ui.document:getHTMLFromXPointers(self.selected_text.pos0,
self.selected_text.pos1, html_flags, true)
if html then
-- Make some invisible chars visible
if debug_view >= 1 then
html = html:gsub("\xC2\xA0", "␣") -- no break space: open box
html = html:gsub("\xC2\xAD", "⋅") -- soft hyphen: dot operator (smaller than middle dot ·)
-- Prettify inlined CSS (from <HEAD>, put in an internal
-- <body><stylesheet> element by crengine (the opening tag may
-- include some href=, or end with " ~X>" with some html_flags)
-- (We do that in debug_view mode only: as this may increase
-- the height of this section, we don't want to have to scroll
-- many pages to get to the HTML content on the initial view.)
html = html:gsub("(<stylesheet[^>]*>)%s*(.-)%s*(</stylesheet>)", function(pre, css_text, post)
return pre .. "\n" .. util.prettifyCSS(css_text) .. post
end)
end
local Font = require("ui/font")
local textviewer
local buttons_hold_callback = function()
-- Allow hiding css files buttons if there are too many
-- and the available height for text is too short
UIManager:close(textviewer)
self:viewSelectionHTML(debug_view, not no_css_files_buttons)
end
local buttons_table = {}
if css_files and not no_css_files_buttons then
for i=1, #css_files do
local button = {
text = T(_("View %1"), BD.filepath(css_files[i])),
callback = function()
local css_text = self.ui.document:getDocumentFileContent(css_files[i])
local cssviewer
cssviewer = TextViewer:new{
title = css_files[i],
text = css_text or _("Failed getting CSS content"),
text_face = Font:getFace("smallinfont"),
justified = false,
para_direction_rtl = false,
auto_para_direction = false,
add_default_buttons = true,
buttons_table = {
{{
text = _("Prettify"),
enabled = css_text and true or false,
callback = function()
UIManager:close(cssviewer)
UIManager:show(TextViewer:new{
title = css_files[i],
text = util.prettifyCSS(css_text),
text_face = Font:getFace("smallinfont"),
justified = false,
para_direction_rtl = false,
auto_para_direction = false,
})
end,
}},
}
}
UIManager:show(cssviewer)
end,
hold_callback = buttons_hold_callback,
}
-- One button per row, to make room for the possibly long css filename
table.insert(buttons_table, {button})
end
end
local next_debug_text
local next_debug_view = debug_view + 1
if next_debug_view == 1 then
next_debug_text = _("Switch to debug view")
elseif next_debug_view == 2 then
next_debug_text = _("Switch to rendering debug view")
elseif next_debug_view == 3 then
next_debug_text = _("Switch to unicode debug view")
else
next_debug_view = 0
next_debug_text = _("Switch to standard view")
end
table.insert(buttons_table, {{
text = next_debug_text,
callback = function()
UIManager:close(textviewer)
self:viewSelectionHTML(next_debug_view, no_css_files_buttons)
end,
hold_callback = buttons_hold_callback,
}})
textviewer = TextViewer:new{
title = _("Selection HTML"),
text = html,
text_face = Font:getFace("smallinfont"),
justified = false,
para_direction_rtl = false,
auto_para_direction = false,
add_default_buttons = true,
default_hold_callback = buttons_hold_callback,
buttons_table = buttons_table,
}
UIManager:show(textviewer)
else
UIManager:show(InfoMessage:new{
text = _("Failed getting HTML for selection"),
})
end
local ViewHtml = require("ui/viewhtml")
ViewHtml:viewSelectionHTML(self.ui.document, self.selected_text)
end
end

Expand Down
4 changes: 4 additions & 0 deletions frontend/document/credocument.lua
View file
Expand Up @@ -937,6 +937,10 @@ function CreDocument:getHTMLFromXPointers(xp0, xp1, flags, from_root_node)
end
end

function CreDocument:getStylesheetsMatchingRulesets(node_dataindex)
return self._document:getStylesheetsMatchingRulesets(node_dataindex)
end

function CreDocument:getNormalizedXPointer(xp)
-- Returns false when xpointer is not found in the DOM.
-- When requested DOM version >= getDomVersionWithNormalizedXPointers,
Expand Down

0 comments on commit eeb3c08

Please sign in to comment.