[feat, UX] Support the virtualKeyboard on non touch-device (#3796)

* [VirtualKeyboard] Add support for keynaviguation

Also rename the variable "layout" to "keyboard_layout" because conflict
with the layout from the focusmanager

* Make the goto dialog compatible with key naviguation

My solution is to change the order of the widget. The last one will the
virtualkeybard so it catch all the keybinding, and below it, make the
dialog "is_always_active = true" so it can receive touch event.

* Correctly show the virtual keyboard on dpad devices

* change the order to call the virtualKeyboard so it end up on top

* Handle the multi input dialog

* Support reopening the virtualKeyboard by the Press key

* add check focusmanager

* Fix #3797

* MultiInputDialog : Now work on non touch-device

* Set the virtualkeyboard to be a modal widget

* Fix the layout in multiinputwidget

* Fix for the various combination of
hasKeys,hasDpad,isTouchDevice

* [Focusmanager] Better handling of malformed layout

frontend/apps/cloudstorage/dropbox.lua

@@ -111,8 +111,8 @@ function DropBox:config(item, callback)
         height = Screen:getHeight() * 0.2,
         input_type = "text",
     }
-    self.settings_dialog:onShowKeyboard()
     UIManager:show(self.settings_dialog)
+    self.settings_dialog:onShowKeyboard()
 end
 
 function DropBox:info(token)

frontend/apps/cloudstorage/ftp.lua

@@ -140,8 +140,8 @@ function Ftp:config(item, callback)
         height = Screen:getHeight() * 0.2,
         input_type = "text",
     }
-    self.settings_dialog:onShowKeyboard()
     UIManager:show(self.settings_dialog)
+    self.settings_dialog:onShowKeyboard()
 end
 
 function Ftp:info(item)

frontend/apps/filemanager/filemanager.lua

@@ -264,8 +264,8 @@ function FileManager:init()
                                 },
                             }},
                         }
-                        fileManager.rename_dialog:onShowKeyboard()
                         UIManager:show(fileManager.rename_dialog)
+                        fileManager.rename_dialog:onShowKeyboard()
                     end,
                 }
             },
@@ -404,8 +404,8 @@ function FileManager:tapPlus()
                             }
                         },
                     }
-                    self.input_dialog:onShowKeyboard()
                     UIManager:show(self.input_dialog)
+                    self.input_dialog:onShowKeyboard()
                 end,
             },
         },

frontend/apps/filemanager/filemanagerfilesearcher.lua

@@ -138,8 +138,8 @@ function FileSearcher:showSearch()
             },
         },
     }
-    self.search_dialog:onShowKeyboard()
     UIManager:show(self.search_dialog)
+    self.search_dialog:onShowKeyboard()
 end
 
 function FileSearcher:showSearchResults()

frontend/apps/filemanager/filemanagersearch.lua

@@ -205,8 +205,8 @@ function Search:ShowSearch()
             width = Screen:getWidth() * 0.8,
             height = Screen:getHeight() * 0.2,
         }
-        self.search_dialog:onShowKeyboard()
         UIManager:show(self.search_dialog)
+        self.search_dialog:onShowKeyboard()
     else
         if self.error then
             UIManager:show(InfoMessage:new{

frontend/apps/filemanager/filemanagersetdefaults.lua

@@ -154,8 +154,8 @@ function SetDefaults:init()
                     input_type = setting_type,
                     width = Screen:getWidth() * 0.95,
                 }
-                self.set_dialog:onShowKeyboard()
                 UIManager:show(self.set_dialog)
+                self.set_dialog:onShowKeyboard()
             end
 
             table.insert(self.results, {
@@ -205,8 +205,8 @@ function SetDefaults:init()
                     width = Screen:getWidth() * 0.95,
                     height = Screen:getHeight() * 0.2,
                 }
-                self.set_dialog:onShowKeyboard()
                 UIManager:show(self.set_dialog)
+                self.set_dialog:onShowKeyboard()
             end
 
             table.insert(self.results, {
@@ -244,8 +244,8 @@ function SetDefaults:init()
                     input_type = setting_type,
                     width = Screen:getWidth() * 0.95,
                 }
-                self.set_dialog:onShowKeyboard()
                 UIManager:show(self.set_dialog)
+                self.set_dialog:onShowKeyboard()
             end
 
             table.insert(self.results, {

frontend/apps/reader/modules/readerbookmark.lua

@@ -482,8 +482,8 @@ function ReaderBookmark:renameBookmark(item, from_highlight)
             }
         },
     }
-    self.input:onShowKeyboard()
     UIManager:show(self.input)
+    self.input:onShowKeyboard()
 end
 
 function ReaderBookmark:toggleBookmark(pn_or_xp)

frontend/apps/reader/modules/readergoto.lua

@@ -84,8 +84,8 @@ function ReaderGoto:onShowGotoDialog()
         },
         input_type = "number",
     }
