As demonstrated and discussed in the original proof-of-concept branch, we want to hide the status bar and menu bar in the popup window via a query parameter. So by appending ?viewMode=standalone to the TinyPilot URL, this PR hides the status bar, the menu bar, and the on-screen keyboard.
We will use this in a later PR, when adding the menu item for opening a “real” popup window.
The query parameter can also be used independent of the popup window, which e.g. allows for the iframe use-case.
Notes
prettier-ignore is needed above <remote-screen>, since Prettier cannot handle Jinja2 templates, and would enforce a pretty bulky formatting otherwise.
I had to pull out a --bar-padding CSS variable in the <remote-screen> component, so that we can dynamically override the value. I forgot that in the earlier PR.
In index.html, I injected the display: none via a plain <style> block to hide the elements from the page. Since index.html itself isn’t a web component, I’m not sure we can mimic our usual pattern with HTML attributes here (example), at least not without introducing more complexity and indirection. The <style> block is not super beautiful, but I thought it’s simple and straightforward at least.
Note sure standalone is the greatest name for the query parameter value. Potential alternatives: “screen-only”, “focus-mode”, “dedicated-screen”. (It’s maybe not that critical, however… 🤔) In any event, I found something like ?viewMode=standalone more descriptive and flexible than standaloneMode=true.
Part of https://github.com/tiny-pilot/tinypilot/issues/728, stacked onto https://github.com/tiny-pilot/tinypilot/pull/1586.
As demonstrated and discussed in the original proof-of-concept branch, we want to hide the status bar and menu bar in the popup window via a query parameter. So by appending
?viewMode=standaloneto the TinyPilot URL, this PR hides the status bar, the menu bar, and the on-screen keyboard.We will use this in a later PR, when adding the menu item for opening a “real” popup window.
The query parameter can also be used independent of the popup window, which e.g. allows for the iframe use-case.
Notes
prettier-ignoreis needed above<remote-screen>, since Prettier cannot handle Jinja2 templates, and would enforce a pretty bulky formatting otherwise.--bar-paddingCSS variable in the<remote-screen>component, so that we can dynamically override the value. I forgot that in the earlier PR.index.html, I injected thedisplay: nonevia a plain<style>block to hide the elements from the page. Sinceindex.htmlitself isn’t a web component, I’m not sure we can mimic our usual pattern with HTML attributes here (example), at least not without introducing more complexity and indirection. The<style>block is not super beautiful, but I thought it’s simple and straightforward at least.standaloneis the greatest name for the query parameter value. Potential alternatives: “screen-only”, “focus-mode”, “dedicated-screen”. (It’s maybe not that critical, however… 🤔) In any event, I found something like?viewMode=standalonemore descriptive and flexible thanstandaloneMode=true.