template console log and startup profile

extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html

@@ -131,7 +131,6 @@
         <div id="template-extensions" class="template"></div>
         <div id="template-settings" class="template"></div>
         <div id="template-model-merger" class="template"></div>
-        <!--<div id="layout-console-log"></div>-->
         <div id="template-console-log" class="template"></div>
         <div id="layout-theme" class="flexbox col padding">
             <div show-button="#btn_theme_editor" data-selector="[id^='tab_ui_theme'] > div"

extensions-builtin/anapnoe-sd-uiux/html/templates/template-console-log.html

@@ -1,18 +1,44 @@
 <div id="layout-console-log" class="layout">
-  <div class="layout-header">
-  </div>
-  <div class="layout-content">
-    <div id="container-console-log">
-    </div>
-  </div>
-  <div class="layout-footer">
-    <div class="flexbox flex-end padding">
 
-      <button title="Startup profile" class="ae-button"
-        onclick="popup_trigger.click(); testpopup(); showProfile('./internal/profile-startup'); return false;">
-        <div class="mask-icon icon-profile">
+  <div class="layout-content">
+
+    <div class="xtabs flexbox col">
+
+      <div id="logger_tabitem" class="xtabs-item no-padding">
+        <div id="container-console-log">
         </div>
-      </button>
+      </div>
+
+      <div id="profile_tabitem" class="xtabs-item no-padding">
+        <div data-parent-selector=".global-popup"
+          data-selector="table.popup-table"
+          class="portal dynamic">
+        </div>
+      </div>
+
     </div>
-  </div>
-</div>
+
+    <div class="layout-footer">
+
+      <div class="flexbox padding">
+
+        <button title="Console Log" id="logger_nav" active="true"
+          tabItemId="#logger_tabitem" tabGroup="console_group"
+          class="xtabs-tab">
+          <div class="mask-icon icon-terminal">
+          </div>
+          <span>Console Log</span>
+        </button>
+
+        <button id="profile_nav" title="Startup profile" class="xtabs-tab"
+          tabItemId="#profile_tabitem" tabGroup="console_group"
+          onclick="showProfile('./internal/profile-startup'); return false;">
+          <div class="mask-icon icon-profile">
+          </div>
+          <span>Startup profile</span>
+        </button>
+
+      </div>
+
+    </div>
+  </div>

extensions-builtin/anapnoe-sd-uiux/style.css

@@ -3599,4 +3599,64 @@ input[type="range"]::-ms-fill-upper {
     display: flex;
     position: relative;
     flex-wrap: wrap;
+}
+
+table {
+    border-collapse: collapse;
+}
+
+table.popup-table {
+    width: 100%;
+}
+
+.popup-table td,
+.popup-table th {
+    border: var(--ae-border-size) solid var(--ae-panel-border-color);
+    padding: var(--ae-panel-padding);
+    box-sizing: border-box;
+    text-align: left;
+    white-space: normal;
+}
+
+.popup-table td {
+    line-break: anywhere;
+}
+
+.popup-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--ae-panel-bg-color);
+}
+
+.popup-table thead th:first-child {
+    left: 0;
+    z-index: 3;
+}
+
+.popup-table tr> :first-child {
+    position: sticky;
+    background: var(--ae-group-bg-color);
+    left: 0;
+}
+
+
+.popup-table td.muted {
+    width: 15%;
+    overflow: hidden;
+    font-size: 0;
+    border: 0;
+    background: var(--ae-group-bg-color);
+}
+
+.popup-table td.muted+td:not(.muted) {
+    width: 70%;
+}
+
+.popup-table td.link {
+    color: var(--ae-primary-color);
+}
+
+.popup-table tr>td:last-child {
+    width: 15%;
 }