feat: top tab svgs

Fixes kubernetes-sigs#1968

packages/app/templates/index.html

@@ -53,15 +53,17 @@
           <div class='left-tab-stripe-button left-tab-stripe-button-selected' data-tab-button-index='1'>
             <i class='fas fa-square repl-prompt-right-element-icon deemphasize'></i>
             <div class='left-tab-stripe-button-label'>&nbsp;</div>
-            <div class='left-tab-stripe-button-closer'>&#xd7;</div>
+            <div class='left-tab-stripe-button-closer'>
+              <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
+            </div>
           </div>
         </div>
         <div class='left-tab-stripe-bottom-buttons'>
           <div class='left-tab-stripe-button smaller-button' id='new-tab-button' data-balloon-disabled='Open a new tab' data-balloon-pos='right' data-balloon-length='fit'>
-            <i class='repl-prompt-right-element-icon deemphasize new-tab-button'>&#xFF0B;</i>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 7.5V3h-1v4.5H3v1h4.5V13h1V8.5H13v-1z"></path></svg>
           </div>
           <div class='left-tab-stripe-button smaller-button' id='help-button'>
-            <i class='fas fa-question'></i>
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 23a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 16 25zm1.14-7.75v2.5h-2.25V15H17a2.38 2.38 0 0 0 0-4.75h-1.5a2.38 2.38 0 0 0-2.38 2.37v.64h-2.23v-.64A4.63 4.63 0 0 1 15.52 8H17a4.63 4.63 0 0 1 .12 9.25z"></path></svg>
           </div>
         </div>
       </div>

packages/app/web/css/top-tab-stripe.css

@@ -63,23 +63,27 @@ body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe {
     counter-increment: tab-index;
 }
 .left-tab-stripe-buttons .left-tab-stripe-button-closer {
-    content: '\d7'; /* unicode multiplication sign */
     position: absolute;
     top: 50%;
     right: 0.25em;
     transform: translateY(-50%);
-    color: transparent;
     font-size: 1em;
-    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
+    transition: background-color 150ms ease-in-out;
     padding: 1px;
+    display: flex;
+}
+.left-tab-stripe-buttons .left-tab-stripe-button-closer svg path {
+    fill: transparent;
+    transition: fill 150ms ease-in-out;
 }
 .left-tab-stripe-buttons .left-tab-stripe-button:hover .left-tab-stripe-button-closer {
-    color: var(--color-text-02);
     cursor: pointer;
 }
