From 3e3a92ab9a05a0f7462768586f6d863cc8f5ba37 Mon Sep 17 00:00:00 2001
From: Mark Sujew <mark.sujew@typefox.io>
Date: Tue, 5 Oct 2021 16:59:45 +0000
Subject: [PATCH] Fix invisible svg icons

---
 .../api-samples/src/browser/style/branding.css   |  5 +++++
 .../src/browser/style/window-icon.svg            |  4 ++++
 .../src/browser/view/sample-unclosable-view.tsx  |  4 ++--
 packages/core/src/browser/style/sidepanel.css    | 10 ++++++++--
 packages/core/src/browser/style/tabs.css         | 16 ++++++++++++++++
 5 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 examples/api-samples/src/browser/style/window-icon.svg

diff --git a/examples/api-samples/src/browser/style/branding.css b/examples/api-samples/src/browser/style/branding.css
index e414960b0466a..a969d1e2b9d42 100644
--- a/examples/api-samples/src/browser/style/branding.css
+++ b/examples/api-samples/src/browser/style/branding.css
@@ -27,3 +27,8 @@
     background-repeat: no-repeat;
     background-size: 15%;
 }
+
+.unclosable-window-icon {
+    -webkit-mask: url('window-icon.svg');
+    mask: url('window-icon.svg');
+}
diff --git a/examples/api-samples/src/browser/style/window-icon.svg b/examples/api-samples/src/browser/style/window-icon.svg
new file mode 100644
index 0000000000000..b7cd62ad53907
--- /dev/null
+++ b/examples/api-samples/src/browser/style/window-icon.svg
@@ -0,0 +1,4 @@
+<!--Copyright (c) Microsoft Corporation. All rights reserved.-->
+<!--Copyright (C) 2019 TypeFox and others.-->
+<!--Licensed under the MIT License. See License.txt in the project root for license information.-->
+<svg fill="#F6F6F6" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg"><g fill="#F6F6F6"><path clip-rule="evenodd" d="m3 3h10v4h-6v6 2 6h6v4h-10zm18 12v6h-6v4h10v-10zm4-2v-10h-10v4h3v-1h4v4h-1v3z" fill-rule="evenodd"/><path d="m9 9h10v10h-10z"/></g></svg>
diff --git a/examples/api-samples/src/browser/view/sample-unclosable-view.tsx b/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
index 297508559e564..71050d10d61ac 100644
--- a/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
+++ b/examples/api-samples/src/browser/view/sample-unclosable-view.tsx
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { codicon, ReactWidget } from '@theia/core/lib/browser';
+import { ReactWidget } from '@theia/core/lib/browser';
 import { injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 
@@ -30,7 +30,7 @@ export class SampleViewUnclosableView extends ReactWidget {
     this.id = SampleViewUnclosableView.ID;
     this.title.caption = 'Sample Unclosable View';
     this.title.label = 'Sample Unclosable View';
-    this.title.iconClass = codicon('window');
+    this.title.iconClass = 'unclosable-window-icon';
     this.title.closable = false;
     this.update();
   }
diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
index 555898a0cbed4..7a68798c7ea72 100644
--- a/packages/core/src/browser/style/sidepanel.css
+++ b/packages/core/src/browser/style/sidepanel.css
@@ -128,6 +128,11 @@
   -webkit-mask-position: 50% 50%;
 }
 
+/* inactive legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon) {
+  background: var(--theia-activityBar-inactiveForeground);
+}
+
 /* inactive file icons */
 .p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
   background: inherit !important;
@@ -144,8 +149,9 @@
   color: var(--theia-activityBar-foreground);
 }
 
-.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
-.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
+/* active legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon):hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon:not(.codicon) {
   background-color: var(--theia-activityBar-foreground);
 }
 
diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
index b93adff2aec46..66f965ea802ac 100644
--- a/packages/core/src/browser/style/tabs.css
+++ b/packages/core/src/browser/style/tabs.css
@@ -185,11 +185,13 @@ body.theia-editor-highlightModifiedTabs
     background-repeat: no-repeat;
 }
 
+/* common icons */
 .p-TabBar.theia-app-centers .p-TabBar-tabIcon,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon {
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
+    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
@@ -197,6 +199,20 @@ body.theia-editor-highlightModifiedTabs
     padding-right: 8px;
 }
 
+/* codicons */
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.codicon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.codicon {
+    background: none;
+}
+
+/* file icons */
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
+    background: none;
+    padding-bottom: 0px;
+    min-height: 20px;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.fa {
     background: none;