-    self.goto_dialog:onShowKeyboard()
     UIManager:show(self.goto_dialog)
+    self.goto_dialog:onShowKeyboard()
 end
 
 function ReaderGoto:onShowSkimtoDialog()

frontend/apps/reader/modules/readerwikipedia.lua

@@ -58,8 +58,8 @@ function ReaderWikipedia:lookupInput()
             }
         },
     }
-    self.input_dialog:onShowKeyboard()
     UIManager:show(self.input_dialog)
+    self.input_dialog:onShowKeyboard()
 end
 
 function ReaderWikipedia:addToMainMenu(menu_items)
@@ -165,8 +165,8 @@ function ReaderWikipedia:addToMainMenu(menu_items)
                             }
                         },
                     }
-                    wikilang_input:onShowKeyboard()
                     UIManager:show(wikilang_input)
+                    wikilang_input:onShowKeyboard()
                 end,
             },
             { -- setting used by dictquicklookup

frontend/apps/reader/readerui.lua

@@ -521,8 +521,8 @@ function ReaderUI:unlockDocumentWithPassword(document, try_again)
         },
         text_type = "password",
     }
-    self.password_dialog:onShowKeyboard()
     UIManager:show(self.password_dialog)
+    self.password_dialog:onShowKeyboard()
 end
 
 function ReaderUI:onVerifyPassword(document)

frontend/ui/screensaver.lua

@@ -130,8 +130,8 @@ function Screensaver:setMessage()
             },
         },
     }
-    self.input_dialog:onShowKeyboard()
     UIManager:show(self.input_dialog)
+    self.input_dialog:onShowKeyboard()
 end
 
 function Screensaver:show(event, fallback_message)

frontend/ui/uimanager.lua

@@ -476,8 +476,8 @@ function UIManager:sendEvent(event)
             end
             if widget.widget.is_always_active then
                 -- active widgets will handle this event
-                -- Note: is_always_active widgets currently are vitualkeyboard and
-                -- readerconfig
+                -- Note: is_always_active widgets currently are widgets that want to show a keyboard
+                -- and readerconfig
                 checked_widgets[widget] = true
                 if widget.widget:handleEvent(event) then return end
             end

frontend/ui/widget/bookstatuswidget.lua

@@ -575,8 +575,8 @@ function BookStatusWidget:onSwitchFocus(inputbox)
             },
         },
     }
-    self.note_dialog:onShowKeyboard()
     UIManager:show(self.note_dialog)
+    self.note_dialog:onShowKeyboard()
 end
 
 function BookStatusWidget:closeInputDialog()

frontend/ui/widget/buttontable.lua

@@ -85,7 +85,7 @@ function ButtonTable:init()
         end
     end -- end for each button line
     self:addHorizontalSep(true, false, false)
-    if Device:hasDPad() or Device:hasKeyboard() then
+    if Device:hasKeys() then
         self.layout = self.buttons_layout
         self.layout[1][1]:onFocus()
         self.key_events.SelectByKeyPress = { {{"Press", "Enter"}} }

frontend/ui/widget/container/inputcontainer.lua

@@ -236,8 +236,8 @@ function InputContainer:onInput(input)
             },
         },
     }
-    self.input_dialog:onShowKeyboard()
     UIManager:show(self.input_dialog)
+    self.input_dialog:onShowKeyboard()
 end
 
 function InputContainer:closeInputDialog()

frontend/ui/widget/dictquicklookup.lua

@@ -860,8 +860,8 @@ function DictQuickLookup:lookupInputWord(hint)
             }
         },
     }
-    self.input_dialog:onShowKeyboard()
     UIManager:show(self.input_dialog)
+    self.input_dialog:onShowKeyboard()
 end
 
 function DictQuickLookup:inputLookup()

frontend/ui/widget/focusmanager.lua

@@ -1,3 +1,4 @@
+local Device = require("device")
 local Event = require("ui/event")
 local InputContainer = require("ui/widget/container/inputcontainer")
 local logger = require("logger")
@@ -33,13 +34,15 @@ function FocusManager:init()
     if not self.selected then
         self.selected = { x = 1, y = 1 }
     end
