(core) Revealing hidden pages with visible children.

Summary:
When a page is hidden, all its nested pages are shown as children of
a different page that happens to be before (as in pagePos) that page.

This diff shows those pages as CENSORED.

Test Plan: Updated

Reviewers: alexmojaki

Reviewed By: alexmojaki

Subscribers: alexmojaki

Differential Revision: https://phab.getgrist.com/D3670

app/client/ui/Pages.ts

@@ -12,7 +12,7 @@ import {labeledCircleCheckbox} from 'app/client/ui2018/checkbox';
 import {theme} from 'app/client/ui2018/cssVars';
 import {cssLink} from 'app/client/ui2018/links';
 import {ISaveModalOptions, saveModal} from 'app/client/ui2018/modals';
-import {buildPageDom, PageActions} from 'app/client/ui2018/pages';
+import {buildCensoredPage, buildPageDom, PageActions} from 'app/client/ui2018/pages';
 import {mod} from 'app/common/gutil';
 import {Computed, Disposable, dom, DomContents, fromKo, makeTestId, observable, Observable, styled} from 'grainjs';
 
@@ -24,11 +24,12 @@ export function buildPagesDom(owner: Disposable, activeDoc: GristDoc, isOpen: Ob
   const buildDom = buildDomFromTable.bind(null, pagesTable, activeDoc);
 
   const records = Computed.create<TreeRecord[]>(owner, (use) =>
-    use(activeDoc.docModel.visibleDocPages).map(page => ({
+    use(activeDoc.docModel.menuPages).map(page => ({
       id: page.getRowId(),
       indentation: use(page.indentation),
       pagePos: use(page.pagePos),
       viewRef: use(page.viewRef),
+      hidden: use(page.isCensored),
     }))
   );
   const getTreeTableData = (): TreeTableData => ({
@@ -58,7 +59,12 @@ export function buildPagesDom(owner: Disposable, activeDoc: GristDoc, isOpen: Ob
 
 const testId = makeTestId('test-removepage-');
 
-function buildDomFromTable(pagesTable: MetaTableModel<PageRec>, activeDoc: GristDoc, pageId: number) {
+function buildDomFromTable(pagesTable: MetaTableModel<PageRec>, activeDoc: GristDoc, pageId: number, hidden: boolean) {
+
+  if (hidden) {
+    return buildCensoredPage();
+  }
+
   const {isReadonly} = activeDoc;
   const pageName = pagesTable.rowModels[pageId].view.peek().name;
   const viewId = pagesTable.rowModels[pageId].view.peek().id.peek();

app/client/ui/TreeViewComponent.ts

@@ -298,7 +298,7 @@ export class TreeViewComponent extends Disposable {
 
     let headerElement: HTMLElement;
     let labelElement: HTMLElement;
-    let handleElement: HTMLElement;
+    let handleElement: HTMLElement|null = null;
     let offsetElement: HTMLElement;
     let arrowElement: HTMLElement;
 
@@ -329,13 +329,14 @@ export class TreeViewComponent extends Disposable {
           ),
           delayedMouseDrag(this._startDrag.bind(this), this._options.dragStartDelay),
         ),
-        css.itemLabelRight(
+        treeItem.hidden ? null : css.itemLabelRight(
           handleElement = css.centeredIcon('DragDrop',
             dom.style('top', (use) => use(deltaY) + 'px'),
             testId('handle'),
             dom.hide(this._options.isReadonly),
           ),
-          mouseDrag((startEvent, elem) => this._startDrag(startEvent))),
+          mouseDrag((startEvent, elem) => this._startDrag(startEvent))
+        ),
       ),
       ...args
     );