Show template Compile screen (#431)

This shows template 'Compile' screen. 'template' means that this screen
would be used as a basic for the future final 'Compile' screen.

ONE-vscode-DCO-1.0-Signed-off-by: Hyun Sik Yoon <[email protected]>

media/Compile/compile.css

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ .left-margin-24 {
+  margin-left: 24px;
+}
+
+.compile-selections-container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  text-align: left;
+}
+
+.text-row {
+  display: flex;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.two-column-text-left {
+  white-space: nowrap;
+  padding-right: 32px;
+  width: 25%;
+}
+
+.two-column-text-right {
+  white-space: nowrap;
+}
+
+.two-column-text-long-left {
+  white-space: nowrap;
+  padding-right: 32px;
+  width: 35%;
+}
+
+.sub-panel {
+  padding: 1px 12px 12px 12px;
+  background: #252526;
+  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.36);
+}

media/Compile/compile.js

@@ -21,5 +21,15 @@ window.addEventListener('load', main);
 
 // Main function that gets executed once the webview DOM loads
 function main() {
-  /* NYI */
+  const showDetailedOptions = document.getElementById('show-detailed-options');
+  showDetailedOptions.addEventListener('click', handleShowDetailedOptionClick);
+}
+
+function handleShowDetailedOptionClick() {
+  const showDetailedOptions = document.getElementById('detailed-options');
+  if (showDetailedOptions.style.display === 'none') {
+    showDetailedOptions.style.display = 'block';
+  } else if (showDetailedOptions.style.display === 'block') {
+    showDetailedOptions.style.display = 'none';
+  }
 }

package.json

@@ -137,6 +137,7 @@
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "@vscode/test-electron": "^2.1.3",
+    "@vscode/webview-ui-toolkit": "^0.9.3",
     "chai": "^4.3.6",
     "configparser": "^0.3.9",
     "csslint": "^1.0.5",