-    self.key_events = {
-        -- these will all generate the same event, just with different arguments
-        FocusUp =    { {"Up"},    doc = "move focus up",    event = "FocusMove", args = {0, -1} },
-        FocusDown =  { {"Down"},  doc = "move focus down",  event = "FocusMove", args = {0,  1} },
-        FocusLeft =  { {"Left"},  doc = "move focus left",  event = "FocusMove", args = {-1, 0} },
-        FocusRight = { {"Right"}, doc = "move focus right", event = "FocusMove", args = {1,  0} },
-    }
+    if Device:hasKeys() then
+        self.key_events = {
+            -- these will all generate the same event, just with different arguments
+            FocusUp =    { {"Up"},    doc = "move focus up",    event = "FocusMove", args = {0, -1} },
+            FocusDown =  { {"Down"},  doc = "move focus down",  event = "FocusMove", args = {0,  1} },
+            FocusLeft =  { {"Left"},  doc = "move focus left",  event = "FocusMove", args = {-1, 0} },
+            FocusRight = { {"Right"}, doc = "move focus right", event = "FocusMove", args = {1,  0} },
+        }
+    end
 end
 
 function FocusManager:onFocusMove(args)
@@ -62,7 +65,9 @@ function FocusManager:onFocusMove(args)
             end
         elseif not self.layout[self.selected.y + dy][self.selected.x] then
             --inner horizontal border, trying to be clever and step down
-            self:_verticalStep(dy)
+            if not self:_verticalStep(dy) then
+                break
+            end
         elseif not self.layout[self.selected.y + dy][self.selected.x + dx] then
             --vertical border, no wraparound
             break
@@ -97,7 +102,7 @@ function FocusManager:_wrapAround(dy)
         self.selected.y = y
         if not self.layout[self.selected.y][self.selected.x] then
             --call verticalStep on the current line to perform the search
-            self:_verticalStep(0)
+            return self:_verticalStep(0)
         end
         return true
     else
@@ -107,6 +112,10 @@ end
 
 function FocusManager:_verticalStep(dy)
     local x = self.selected.x
+    if type(self.layout[self.selected.y + dy]) ~= "table" or self.layout[self.selected.y + dy] == {} then
+        logger.err("[FocusManager] : Malformed layout")
+        return false
+    end
     --looking for the item on the line below, the closest on the left side
     while not self.layout[self.selected.y + dy][x] do
         x = x - 1
@@ -120,6 +129,7 @@ function FocusManager:_verticalStep(dy)
     end
     self.selected.x = x
     self.selected.y = self.selected.y + dy
+    return true
 end
 
 function FocusManager:getFocusItem()

frontend/ui/widget/infomessage.lua

@@ -18,8 +18,8 @@ Example:
         show_icon = false,
         timeout = 5,  -- This widget will vanish in 5 seconds.
     }
-    sample_input:onShowKeyboard()
     UIManager:show(sample_input)
+    sample_input:onShowKeyboard()
 ]]
 
 local Blitbuffer = require("ffi/blitbuffer")

frontend/ui/widget/inputdialog.lua

@@ -34,8 +34,8 @@ Example:
             }
         },
     }
-    sample_input:onShowKeyboard()
     UIManager:show(sample_input)
+    sample_input:onShowKeyboard()
 
 If it would take the user more than half a minute to recover from a mistake,
 a "Cancel" button <em>must</em> be added to the dialog. The cancellation button
@@ -50,6 +50,7 @@ longer than three words it should just read "OK".
 local Blitbuffer = require("ffi/blitbuffer")
 local ButtonTable = require("ui/widget/buttontable")
 local CenterContainer = require("ui/widget/container/centercontainer")
+local Device = require("device")
 local Font = require("ui/font")
 local FrameContainer = require("ui/widget/container/framecontainer")
 local Geom = require("ui/geometry")
@@ -64,9 +65,10 @@ local TextWidget = require("ui/widget/textwidget")
 local UIManager = require("ui/uimanager")
 local VerticalGroup = require("ui/widget/verticalgroup")
 local VerticalSpan = require("ui/widget/verticalspan")
-local Screen = require("device").screen
+local Screen = Device.screen
 
 local InputDialog = InputContainer:new{
+    is_always_active = true,
     title = "",
     input = "",
     input_hint = "",
@@ -195,6 +197,10 @@ function InputDialog:init()
             }
         }
     }
+    if Device:hasKeys() then
+        --little hack to piggyback on the layout of the button_table to handle the new InputText
+        table.insert(self.button_table.layout, 1, {self._input_widget})
+    end
 
     self[1] = CenterContainer:new{
         dimen = Geom:new{