Various design improvements inspired by Workbench

data/re.sonny.Playhouse.gschema.xml

@@ -13,7 +13,7 @@
     <key name="show-javascript" type="b">
       <default>false</default>
     </key>
-    <key name="show-output" type="b">
+    <key name="show-preview" type="b">
       <default>true</default>
     </key>
     <key name="show-devtools" type="b">

src/application.js

@@ -8,13 +8,13 @@ import ShortcutsWindow from "./ShortcutsWindow.js";
 
 import { settings } from "./utils.js";
 
-// import "./style.css";
+import "./style.css";
 
 export default function Application() {
   const application = new Adw.Application({
     application_id: "re.sonny.Playhouse",
     // flags: Gio.ApplicationFlags.HANDLES_OPEN,
-    resource_base_path: "/re/sonny/Playouse/src",
+    resource_base_path: "/re/sonny/Playhouse/src",
   });
 
   application.connect("activate", () => {

src/re.sonny.Playhouse

@@ -5,6 +5,7 @@
 import { exit } from "system";
 import GLib from "gi://GLib";
 import { setConsoleLogDomain } from "console";
+import Gio from "gi://Gio";
 
 imports.package.init({
   name: "@app_id@",

src/style.css

@@ -0,0 +1,9 @@
+.view-toggler image {
+  margin-right: 6px;
+}
+
+#panel_html,
+#panel_css,
+#panel_javascript {
+  border-right: solid 1px @borders;
+}

src/window.blp

@@ -1,45 +1,98 @@
 using Gtk 4.0;
 using Adw 1;
+using GtkSource 5;
+using WebKit2 5.0;
 
 Adw.ApplicationWindow window {
   default-width: 800;
   default-height: 600;
   maximized: true;
-  content:
-  Box {
+  content: Box {
     orientation: vertical;
 
     Adw.HeaderBar {
       [start]
       ToggleButton button_devtools {
-        label: "Devtools";
-        active: true;
-      }
+      child: Adw.ButtonContent {
+        icon-name: "re.sonny.Playhouse-symbolic";
+        label: _("_Developer Tools");
+        use-underline: true;
+      };
+      tooltip-text: _("Developer Tools (Ctrl+Shift+I)");
+    }
 
       [title]
       Box {
+        spacing: 6;
         orientation: horizontal;
-
-        styles [
-          "linked",
-        ]
+        homogeneous: true;
 
         ToggleButton button_html {
-          label: "HTML";
-          active: true;
+          child: Box {
+            halign: center;
+
+            Image {
+              icon-name: "re.sonny.Playhouse-symbolic";
+            }
+
+            Label {
+              label: _("_HTML");
+              use-underline: true;
+            }
+          };
+
+          styles ["flat", "view-toggler"]
         }
 
         ToggleButton button_css {
-          label: "CSS";
+          child: Box {
+            halign: center;
+
+            Image {
+            icon-name: "re.sonny.Playhouse-symbolic";
+            }
+
+            Label {
+              label: _("_CSS");
+              use-underline: true;
+            }
+          };
+
+          styles ["flat", "view-toggler"]
         }
 
         ToggleButton button_javascript {
-          label: "JavaScript";
+          child: Box {
+            halign: center;
+
+            Image {
+            icon-name: "re.sonny.Playhouse-symbolic";
+            }
+
+            Label {
+              label: _("_JavaScript");
+              use-underline: true;
+            }
+          };
+
+          styles ["flat", "view-toggler"]
         }
 
-        ToggleButton button_output {
-          label: "Output";
-          active: true;
+        ToggleButton button_preview {
+          child: Box {
+            halign: center;
+
+            Image {
+              icon-name: "re.sonny.Playhouse-symbolic";
+            }
+
+            Label {
+              label: _("_Preview");
+              use-underline: true;
+            }
+          };
+
+          styles ["flat", "view-toggler"]
         }
       }
 
@@ -56,56 +109,53 @@ Adw.ApplicationWindow window {
       homogeneous: true;
 
       ScrolledWindow {
+        name: "panel_html";
         .GtkSourceView source_view_html {
-          buffer:           .GtkSourceBuffer {
-          }
-
-          ;
-          monospace: "true";
-          auto-indent: "true";
-          background-pattern: "grid";
-          highlight-current-line: "true";
-          indent-on-tab: "true";
-          indent-width: "2";
-          insert-spaces-instead-of-tabs: "true";
-          show-line-marks: "true";
-          show-line-numbers: "true";
-          smart-backspace: "true";
-          tab-width: "2";
+          buffer: .GtkSourceBuffer {};
+          monospace: true;
+          auto-indent: true;
+          highlight-current-line: true;
+          indent-on-tab: true;
+          indent-width: 2;
+          insert-spaces-instead-of-tabs: true;
+          show-line-marks: true;
+          show-line-numbers: true;
+          smart-backspace: true;
+          tab-width: 2;
         }
       }
 
       ScrolledWindow {
+        name: "panel_css";
         .GtkSourceView source_view_css {
           buffer: .GtkSourceBuffer {};
-          monospace: "true";
-          auto-indent: "true";
-          background-pattern: "grid";
-          highlight-current-line: "true";
-          indent-on-tab: "true";
-          indent-width: "2";
-          insert-spaces-instead-of-tabs: "true";
-          show-line-marks: "true";
-          show-line-numbers: "true";
-          smart-backspace: "true";
-          tab-width: "2";
+          monospace: true;
+          auto-indent: true;
+          highlight-current-line: true;
+          indent-on-tab: true;
+          indent-width: 2;
+          insert-spaces-instead-of-tabs: true;
+          show-line-marks: true;
+          show-line-numbers: true;
+          smart-backspace: true;
+          tab-width: 2;
         }
       }
 
-      ScrolledWindow {
+      ScrolledWindow panel_javascript {
+        name: "panel_javascript";
         .GtkSourceView source_view_javascript {
           buffer: .GtkSourceBuffer {};
-          monospace: "true";
-          auto-indent: "true";
-          background-pattern: "grid";
-          highlight-current-line: "true";
-          indent-on-tab: "true";
-          indent-width: "2";
-          insert-spaces-instead-of-tabs: "true";
-          show-line-marks: "true";
-          show-line-numbers: "true";
-          smart-backspace: "true";
-          tab-width: "2";
+          monospace: true;
+          auto-indent: true;
+          highlight-current-line: true;
+          indent-on-tab: true;
+          indent-width: 2;
+          insert-spaces-instead-of-tabs: true;
+          show-line-marks: true;
+          show-line-numbers: true;
+          smart-backspace: true;
+          tab-width: 2;
         }
       }
 

src/window.js

@@ -1,5 +1,4 @@
 import Gtk from "gi://Gtk";
-// import Gdk from "gi://Gdk";
 import GObject from "gi://GObject";
 import Gio from "gi://Gio";
 import WebKit from "gi://WebKit2?version=5.0";
@@ -16,16 +15,13 @@ import resource from "./window.blp";
 
 import { settings } from "./utils.js";
 
-Source.init();
-
 const scheme_manager = Source.StyleSchemeManager.get_default();
 const language_manager = Source.LanguageManager.get_default();
 const style_manager = Adw.StyleManager.get_default();
 
 export default function Window({ application }) {
   // Solves
   // Invalid object type 'WebKitWebView'
-  // Invalid object type 'GtkSourceView'
   // see https://stackoverflow.com/a/60128243
   new WebKit.WebView();
 
@@ -125,7 +121,7 @@ p:hover {
   const button_html = builder.get_object("button_html");
   const button_css = builder.get_object("button_css");
   const button_javascript = builder.get_object("button_javascript");
-  const button_output = builder.get_object("button_output");
+  const button_preview = builder.get_object("button_preview");
   const button_devtools = builder.get_object("button_devtools");
 
   const source_views = [
@@ -163,8 +159,8 @@ p:hover {
     Gio.SettingsBindFlags.DEFAULT,
   );
   settings.bind(
-    "show-output",
-    button_output,
+    "show-preview",
+    button_preview,
     "active",
     Gio.SettingsBindFlags.DEFAULT,
   );
@@ -196,7 +192,7 @@ p:hover {
     GObject.BindingFlags.SYNC_CREATE,
   );
 
-  button_output.bind_property(
+  button_preview.bind_property(
     "active",
     web_view,
     "visible",