JSsidebar generated html

Hi,
When attempting to fix various problems on the sidebar (by turning elements into flex GitHub - CollaboraOnline/online at private/pedro/jssidebar-fix-use-cssclasses and failed to avoid the need for special cases) I discovered that wouldn’t solve it and led me to conclude that we would greatly benefit from having a simpler generated html structure, more flexible and easier to maintain. As recommended by @szyklos I’m pasting this somewhere before it gets lost/forgotten.

Note: I’m not talking about the JSON that comes from core side (vcl/jsdialog/jsdialogbuilder.cxx). What I’m referring to is the conversion from that to HTML elements that happens on online:JS side. Currently using a mix of Tables, Divs, etc. (browser/src/control/Control.JSDialogBuilder.js)

Main goals:

  • Have no need for hard coded corners cases (be that on the JS or CSS side)
    • And related bugs
  • Reduce the number of HTML elements we are creating and all the code around to access their children

I didn’t manage to further this, but it seems _gridHandler on Control.JSDialogBuilder.js would be a nice spot to try this out.

Here is a minimal proof of concept using CSS grid layout:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="testgrid.css">
  </head>
  <body>
    <div id="app"></div>
	<script src="testgrid.js"></script>
  </body>
</html>
/* testgrid.js */
var appEl = document.getElementById('app');
/* Easy to set number of rows and number of columns
just by setting the grid-template */
var rowT = 6;
var colT = 2;
var cellT = rowT + colT

var gridEl = '<div class="grid" style=" \
				grid-template-rows: repeat(' + rowT  + ', auto); \
				grid-template-columns: repeat(' + colT  + ', auto); ">';

for (var i = 0; i < cellT; i++) {
	gridEl += '<div class="cell">cell ' + i + '</div>';
}

gridEl += '</div>';
appEl.insertAdjacentHTML('afterend', gridEl);

/* testgrid.css */
.grid {
  display: grid;
}

.cell {
  border: 1px solid #000;
  padding: 10px;
}

Hi, I’ve just pushed demo PR of CSS Grid for sidebar and dialogs:

It requires more work with alignments, but works pretty good.