+.left-tab-stripe-buttons .left-tab-stripe-button:hover .left-tab-stripe-button-closer svg path {
+    fill: var(--color-text-02);
+}
 .left-tab-stripe-buttons .left-tab-stripe-button .left-tab-stripe-button-closer:hover {
     background: var(--color-ui-04);
-    color: var(--color-text-02);
 }
 .left-tab-stripe-buttons .left-tab-stripe-button:not(.left-tab-stripe-button-selected) .left-tab-stripe-button-closer:hover {
     /* modify the background hover effect for not-selected tabs */
@@ -100,10 +104,12 @@ body[kui-theme-style="light"] .left-tab-stripe-buttons .left-tab-stripe-button i
 .left-tab-stripe-bottom-buttons i {
     filter: grayscale(0.5);
 }
-.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > i:hover {
-    color: var(--color-base06) !important;
+.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover {
     cursor: pointer;
 }
+.left-tab-stripe-button:not([data-tab-button-index]):not(.left-tab-stripe-button-selected) > svg:hover path {
+    fill: var(--color-base06) !important;
+}
 .left-tab-stripe-button-selected .left-tab-stripe-button-label {
     /* reduce the visibility of the tab label, for the visible tab */
     opacity: 0.75;
@@ -143,18 +149,21 @@ body.not-electron .repl-input {
     padding-right: 0.75rem;
 }
 
+.left-tab-stripe-button svg path {
+    fill: var(--color-base04);
+    transition: fill 150ms ease-in-out;
+}
+
 #help-button.left-tab-stripe-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: rgba(0,0,0,0.075);
 }
 #help-button:hover {
-    background-color: rgba(255,255,255,0.075);
     cursor: pointer;
 }
-#help-button.left-tab-stripe-button:hover i {
-    color: var(--color-brand-02) !important;
+#help-button.left-tab-stripe-button:hover svg path {
+    fill: var(--color-brand-02) !important;
 }
 
 .main {
@@ -211,11 +220,6 @@ body[kui-theme-style="light"] .left-tab-stripe-button-selected {
     filter: opacity(0.975) grayscale(0.5) brightness(0.975);
 }
 
-.left-tab-stripe-button > i {
-    font-style: normal;
-    -webkit-app-region: no-drag;
-}
-
 .left-tab-stripe-buttons .left-tab-stripe-button > i {
     display: none;
 }
@@ -252,7 +256,6 @@ body[kui-theme-style="light"] .left-tab-stripe-button-selected {
     flex: 1;
     justify-content: flex-start;
     -webkit-font-smoothing: antialiased;
-    border-right: 1px inset rgba(128,128,128,0.5);
 }
 
 .left-tab-stripe-bottom-buttons .left-tab-stripe-button {

packages/app/web/css/ui.css

@@ -830,7 +830,7 @@ sidecar .sidecar-header .limits {
     /* don't show limits in header for now */
     display: none;
 }
-sidecar .sidecar-bottom-stripe-button:not(.sidecar-bottom-stripe-button-active):hover, sidecar .sidecar-bottom-stripe-button.hover {
+.sidecar-bottom-stripe .sidecar-bottom-stripe-button:not(.sidecar-bottom-stripe-button-active):hover, sidecar .sidecar-bottom-stripe-button.hover {
     cursor: pointer;
     opacity: 1;
 }
@@ -1917,7 +1917,7 @@ body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #theme-button,
 body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #help-button {
     display: none;
 }
-body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #new-tab-button i {
+body.subwindow:not(.sidecar-is-minimized) .left-tab-stripe #new-tab-button svg {
     font-size: 6vw;
 }
 body.subwindow sidecar .sidecar-header .sidecar-header-text.is-repl-like .entity-name {

plugins/plugin-core-support/src/lib/cmds/screenshot.ts

@@ -327,8 +327,8 @@ export default async (commandTree: CommandRegistrar) => {
               }
 
               // viewport width dimensions of the screenshot popup
-              const widthVw = `${(100 * widthPx) / windowSize.width}vw`
-              const heightVw = `${(100 * heightPx) / windowSize.width}vw`
+              const widthVw = `${(75 * widthPx) / windowSize.width}vw`
+              const heightVw = `${(75 * heightPx) / windowSize.width}vw`
 
               document.body.appendChild(snapDom)
               snapDom.appendChild(snapImg)
@@ -346,15 +346,17 @@ export default async (commandTree: CommandRegistrar) => {
 
               // save screenshot to disk
               const saveButton = document.createElement('div')
-              const saveButtonIcon = document.createElement('i')
+              const saveButtonIcon = document.createElement('div')
               const ts = new Date()
               const filename = `Screen Shot ${dateString(ts)} ${timeString(ts)}.png`
               const location = join(app.getPath('desktop'), filename)
               saveButton.setAttribute('data-balloon', 'Save to Desktop')
               saveButton.setAttribute('data-balloon-pos', 'up')
               saveButton.className =
                 'sidecar-bottom-stripe-button sidecar-bottom-stripe-save graphical-icon screenshot-save-button'
-              saveButtonIcon.className = 'fas fa-save'
+              saveButtonIcon.classList.add('graphical-icon')
+              saveButtonIcon.innerHTML =
+                '<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M17.8 5.5l-3.3-3.3c-.2-.1-.3-.2-.5-.2H3.3C2.6 2 2 2.6 2 3.3v13.3c0 .8.6 1.4 1.3 1.4h13.3c.7 0 1.4-.5 1.4-1.2V6.1c0-.4-.1-.4-.2-.6zM7.3 3.3h5.3v3.3H7.3V3.3zm5.4 13.4H7.3v-5.3h5.3l.1 5.3zm1.3 0v-5.3c0-.7-.6-1.3-1.3-1.3H7.3c-.7-.1-1.3.5-1.3 1.2v5.3H3.3V3.3H6v3.3C6 7.4 6.6 8 7.3 8h5.3c.8 0 1.4-.6 1.4-1.3v-3l2.7 2.7v10.4l-2.7-.1z"></path></svg>'
               saveButton.appendChild(saveButtonIcon)
               saveButton.onclick = () => {
                 saveButton.classList.add('yellow-text')
@@ -379,7 +381,8 @@ export default async (commandTree: CommandRegistrar) => {
 
               // close popup button
               const closeButton = document.createElement('div')
-              closeButton.innerText = 'Done'
+              closeButton.innerHTML =
+                '<div class="graphical-icon"><svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"></path></svg></div>'
               closeButton.className = 'sidecar-bottom-stripe-button sidecar-bottom-stripe-close'
               snapFooter.appendChild(closeButton)
 
@@ -399,8 +402,9 @@ export default async (commandTree: CommandRegistrar) => {
               message.innerText = 'Screenshot copied to clipboard'
 
               check.classList.add('screenshot-check-icon')
-              const checkIcon = document.createElement('i')
-              checkIcon.className = 'fas fa-clipboard-check'
+              const checkIcon = document.createElement('div')
+              checkIcon.innerHTML =
+                '<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm-2 19.5l-5-5 1.6-1.5 3.4 3.4 7.4-7.4 1.6 1.6-9 8.9z"></path><path d="M14 21.5l-5-5 1.6-1.5 3.4 3.4 7.4-7.4 1.6 1.6-9 8.9z" data-icon-path="inner-path" opacity="0"></path></svg>'
               check.appendChild(checkIcon)
 
               // temporarily disable the repl

plugins/plugin-core-support/src/lib/new-tab.ts

@@ -36,6 +36,8 @@ import { theme } from '@kui-shell/core/core/settings'
 
 const debug = Debug('plugins/core-support/new-tab')
 
+export const tabButtonSelector = '#new-tab-button > svg'
+
 const usage = {
   strict: 'switch',
   command: 'switch',
@@ -350,9 +352,9 @@ const oneTimeInit = (): void => {
   initialTabButton.onclick = () => qexec(`tab switch ${initialTabId}`)
 
   if (document.body.classList.contains('subwindow')) {
-    element('#new-tab-button > i').onclick = () => window.open(window.location.href, '_blank')
+    element(tabButtonSelector).onclick = () => window.open(window.location.href, '_blank')
   } else {
-    element('#new-tab-button > i').onclick = () => newTab()
+    element(tabButtonSelector).onclick = () => newTab()
   }
 
   addKeyboardListeners()

plugins/plugin-core-support/src/test/core-support/new-tab.ts

@@ -18,6 +18,8 @@ import * as common from '@kui-shell/core/tests/lib/common'
 import * as ui from '@kui-shell/core/tests/lib/ui'
 const { cli, selectors, sidecar } = ui
 
+import { tabButtonSelector } from '@kui-shell/plugin-core-support/lib/new-tab'
+
 // test that new tab does not copy any output over from the cloned tab
 common.localDescribe('new tab from pty active tab via click', function(this: common.ISuite) {
   before(common.before(this))
@@ -43,7 +45,7 @@ common.localDescribe('new tab from pty active tab via click', function(this: com
 
   it('click new tab button', () =>
     this.app.client
-      .click('.new-tab-button')
+      .click(tabButtonSelector)
       .then(() => this.app.client.waitForVisible(selectors.TAB_N(2)))
       .then(() => cli.waitForRepl(this.app)) // should have an active repl
       .catch(common.oops(this)))
@@ -158,7 +160,7 @@ common.localDescribe('new tab from quiescent tab via button click', function(thi
 
   it('new tab via button click', () =>
     this.app.client
-      .click('.new-tab-button')
+      .click(tabButtonSelector)
       .then(() => this.app.client.waitForVisible('.left-tab-stripe-button-selected[data-tab-button-index="2"]'))
       .then(() => cli.waitForRepl(this.app)) // should have an active repl
       .catch(common.oops(this)))
@@ -195,7 +197,7 @@ common.localDescribe('new tab from active tab via button click', function(this:
   it('start a sleep, then new tab via button click', () =>
     cli
       .do('sleep 10000', this.app)
-      .then(() => this.app.client.click('.new-tab-button'))
+      .then(() => this.app.client.click(tabButtonSelector))
       .then(() => this.app.client.waitForVisible('.left-tab-stripe-button-selected[data-tab-button-index="2"]'))
       .then(() => cli.waitForRepl(this.app)) // should have an active repl
       .catch(common.oops(this)))
@@ -216,7 +218,7 @@ common.localDescribe('new tab from pty active tab via button click', function(th
     cli
       .do('vi', this.app)
       .then(() => this.app.client.waitForExist('tab.visible.xterm-alt-buffer-mode'))
-      .then(() => this.app.client.click('.new-tab-button'))
+      .then(() => this.app.client.click(tabButtonSelector))
       .then(() => this.app.client.waitForVisible('.left-tab-stripe-button-selected[data-tab-button-index="2"]'))
       .then(() => cli.waitForRepl(this.app)) // should have an active repl
       .catch(common.oops(this)))
@@ -237,7 +239,7 @@ common.localDescribe('new tab from active tab that is emitting output via button
     cli
       .do('while true; do echo hi; sleep 1; done', this.app)
       .then(() => new Promise(resolve => setTimeout(resolve, 4000)))
-      .then(() => this.app.client.click('.new-tab-button'))
+      .then(() => this.app.client.click(tabButtonSelector))
       .then(() => this.app.client.waitForVisible('.left-tab-stripe-button-selected[data-tab-button-index="2"]'))
       .then(() => cli.waitForRepl(this.app)) // should have an active repl
       .then(() => this.app.client.waitForExist(`${selectors.CURRENT_TAB} .xterm`, 5000, true)) // no xterm DOM in the new tab

plugins/plugin-core-support/web/css/screenshot.css

@@ -41,15 +41,9 @@ body.no-tooltips-anywhere [data-balloon]:before, body.no-tooltips-anywhere [data
 
 .screenshot-check-icon {
     position: absolute;
-    color: var(--color-ok);
-    font-size: 20vmin;
-    filter: brightness(1.375)  drop-shadow(0px 0px 1vmin var(--color-text-02));
 }
-body[kui-theme-style="dark"] .screenshot-check-icon {
-    filter: brightness(1.75)  drop-shadow(0px 0px 1vmin var(--color-text-02));
-}
-.screenshot-check-icon i {
-    text-shadow: 0 0 0.1ex var(--color-base02);
+.screenshot-check-icon svg path {
+    fill: var(--color-ok);
 }
 
 #screenshot-captured {
@@ -69,14 +63,17 @@ body[kui-theme-style="dark"] .screenshot-check-icon {
 #screenshot-captured .sidecar-bottom-stripe {
     justify-content: flex-end;
     align-items: center;
-    border-top-color: var(--color-base04);
-    padding: 0 1em;
+    padding: 0 0.375em 0 1em;
 }
 
 #screenshot-captured .screenshot-image {
     max-width: 100%;
     min-height: 300px; /* we need some min space to fit the green check and Screenshot copied to clipboard */
     max-height: 100%;
-    filter: grayscale(0.375) contrast(0.75) blur(1px);
+    filter: brightness(0.5) grayscale(0.55) contrast(0.85) blur(1px);
+}
+
+#screenshot-captured .sidecar-bottom-stripe .sidecar-bottom-stripe-button {
+    width: 1.375em;
 }