fix for screenshot not capturing full height

Fixes #712

better solution for #77

fix for sticky grid header
Fixes #722

Author: starpit

app/content/css/ui.css

@@ -67,6 +67,10 @@ body.sidecar-is-minimized .header {
 .header-left-bits {
     flex: 1;
 }
+.header-top-bits {
+    display: flex;
+    flex: 1;
+}
 .header .clickable, .header .clickable:hover {
     text-decoration: none;
     transition: none;
@@ -523,6 +527,7 @@ sidecar.visible {
 .sidecar-bottom-stripe {
     padding: 0 1em;
     flex-basis: 3em;
+    min-height: 3rem; /* see shell issue #712 */
     display: flex;
     align-items: center;
     font-size: 0.875em;
@@ -642,8 +647,10 @@ sidecar .custom-content {
 }
 sidecar .sidecar-header {
     display: flex;
+    flex-direction: column;
     border-bottom: 1px solid;
     flex-basis: 9rem;
+    min-height: 9rem; /* see shell issue #712 */
 }
 sidecar .header-right-bits {
     flex-direction: column;
@@ -777,7 +784,7 @@ sidecar.entity-is-activations .sidecar-header-name  .sidecar-header-name-content
 sidecar .sidecar-header-secondary-content {
     font-size: 0.875rem;
     opacity: 0.75;
-    margin: 1ex 0;
+    margin: 1ex 2em;
 }
 sidecar .sidecar-header-secondary-content .kind-content {
     overflow: hidden;

app/content/js/ui.js

@@ -912,6 +912,24 @@ const ui = (function() {
 
         const sidecar = document.querySelector('#sidecar')
 
+        if (custom.controlHeaders === true) {
+            // plugin will control all headers
+        } else if (!custom.controlHeaders) {
+            // plugin will control no headers
+            const customHeaders = sidecar.querySelectorAll('.custom-header-content')
+            for (let idx = 0; idx < customHeaders.length; idx++) {
+                ui.removeAllDomChildren(customHeaders[idx])
+            }
+        } else {
+            // plugin will control some headers; it tell us which it wants us to control
+            custom.controlHeaders.forEach(_ => {
+                const customHeaders = sidecar.querySelectorAll(`${_} .custom-header-content`)
+                for (let idx = 0; idx < customHeaders.length; idx++) {
+                    ui.removeAllDomChildren(customHeaders[idx])
+                }
+            })
+        }
+
         // which viewer is currently active?
         sidecar.setAttribute('data-active-view', '.custom-content > div')
 

app/content/js/usage-error.js

@@ -279,17 +279,26 @@ const format = (message, options={}) => {
 
         // detailed example command
         if (detailedExample) {
-            const examplePart = bodyPart(),
-                  prePart = prefix('Example'),
-                  textPart = div(detailedExample.command),
-                  docPart = sans(div(detailedExample.docs))
+            const examples = !Array.isArray(detailedExample) ? [detailedExample] : detailedExample
 
+            const examplePart = bodyPart(),
+                  prePart = prefix(examples.length === 1 ? 'Example' : 'Examples')
             left.appendChild(examplePart)
             examplePart.appendChild(prePart)
-            examplePart.appendChild(textPart)
-            examplePart.appendChild(smaller(docPart))
 
-            textPart.style.color = 'var(--color-support-02)'
+            examples.forEach(({command, docs}, idx) => {
+                const textPart = div(command),
+                      docPart = sans(div(docs))
+
+                examplePart.appendChild(textPart)
+                examplePart.appendChild(smaller(docPart))
+
+                textPart.style.color = 'var(--color-support-02)'
+
+                if (idx > 0) {
+                    textPart.style.marginTop = '1em'
+                }
+            })
         }
 
         /**

app/plugins/modules/activation-visualizations/lib/grid.js

@@ -159,6 +159,7 @@ const drawGrid = (options, header) => activations => {
     return {
         type: 'custom',
         content,
+        controlHeaders: true,
         modes: modes('grid', options)
     }
 }

app/plugins/modules/activation-visualizations/lib/table.js

@@ -521,7 +521,7 @@ const _drawTable = (options, header, content, groupData, eventBus, sorter=defaul
                 medianDot.style.left = percent(medianLeft)
                 medianDot.setAttribute('data-balloon', prettyPrintDuration(thisMedian))
                 medianDot.setAttribute('data-balloon-length', 'small')
-                medianDot.setAttribute('data-balloon-pos', balloonPos)
+                medianDot.setAttribute('data-balloon-pos', 'right')
                 focus(medianDot)
 
                 // outlier activations

app/plugins/modules/activation-visualizations/lib/util.js

@@ -278,7 +278,7 @@ exports.displayTimeRange = ({minTime, maxTime, totalCount}, container) => {
  */
 exports.prepareHeader = isRedraw => {
     const sidecar = document.querySelector('#sidecar'),
-          leftHeader = sidecar.querySelector('.header-left-bits .sidecar-header-secondary-content .custom-header-content'),
+          leftHeader = sidecar.querySelector('.sidecar-header-secondary-content .custom-header-content'),
           rightHeader = sidecar.querySelector('.header-right-bits .custom-header-content')
 
     if (!isRedraw) {

app/plugins/modules/activation-visualizations/web/css/table.css

@@ -212,15 +212,15 @@
 .activation-viz-plugin .data-table td.cell-stats .stat-median-dot, .activation-viz-plugin.show-outliers .outlier-dot {
     position: absolute;
     width: 0.4em;
-    height: 2.2em;
-    background: #56D2BB;
+    height: 1.75em;
+    background: #67a9cf;
     outline: 2px solid rgba(255,255,255,0.5);
     border: 1px solid rgba(0,0,0,0.9);
     transition: all 150ms ease-in-out;
 }
 .activation-viz-plugin.show-outliers .outlier-dot {
     /* dot representing an outlier activation */
-    background: #3C6DF0;
+    background: #b2182b;
     opacity: 0.6;
     border-color: rgba(255,255,255,0.2);
     width: 0.3em;
@@ -254,17 +254,16 @@
 .activation-viz-plugin .data-table td.cell-stats .stat-indicator {
     position: absolute;
     color: white;
-    /*mix-blend-mode: difference;*/
-    font-size: 0.6875em;
+    font-size: 0.6em;
     opacity: 0.8;
 }
 .activation-viz-plugin .data-table td.cell-stats .stat-bar:hover {
     outline: 1px solid rgba(0, 85, 127, 0.2)
 }
 .activation-viz-plugin .data-table td.cell-stats .stat-bar {
     position: absolute;
-    background: hsla(171, 100%, 25%, 1);  /* #00A78F with Lightness reduced from 33% to 25% */
-    height: 1.9em;  /* matches activation list height: .log-lines .log-line .log-line-bar in ui.css */
+    background: #2166ac;
+    height: 1.25em;  /* matches activation list height: .log-lines .log-line .log-line-bar in ui.css */
     transition: all 150ms ease-in-out, outline 300ms ease-in-out;
 }
     /* focused bar */
@@ -747,12 +746,12 @@ body.subwindow .grid-grid:not(.activation-viz-timeline) {
 }
 .activation-summary-range-selector li {
     list-style: none;
-    border: 1px solid var(--color-brand-01);
+    border: 1px solid var(--color-text-02);
     padding: 0 2em;
     font-weight: 400;
     font-size: 0.75em;
     display: flex;
-    color: var(--color-brand-01);
+    color: var(--color-text-02);
     align-items: center;
     transition: all 150ms ease-in-out;
     -webkit-font-smoothing: antialiased; /* fonts a bit too bold otherwise */
@@ -770,15 +769,15 @@ body.subwindow .grid-grid:not(.activation-viz-timeline) {
     border-bottom-right-radius: 8px;
 }
 .activation-summary-range-selector li:hover {
-    background: var(--color-brand-02);
+    background: var(--color-text-01);
     color: white;
     cursor: pointer;
 }
 .activation-summary-range-selector li.selected {
-    background: var(--color-brand-01);
+    background: var(--color-text-02);
     color: white;
 }
 .activation-summary-range-selector li.partially-selected {
-    background: var(--color-brand-02);
+    background: var(--color-text-01);
     color: white;
 }

app/plugins/modules/editor/lib/edit.js

@@ -298,16 +298,11 @@ const updateText = editor => action => {
 let amdRequire   // the monaco editor uses the AMD module loader, and smashes the global.require; we need to finagle it a bit
 let initDone     // this is part of the finagling, to make sure we finagle only once
 const openEditor = wsk => {
-    const sidecar = document.querySelector('#sidecar'),
-          leftHeader = sidecar.querySelector('.header-left-bits .sidecar-header-secondary-content .custom-header-content'),
-          rightHeader = sidecar.querySelector('.header-right-bits .custom-header-content')
+    const sidecar = document.querySelector('#sidecar')
 
     /** returns the current action entity */
     const getAction = () => sidecar.entity
 
-    ui.removeAllDomChildren(leftHeader)
-    ui.removeAllDomChildren(rightHeader)
-
     // Monaco uses a custom amd loader that over-rides node's require.
     // Keep a reference to node's require so we can restore it after executing the amd loader file.
     const nodeRequire = global.require;
@@ -435,7 +430,7 @@ const openEditor = wsk => {
         sidecar.entity = action
 
         // isModified display
-        const subtext = sidecar.querySelector('.custom-header-content'),
+        const subtext = sidecar.querySelector('.sidecar-header-secondary-content .custom-header-content'),
               status = document.createElement('div'),
               isNew = document.createElement('div'),
               upToDate = document.createElement('div'),
@@ -510,6 +505,7 @@ const openEditor = wsk => {
 const respondToRepl = (wsk, extraModes=[]) => ({ getAction, editor, content, eventBus }) => ({
     type: 'custom',
     content,
+    controlHeaders: ['.header-right-bits'],
     displayOptions: [`entity-is-${getAction().type}`, 'edit-mode'],
     modes: extraModes
         .map(_ => _({wsk, getAction, editor, eventBus}))

app/plugins/modules/editor/lib/editor.css

@@ -70,10 +70,12 @@
     transition: opacity 150ms ease-in-out;
     opacity: 0;
     width: 0;
+    height: 0;
 }
 #sidecar.is-modified .custom-header-content .editor-status:not(.is-new) .is-modified, #sidecar:not(.is-modified) .custom-header-content .editor-status:not(.is-new) .is-up-to-date, #sidecar .custom-header-content .editor-status.is-new .is-new {
     opacity: 1;
     width: auto;
+    height: auto;
 }
 
 /* wskflow container while editing compositions */

app/plugins/modules/editor/lib/readonly.js

@@ -27,7 +27,6 @@ exports.readonly = ({ wsk, getAction }) => () => Promise.resolve(getAction())
  *
  */
 exports.edit = ({ wsk, getAction }) => () => Promise.resolve(getAction())
-    .then(x => { console.error("!!!!!!!!!!", getAction, x); return x})
     .then(({ namespace, name }) => repl.qexec(`edit "/${namespace}/${name}"`))
     .then(ui.showCustom)