feat: status bar icons initial scaffolding

Author: abose

src/editor/EditorStatusBar.js

@@ -630,5 +630,7 @@ define(function (require, exports, module) {
         LanguageManager.on("languageAdded languageModified", _populateLanguageDropdown);
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
         StatusBar.show();
+        $("#status-menu").attr("title", Strings.STATUSBAR_SHOW_PANELS);
+        $(".git-status-icon").attr("title", Strings.STATUSBAR_SHOW_GIT);
     });
 });

src/index.html

@@ -698,6 +698,7 @@
     https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer
     -->
     <!-- Import the phoenix browser virtual file system -->
+    <script src="thirdparty/highlight.js/highlight.min.js"></script>
     <script src="phoenix/shell.js" type="module" defer></script>
     <script src="phoenix/virtual-server-loader.js" type="module" defer></script>
 <!--    node loader should come only after fs libs are loaded as we init fs libs with node fs urls-->
@@ -707,6 +708,7 @@
 
     <!-- CSS/LESS -->
 
+    <link rel="stylesheet" type="text/css" href="thirdparty/highlight.js/styles/github.min.css">
     <link rel="stylesheet" type="text/css" href="thirdparty/fontawesome/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="thirdparty/devicon/devicon.min.css">
     <link rel="stylesheet" type="text/css" href="thirdparty/file-icons/ffont.css">
@@ -854,6 +856,17 @@
         <!-- View Panes are programatically created here -->
         </div>
         <div id="status-bar" class="statusbar no-focus">
+            <div id="status-phoenix">
+                <div id="status-menu" class="forced-hidden">
+                    <i class="fa-solid fa-chevron-up"></i>
+                </div>
+                <div class="status-tab forced-hidden">
+                    <i class="fa-solid fa-terminal"></i>
+                </div>
+                <div class="status-tab forced-hidden git-status-icon">
+                    <i class="fa-solid fa-code-branch"></i>
+                </div>
+            </div>
             <div id="status-indicators" class="indicators">
                 <div id="status-indent">
                     <div id="indent-type"></div>

src/nls/root/strings.js

@@ -425,6 +425,8 @@ define({
     "STATUSBAR_TASKS_PAUSE": "Pause",
     "STATUSBAR_TASKS_STOP": "Stop",
     "STATUSBAR_TASKS_RESTART": "Restart",
+    "STATUSBAR_SHOW_PANELS": "Show Panels",
+    "STATUSBAR_SHOW_GIT": "Git Panel",
 
     // CodeInspection: errors/warnings
     "ERRORS_NO_FILE": "No File Open",

src/phoenix/shell.js

@@ -99,6 +99,7 @@ async function openURLInPhoenixWindow(url, {
 
 Phoenix.libs = {
     LRUCache,
+    hljs: window.hljs,
     iconv: fs.utils.iconv,
     picomatch: fs.utils.picomatch
 };

src/styles/brackets.less

@@ -304,6 +304,7 @@ a, img {
 #status-info {
     color: @bc-text;
     white-space: nowrap;
+    cursor: pointer;
 
     .dark & {
         color: @dark-bc-text;
@@ -326,7 +327,7 @@ a, img {
     display: none !important;
 }
 
-#status-indicators{
+#status-indicators, #status-phoenix{
     background: @bc-bg-status-bar;
     color: @bc-text;
     position: absolute;
@@ -396,6 +397,33 @@ a, img {
 
 }
 
+#status-phoenix {
+    right: unset;
+    left: 0;
+    > div {
+        border-left: unset;
+        border-right: 1px solid @bc-panel-border;
+
+        .dark & {
+            border-left: unset;
+            border-right: 1px solid @dark-bc-panel-separator;
+        }
+        float: left;
+        padding: unset;
+        width: 35px;
+        text-align: center;
+    }
+}
+
+
+#status-menu:hover, .status-tab:hover{
+    background-color: @bc-status-btn-hover;
+    .dark & {
+        background-color: @dark-bc-status-btn-hover;
+    }
+    cursor: pointer;
+}
+
 #status-indent > * {
     display: inline-block;
 }

src/styles/brackets_core_ui_variables.less

@@ -105,6 +105,7 @@
 @bc-panel-bg-text-highlight:    #fff;
 @bc-panel-border:               rgba(0, 0, 0, 0.09);
 @bc-panel-separator:            #c3c6c5;
+@bc-status-btn-hover:           #f0f0f0;
 
 // Default Button
 @bc-btn-bg:                     #e5e9e9;
@@ -214,6 +215,7 @@
 @dark-bc-panel-bg-text-highlight:    #000;
 @dark-bc-panel-border:               #000;
 @dark-bc-panel-separator:            #343434;
+@dark-bc-status-btn-hover:           rgba(255, 255, 255, 0.05);
 
 // Default Button
 @dark-bc-btn-bg:                     #3f3f3f;