the reader is expected to be an advanced Linux developer, having read ALP and having developed advanced GUI applications on Linux using GTK or Qt; notice that sadly I am not a native English speaker (but French).
I have difficulties in understanding the conceptual model of the copy/paste clipboard in recent HTML5 browsers (e.g. a Firefox 60.8, that is /usr/bin/firefox
, or a Chrome 75.0, on Linux/Debian, released this year in 2019). This is in the context of the Bismon applied research project, with a low TRL, which provides some domain specific, dynamic and transpiled language (also called Bismon), already has a Web interface generic machinery conceptually inspired by ocsigen, and is orthogonally persistent.
In X11, the model (see ICCCM & EWMH) starts by negotiating a common data format and knows about WM_CLIENT_MACHINE
and _NET_WM_PID
. This is why we can copy/paste images and rich text from Firefox to Libreoffice, even if they run on different X11 client hosts.
But let's suppose I have two instances (running on two different Linux hosts) of the same single-page web application : it is bismon, a GPLv3+ "research prototype" software which is some specialized HTTP server above libonion, with already existing components generating C - bismon
is a transpiler -, JavaScript & HTML5 (the CSS being handwritten by me) running in two different tabs of the same Linux browser. Both tabs are running some syntactic editor (in their specialized bismon
web servers), so are manipulating abstract syntax trees (textually representable in some textual serialized format, conceptually like S-expressions, XML, YAML or JSON - and without loss of generality it could be exactly some JSON). And I want to copy/paste one abstract syntax sub-tree from one tab to another. My continuously updated Bismon draft report gives further details, notably in its chapter 4. There is an already working, but very incomplete, Web interface in bismon
commit 980c2d6ff2df2
with a working login form (similar in functionality to the StackOverflow login form) setting some HTTP session cookie, in practice quite a random and unique one, such as BISMONCOOKIE=n000041R970099188t330716425o_6IHYL1fOROi_58xJPnBLCTe
. Every user (so every Bismon web browser tab) is allowed to interact, in a single page application fashion, only after having successfully logged in (conceptually analog to StackOverflow login procedure). Hence, exactly like I could have two StackOverflow users and login to them in two different web browser tabs, I might have two or three Bismon web browser tabs logged in (from Bismon's perpective) differently. Each of these tabs is a single page application browser tab (with a different and unique BISMONCOOKIE
). Here is an already working example of Bismon login form (with ./bismon
serving, for HTTP thru libonion
, on port 8086 of localhost
):
. A single physical person is running the firefox
browser on a Linux workstation (and a single Xorg display server showing that browser X11 window) with several tabs. Later, several real physical persons (Alice, Bill and me, the static analysis expert) could use different laptops (running Linux) to access the same (or even several different) Bismon process using HTTP. The hard case is probably with two different Bismon servers accessed from the same browser and physical person (that want to copy/paste content from one Bismon process to another one).
Here is a figure (its SVG source is here) showing an ideal dreamed situation (at end of 2020):
But today in 2019, Bill and the static analysis expert are actually the same physical person (me Basile) using the same single firefox
browser (running on one powerful Debian workstation) in two different tabs (and Alice could also be impersonated by me, in a third tab). And I want to copy/paste a structured content from one tab (where I have Bismon-logged in as Bill) to another one (where I have Bismon-logged in as the static analysis expert).
After a successful login with the above form, the tab have a Bismon user (technically having some web session Bismon object associated with a contributor object, as explained in the Bismon draft report §1.6.3 and §4.2; the web session object is referred by the BISMONCOOKIE
), and Bismon gives the following generated XHTML5:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title >Bismon</title>
<script src="/jscript/jquery.js" type="text/javascript"/>
<script src='/jscript/jquery-ui.js' type='text/javascript'/>
<script src='/bismon-root-jsmodule.js' type="text/javascript"/>
<script src='/jscript/bismon-hwroot.js' type="module"/>
<link href='/themes/first-theme.css' rel='stylesheet' type='text/css'/>
<link href='/css/jquery-ui.css' rel='stylesheet' type='text/css'/>
</head>
<body >
<h1 >Bismon</h1>
<nav class='bmcl_topnav' id='topnav_8LMWqayq5sW_9G2xsSpA0yS' >
☛
<button class='bmcl_topbut' id='topbut_4m9twhDXB7k_88CBTgLfGvs' > App </button>
</nav>
<p class='bmcl_hellopara' id='hellop_0uAT1v6dH9d_1o3q8wzbV7K' > Hello Basile Starynkevitch your web session is <tt class='bmcl_cookie'>BISMONCOOKIE=n000001R59317675t289012178o_5FKgTFl64f2_2h8Y79EvsK7</tt> </p>
<ul class='bmcl_topmenu ui-menu' id='topmenu_2hnb4LnCzga_48CQrsBJofR' >
<li class='bmcl_topmenutitle ui-menu-item ui-state-disabled' id='topmtitle_6G1xOyeten5_7SqZ4EcQe8T' ><div >application : </div></li>
<li class='bmcl_topmenuitem ui-menu-item' id='topmitem_1SiDnlyQRR6_5meHUV4d3iF' ><div >dump</div></li>
<li class='bmcl_topmenuitem ui-menu-item' id='topmitem_9ZmJrhdpjae_79WiEHOVpbE' ><div >exit</div></li>
<li class='bmcl_topmenuitem ui-menu-item' id='topmitem_2nguorns5mY_2UnseYw0xRf' ><div >quit</div></li>
</ul>
</body>
</html>
<!-- end root-web-handler o_webex=_7rOPSVsyZnS_31DSTvb99w7; o_websess=_5FKgTFl64f2_2h8Y79EvsK7 at 2019 Jul 26, 05:15:35.52 MEST -->
A quite generic existing infrastructure in Bismon is capable of generating quite arbitrary XHTML5 (with SVG!) code like above (from some Bismon specific runtime data). A generic infrastructure also exists in Bismon to generate JavaScript code (transpiled from some Bismon specific domain specific language).
My ambition is to code, in my Bismon system, something with a fancy web interface, capable of editing some abstract syntax tree, perhaps appearing in the Web browser tab in a way close to the below figure (taken from wikipedia):
In the future, the Bismon user would have a tab with a content similar to above figure, and might, for example, click on the while
box, and conveniently replace it with some until
box. That idea (of syntax-oriented visual editors) is not new: Centaur implemented a similar idea in the 1980s. I want to implement a similar thing in Bismon using Web technologies. And I want to copy/paste, from one tab to another of the same Firefox browser, entire, well formed, abstract syntax sub-trees (or, at the conceptual level, well written S-expressions representing such AST subtrees)
The general use case is several Bismon processes A, B, .... Each of them is HTTP-serving and single-page-application filling browsers tabs TA (for A), TB (for B), ... I want to copy/paste some AST part (an abstract syntax subtree) from TA to TB. The same human person could be logged in (thru the login form shown above) as three different Bismon users and using three different tabs TA, TB, TC.
question
How should I design such a thing? FWIW, every software involved - Bismon, web browsers, etc...- is (contractually, in the H2020 project funding that work) open source software on Linux. And Bismon is in july 2019 at TRL 2 and might, if all goes well, reach TRL 3 at end of 2020.
Notice that I am not asking about AJAX code manipulating the DOM, I am asking about the concepts explaining copy/pasting (of some structured tree-like data, expressible in XML or in S-exprs or JSON, and displayed as nested HTML5 or SVG DOM elements) between two different tabs of the same browser. Also, I would like that the copy source and paste destination web tabs (hence their different web servers) to communicate some data which has no visual appearance (preferably even without any display:none
HTML5 element).
In other words, I am trying to find and understand the equivalent of ICCCM & EWMH for web technologies, about copy/pasting between two tabs of the same recent Firefox (or Chrome) browser on Linux. My feeling (just a guess) is that it is frowned upon (for security reasons) to copy/paste between two different tabs, but I don't know the details. I did found this W3C clipboard API but I am guessing most of it is not yet implemented today. What is exactly available today in practice on recent Linux browsers? Also, real-life code examples (working with Firefox 60.7 on Debian/Linux/x86-64) are welcome!
My question could be rephrased as: how to copy/paste, using Linux with a recent Xorg and some EWMH compliant window manager only (I don't care about other OSes at all!), some textual format content (probably JSON, but it could be my own Bismon textual format) with its MIME type from one tab (driven by Bismon on Linux host A
) to another tab (single page web application tab of Bismon on Linux host B
) of the same browser? Ideally, I would prefer not changing the DOM at all (exactly in the same spirit of EWMH), but if possible I don't want a visual change of it (since the actual DOM modification would be controlled by Bismon AJAX or WebSocket handshakes or exchanges).
The several tabs are illustrated in the figure bismon-monitor.svg
. In that figure, in some weird cases, Alice, Bob, and the left-side static analysis expert, could be impersonated by just me Basile, Bismon-logged in three times as 3 different Bismon-users, using three different tabs on the same Firefox browser (on Linux), and the Bismon server (or bismon monitor on that figure; in weird cases, we could even imagine 2 or 3 Bismon monitor processes running on different machines...) is also running on Linux and serving HTTP using libonion
, and I want to copy/paste semantic contents representing complex ASTs (Bismon objects, in my parlance) from one browser tab to another one. If I was using GTK or Qt I would be able to code that without issues (since both have a flexible, generic, well document, clipboard & copy/paste related API).
From a user point of view, I am almost asking about the detailed design of some collaborative software tool, using Web technologies, and capable of editing some sophisticated proof (or mathematical text or wiki with formulae) within a small team.
My draft report has dozen more pages about my ideas (and references to systems as old as Centaur and Mentor related to them). I want to implement these ideas using modern Web technologies in my bismon
GPLv3+ system. If I was using GTK or Qt, implementing these ideas is just a matter of coding (using also ssh -X
or similar stuff). But I am less familiar with web technologies, however, Google docs is capable of copy/pasting like I dream of.
I was further thinking of copy/pasting HTML elements, from a browser tab TA interacting with bismon process A running on port 8086 of localhost
to another bismon process B, running on port 8087 of localhost
and shown in browser tab TB. Such copied HTML elements might contain <a href='http://localhost:8086/somequery?param1=val1¶m2=val2'><span class='some_cl'>some <b>content</b></span></a>
etc..? Could that work?
Don't forget that this is a research project with a very low TRL. I can make it work with even one browser (the latest Linux Firefox or Chrome being my personal preference)
To summarize my question :
what are the ideas of the design of copy/pasting from one browser tab to another one some complex structured contents in Google Docs or in TinyMCE (with several HTTP wiki servers involved!) ? How would you, the hypothetical software architect of such applications, guide the junior developer coding them?
I heard that it might be difficult for security reasons. The intuition is that a malicious web site (running in different browser tab) should not be even able to copy the credit card number I have just filled in another browser tab used for the legitimate web interface to my bank account.
PS: I am today july 2019 a quite senior software developer, aged 60, (with a PhD in CS from 1990) coding professionally since 1985, but today, as a new web developer, I am still a newbie in that area (but I have some academic knowledge about HTTP, cookies, HTML5, DOM, AJAX, JavaScript, ... but very few concrete practical coding experience)
PPS. See also this.
A
you havehttps://bismonA/model1
open. In tabB
you havehttps://bismonB/model2
open. You select an element inA
and copyhttp://bismonA/model1/e5fd67
(a node reference) and paste that text into yourB
tab under an existing node. That link is then sent tohttps://bismonB/model2
along with the node you want to attach it to. BismonB calls (using any number of HTTP libs) BismonA and retrieves the fragment (and validates it.) Then the fragment is incorporated into model2. The browser tabB
gets a response that provides some data or notification of the change.