#9 - Refactored code and update UI from java laf.

Author: Chris2011

manifest.mf

@@ -2,5 +2,5 @@ Manifest-Version: 1.0
 AutoUpdate-Show-In-Client: true
 OpenIDE-Module: org.chrisle.netbeans.plugins.nbscratchfile
 OpenIDE-Module-Localizing-Bundle: org/chrisle/netbeans/plugins/nbscratchfile/Bundle.properties
-OpenIDE-Module-Specification-Version: 1.5.1
+OpenIDE-Module-Specification-Version: 1.6
 

src/org/chrisle/netbeans/plugins/nbscratchfile/CreateScratchFile.java

@@ -24,6 +24,9 @@
 import org.openide.awt.ActionRegistration;
 import org.openide.util.Exceptions;
 import org.openide.util.NbBundle.Messages;
+import org.w3c.dom.Element;
+import org.w3c.dom.NodeList;
+import org.w3c.dom.events.EventTarget;
 
 @ActionID(
         category = "Tools",
@@ -40,6 +43,7 @@
 })
 @Messages("CTL_CreateScratchFile=New Scratch File...")
 public final class CreateScratchFile implements ActionListener {
+
     private final JDialog dialog;
     private final JFXPanel jfxPanel;
     private WebView webView;
@@ -58,7 +62,8 @@ public CreateScratchFile() {
         dialog.setUndecorated(true);
         dialog.addWindowFocusListener(new WindowFocusListener() {
             @Override
-            public void windowGainedFocus(WindowEvent e) {}
+            public void windowGainedFocus(WindowEvent e) {
+            }
 
             @Override
             public void windowLostFocus(WindowEvent e) {
@@ -71,6 +76,32 @@ public void windowLostFocus(WindowEvent e) {
         }, KeyStroke.getKeyStroke(KeyEvent.VK_ESCAPE, 0), JComponent.WHEN_IN_FOCUSED_WINDOW);
     }
 
+    private void colorizeElement(Element sourceElem, String css) {
+        sourceElem.setAttribute("style", css);
+    }
+
+    private void colorizeElements(NodeList sourceElements, String css) {
+        for (int i = 0; i < sourceElements.getLength(); i++) {
+            colorizeElement((Element) sourceElements.item(i), css);
+        }
+    }
+
+    private void addHoverEffectToElement(Element sourceElem, String newCss, String oldCss) {
+        ((EventTarget) sourceElem).addEventListener("mouseover", (elem) -> {
+            sourceElem.setAttribute("style", newCss);
+        }, false);
+
+        ((EventTarget) sourceElem).addEventListener("mouseout", (elem) -> {
+            sourceElem.setAttribute("style", oldCss);
+        }, false);
+    }
+
+    private void addHoverEffectToElements(NodeList sourceElements, String newCss, String oldCss) {
+        for (int i = 0; i < sourceElements.getLength(); i++) {
+            addHoverEffectToElement((Element)sourceElements.item(i), newCss, oldCss);
+        }
+    }
+
     @Override
     public void actionPerformed(ActionEvent e) {
         Platform.runLater(() -> {
@@ -81,7 +112,14 @@ public void actionPerformed(ActionEvent e) {
             webEngine.getLoadWorker().stateProperty().addListener((ObservableValue<? extends State> ov, State oldState, State newState) -> {
                 if (newState == State.SUCCEEDED) {
                     JSObject win = (JSObject) webView.getEngine().executeScript("window");
-                    win.setMember("NbScratchFileViewModel", this.viewModel);
+
+                    win.setMember("NbScratchFileViewModel", CreateScratchFile.this.viewModel);
+
+                    colorizeElement(webEngine.getDocument().getElementById("languageSearch"), String.format("background-color: %s; color: %s;", viewModel.getColor("TextField.background", false), viewModel.getColor("TextField.foreground", false)));
+                    colorizeElement((Element) webEngine.getDocument().getElementsByTagName("body").item(0), String.format("background-color: %s;", viewModel.getColor("Menu.background", false)));
+                    colorizeElement((Element) webEngine.getDocument().getElementsByTagName("ul").item(0), String.format("color: %s;", viewModel.getColor("Label.foreground", false)));
+
+                    addHoverEffectToElements(webEngine.getDocument().getElementsByTagName("li"), String.format("background-color: %s; color: %s;", viewModel.getColor("Menu.background", true), viewModel.getColor("Menu.foreground", true)), String.format("background-color: %s; color: %s;", viewModel.getColor("Menu.background", false), viewModel.getColor("Menu.foreground", false)));
                 }
             });
 
@@ -96,7 +134,7 @@ public void actionPerformed(ActionEvent e) {
     }
 
     public void showDialog() {
-        // try to use monitor, where the input focus is
+        // try to use monitor, where the input focus isOk gu
         // therefor get the topmost component based on the input focus
         Component focusOwner = KeyboardFocusManager.getCurrentKeyboardFocusManager().getFocusOwner();
 

src/org/chrisle/netbeans/plugins/nbscratchfile/NbScratchFileViewModel.java

@@ -1,12 +1,14 @@
 package org.chrisle.netbeans.plugins.nbscratchfile;
 
+import java.awt.Color;
 import java.io.IOException;
 import java.nio.file.FileAlreadyExistsException;
 import java.nio.file.Files;
 import java.nio.file.Path;
 import java.nio.file.Paths;
 import javax.swing.JDialog;
 import javax.swing.JOptionPane;
+import javax.swing.UIManager;
 import org.netbeans.api.actions.Openable;
 import org.openide.filesystems.FileObject;
 import org.openide.filesystems.FileUtil;
@@ -41,4 +43,12 @@ public void setExt(String ext, String languageName) {
             Exceptions.printStackTrace(ex);
         }
     }
-}
+
+    public String getColor(String colorString, Boolean brighter) {
+        return brighter ? getHex(UIManager.getColor(colorString).brighter()) : getHex(UIManager.getColor(colorString));
+    }
+
+    private String getHex(Color rgbColor) {
+        return String.format("#%s%s%s", Integer.toHexString(rgbColor.getRed()), Integer.toHexString(rgbColor.getGreen()), Integer.toHexString(rgbColor.getBlue()));
+    }
+}

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/app.ts

@@ -70,7 +70,6 @@ export class App {
     }
 
     public main(): void {
-
         this.fileTypeWindowViewModel.Language.subscribe(() => {
             this.languageTypesListModel.init();
         });

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/index.html

@@ -17,7 +17,7 @@
         <ul id="languageTypes" data-bind="foreach: LanguageTypes">
             <li data-bind="click: setExt">
                 <div class="icon" data-bind="css: 'svg-' + Icon"></div>
-                <div data-bind="text: LanguageName"></div>
+                <label data-bind="text: LanguageName"></label>
                 <div class="small-text" data-bind="text: FileExt && '(' + FileExt + ')'"></div>
                 <div class="small-text" data-bind="text: showPluginRequiredMessage()"></div>
             </li>

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/main.scss

@@ -20,7 +20,6 @@ body {
             box-sizing: border-box;
             box-shadow: inset 0 0 1px rgba(145, 153, 161, 0.2), 0 0 0 rgba(255, 255, 255, 0);
             width: 100%;
-            color: #6a737c;
             font-size: 16px;
             outline: none;
             height: $input-height;
@@ -30,7 +29,6 @@ body {
     ul {
         list-style: none;
         margin: 0;
-        color: darkslategrey;
         padding: 0;
         overflow-y: scroll;
         height: auto;
@@ -42,7 +40,7 @@ body {
             display: flex;
             align-items: center;
 
-            div {
+            div, label {
                 display: inline-block;
                 vertical-align: middle;
             }
@@ -54,13 +52,14 @@ body {
             }
 
             .small-text {
-                color: grey;
+                color: gray;
                 font-size: 80%;
                 margin-left: .3em;
             }
 
             &:hover {
-                background-color: #f5f5f5;
+                background-color: #e0e0e0;
+                color: darkslategray;
                 cursor: pointer;
             }
 

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/model/FileType.ts

@@ -5,10 +5,16 @@ import {LanguageType} from "./LanguageType";
  *
  * @author Chris
  */
+declare const NbScratchFileViewModel: any;
+
 export class FileType {
-    private language: KnockoutObservable<String>;
+    private language: KnockoutObservable<string>;
     private languageTypes: KnockoutComputed<Array<LanguageType>>;
 
+    private menuBgColor: KnockoutObservable<string>;
+    private textFieldBgColor: KnockoutObservable<string>;
+    private textFieldFgColor: KnockoutObservable<string>;
+
     constructor(languageTypes: Array<LanguageType>) {
         this.language = ko.observable('');
         this.languageTypes = ko.computed(() => {
@@ -31,16 +37,50 @@ export class FileType {
             //                return languageType;
             //            });
         }, this);
+
+        this.menuBgColor = ko.observable('');
+        this.textFieldBgColor = ko.observable('');
+        this.textFieldFgColor = ko.observable('');
     }
 
     //    private manipulateString(languageName: string, term: string): string {
     //        return term ? languageName.replace(term, `<strong>${term}</strong>`) : languageName
     //    }
 
-    public get Language(): KnockoutObservable<String> {
+    public get Language(): KnockoutObservable<string> {
         return this.language;
     }
 
+    public get MenuBgColor(): KnockoutObservable<string> {
+        let self = this;
+
+        setTimeout(() => {
+            self.menuBgColor(NbScratchFileViewModel.getColor('Menu.background'));
+        }, 200);
+
+        return self.menuBgColor;
+    }
+
+    public get TextFieldBgColor(): KnockoutObservable<string> {
+        let self = this;
+
+        setTimeout(() => {
+            self.textFieldBgColor(NbScratchFileViewModel.getColor('TextField.background'));
+        }, 200);
+
+        return self.textFieldBgColor;
+    }
+
+    public get TextFieldFgColor(): KnockoutObservable<string> {
+        let self = this;
+
+        setTimeout(() => {
+            self.textFieldFgColor(NbScratchFileViewModel.getColor('TextField.foreground'));
+        }, 200);
+
+        return self.textFieldFgColor;
+    }
+
     public get LanguageTypes(): LanguageType[] {
         return this.languageTypes();
     }

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/model/LanguageType.ts

@@ -3,7 +3,7 @@
  * @author Chrl
  */
 
-declare var NbScratchFileViewModel: any;
+declare const NbScratchFileViewModel: any;
 
 export class LanguageType {
     private icon: string;

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/app/model/LanguageTypesDOMModel.ts

@@ -173,7 +173,6 @@ export class LanguageTypesDOMModel {
     }
 
     public getDataFromSelectedElem(): void {
-        console.log(this.selectedElem);
         this.selectedElem && this.selectedElem.addEventListener('keydown', e => {
             if(e.keyCode === KeyCode.Enter) {
                 console.log(this.selectedElem);

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/dist/app.js

@@ -17,7 +17,7 @@
         <ul id="languageTypes" data-bind="foreach: LanguageTypes">
             <li data-bind="click: setExt">
                 <div class="icon" data-bind="css: 'svg-' + Icon"></div>
-                <div data-bind="text: LanguageName"></div>
+                <label data-bind="text: LanguageName"></label>
                 <div class="small-text" data-bind="text: FileExt && '(' + FileExt + ')'"></div>
                 <div class="small-text" data-bind="text: showPluginRequiredMessage()"></div>
             </li>

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/dist/app.js.map

@@ -1,5 +1,7 @@
 auxiliary.org-netbeans-modules-css-prep.sass_2e_configured=true
 file.reference.filetypewindow-app=app
+file.reference.filetypewindow-e2e=e2e
 files.encoding=UTF-8
 site.root.folder=${file.reference.filetypewindow-app}
 source.folder=
+test.selenium.folder=${file.reference.filetypewindow-e2e}

src/org/chrisle/netbeans/plugins/nbscratchfile/components/filetypewindow/dist/icons/asm.png

@@ -6,6 +6,7 @@ import {LanguageType} from "../app/model/LanguageType";
 // if you used the '@types/mocha' method to install mocha type definitions, uncomment the following line
 // import 'mocha';
 import {expect} from 'chai';
+import {} from 'mocha';
 
 describe('LanguagType LanguagName getter', () => {
     it('should return JavaScript', () => {