Made it easier to customize view container part.

- Template method for the part creation.
- Removed the deprecated API use.
- Fixed indentation in CSS.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

packages/core/src/browser/style/view-container.css

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
- :root {
+:root {
     --theia-view-container-title-height: var(--theia-content-line-height);
     --theia-view-container-content-height: calc(100% - var(--theia-view-container-title-height));
 }

packages/core/src/browser/view-container.ts

@@ -257,7 +257,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
 
         const description = this.widgetManager.getDescription(widget);
         const partId = description ? JSON.stringify(description) : widget.id;
-        const newPart = new ViewContainerPart(widget, partId, this.id, this.toolbarRegistry, this.toolbarFactory, options);
+        const newPart = this.createPart(widget, partId, options);
         this.registerPart(newPart);
         if (newPart.options && newPart.options.order !== undefined) {
             const index = this.getParts().findIndex(part => part.options.order === undefined || part.options.order > newPart.options.order!);
@@ -289,7 +289,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
                 }
             }),
             this.registerDND(newPart),
-            newPart.onVisibilityChanged(() => {
+            newPart.onDidChangeVisibility(() => {
                 this.updateTitle();
                 this.updateCurrentPart();
             }),
@@ -312,6 +312,10 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
         return toRemoveWidget;
     }
 
+    protected createPart(widget: Widget, partId: string, options?: ViewContainer.Factory.WidgetOptions | undefined): ViewContainerPart {
+        return new ViewContainerPart(widget, partId, this.id, this.toolbarRegistry, this.toolbarFactory, options);
+    }
+
     removeWidget(widget: Widget): boolean {
         const disposable = this.toRemoveWidgets.get(widget.id);
         if (disposable) {