More styling impr. and less UI contributions

arduino-ide-extension/package.json

@@ -12,7 +12,9 @@
     "@theia/editor": "next",
     "@theia/filesystem": "next",
     "@theia/languages": "next",
+    "@theia/markers": "next",
     "@theia/monaco": "next",
+    "@theia/outline-view": "next",
     "@theia/workspace": "next",
     "p-queue": "^5.0.0"
   },

arduino-ide-extension/src/browser/arduino-frontend-module.ts

@@ -29,6 +29,10 @@ import { ArduinoTheme } from './arduino-theme';
 import { ArduinoFileMenuContribution } from './arduino-file-menu';
 import { MenuContribution } from '@theia/core';
 import { SketchFactory } from './sketch-factory';
+import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
+import { SilentOutlineViewContribution } from './customization/silent-outline-contribution';
+import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
+import { SilentProblemContribution } from './customization/silent-problem-contribution';
 
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
     // Commands and toolbar items
@@ -96,4 +100,10 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
 
     const themeService = ThemeService.get();
     themeService.register(...ArduinoTheme.themes);
+
+    // customizing default theia
+    unbind(OutlineViewContribution);
+    bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
+    unbind(ProblemContribution);
+    bind(ProblemContribution).to(SilentProblemContribution).inSingletonScope();
 });

arduino-ide-extension/src/browser/components/component-list/component-list.tsx

@@ -7,7 +7,7 @@ export class ComponentList extends React.Component<ComponentList.Props> {
 
     render(): React.ReactNode {
         return <div>
-            {this.props.items.map((item, idx) => <ComponentListItem key={idx} item={item} windowService={this.props.windowService} install={this.props.install} />)}
+            {this.props.items.map(item => <ComponentListItem key={item.name} item={item} windowService={this.props.windowService} install={this.props.install} />)}
         </div>;
     }
 

arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx

@@ -39,26 +39,30 @@ export class FilterableListContainer extends React.Component<FilterableListConta
             const { items } = result;
             this.setState({
                 filterText,
-                items: items.sort((a, b) => {
-                    if (a.name < b.name) {
-                        return -1;
-                    } else if (a.name === b.name) {
-                        return 0;
-                    } else {
-                        return 1;
-                    }
-                })
+                items: this.sort(items)
             });
         });
     }
 
+    protected sort(items: ArduinoComponent[]): ArduinoComponent[] {
+        return items.sort((a, b) => {
+            if (a.name < b.name) {
+                return -1;
+            } else if (a.name === b.name) {
+                return 0;
+            } else {
+                return 1;
+            }
+        });
+    }
+
     protected async install(comp: ArduinoComponent): Promise<void> {
         const dialog = new InstallationProgressDialog(comp.name);
         dialog.open();
         try {
             await this.props.service.install(comp);
             const { items } = await this.props.service.search({ query: this.state.filterText });
-            this.setState({ items });
+            this.setState({ items: this.sort(items) });
         } finally {
             dialog.close();
         }

arduino-ide-extension/src/browser/customization/silent-outline-contribution.ts

@@ -0,0 +1,26 @@
+/********************************************************************************
+ * Copyright (C) 2017 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable } from 'inversify';
+import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
+
+@injectable()
+export class SilentOutlineViewContribution extends OutlineViewContribution {
+
+    async initializeLayout(): Promise<void> {
+        // await this.openView();
+    }
+}

arduino-ide-extension/src/browser/customization/silent-problem-contribution.ts

@@ -0,0 +1,11 @@
+import { injectable } from 'inversify';
+import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
+
+@injectable()
+export class SilentProblemContribution extends ProblemContribution {
+
+    async initializeLayout(): Promise<void> {
+        // await this.openView();
+    }
+
+}

arduino-ide-extension/src/browser/style/arduino.useable.css

@@ -26,7 +26,7 @@ is not optimized for dense, information rich UIs.
     --theia-border-color0: var(--md-grey-100);
     --theia-border-color1: var(--md-grey-200);
     --theia-border-color2: var(--md-grey-300);
-    --theia-border-color3: var(--md-grey-500);
+    --theia-border-color3: var(--md-grey-400);
     /* UI fonts: Family, size and color (dark to bright)
         ---------------------------------------------------
          The UI font CSS variables are used for the typography all of the Theia

arduino-ide-extension/src/browser/style/list-widget.css

@@ -7,9 +7,13 @@
     color: var(--theia-ui-font-color1);
 }
 
-.arduino-list-widget .search-bar > input {
-    margin: 0px 5px 0px 5px;
-    width: 95%;
+.arduino-list-widget .search-bar {
+    margin: 0 10px 0 15px;
+    border-color: var(--theia-border-color3);
+}
+
+.arduino-list-widget .search-bar:focus {
+    border-color: var(--theia-accent-color3);
 }
 
 .filterable-list-container {