Playground for GNOME development

Overview

Workbench

Playground for GNOME development

Workbench aims to provide a great developer experience for the following use cases

  1. An application to learn GNOME development - learning by doing with an instant feedback loop
  2. A scratchpad for experienced developers who want to try or prototype something quickly

Workbench will never be a full fledged IDE or code editor. I see it as the little brother of GNOME Builder.

Features:

  • Live GTK/CSS preview
  • GNOME JavaScript for quick and easy scripting
  • Syntax highlighting
  • Opens .js, .css and .ui files
  • Auto format
  • More to come

Workbench is a work in progress, feedback and help welcome.

Test

  1. Install GNOME Builder
  2. Open Builder and select "Clone Repository..."
  3. Clone https://github.com/sonnyp/Workbench.git
  4. Press the Run button

Tips and tricks

Disable code formatting

Workbench uses the prettier code formatter. If you need to exclude some code you can use special comments.

JavaScript

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
);

XML

<foo>
  <!-- prettier-ignore-start -->
    <this-content-will-not-be-formatted     />
  <!-- prettier-ignore-end -->
</foo>

CSS

/* prettier-ignore */
.my    ugly rule
{

}

Development

Use GNOME Builder.

Copyright

© 2022 Sonny Piers

License

GPLv3. Please see COPYING file.

Comments
  • Support other languages

    Support other languages

    It should be possible to support other languages than JavaScript.

    We will have to change the preview to be out of process thought.

    Could be an external window or simply use broadway GTK backend https://docs.gtk.org/gtk4/broadway.html

    opened by sonnyp 16
  • Support Blueprint

    Support Blueprint

    https://jwestman.pages.gitlab.gnome.org/blueprint-compiler/

    The UI tab should support Blueprint. We probably want to turn UI - XML into a dropdown to select which format to use and default to xml

    Some notes

    opened by sonnyp 9
  • Translate library examples to Vala

    Translate library examples to Vala

    There are some shortcomings due to the Vala API not having access to the application class, but I think these translations are otherwise fairly faithful to the originals. Feel free to comment and criticize though.

    opened by benpocalypse 7
  • [Bug]: Crash when method is unsupported for class

    [Bug]: Crash when method is unsupported for class

    Pasting this snippet, and then pressing "Show Preview Window" in the app crashes unconditionally.

    If I run it in the terminal and follow the steps above, the terminal outputs this:

    TheEvilSkeleton@TheMainDesktop ~> flatpak run re.sonny.Workbench
    
    (workbench-vala-previewer:23): Adwaita-WARNING **: 12:19:46.876: Using GtkSettings:gtk-application-prefer-dark-theme with libadwaita is unsupported. Please use AdwStyleManager:color-scheme instead.
    Couldn't obtain the bus name.
    
    Adwaita-gtk_window_set_titlebar() is not supported for AdwWindow
    
    opened by TheEvilSkeleton 6
  • The demo JS code fails to run after resetting the demo

    The demo JS code fails to run after resetting the demo

    The demo code used to work as expected. I tried to experiment a bit but ultimately ended by resetting the demo. Now, I cannot launch it anymore. The following message appears in the console:

    Failed to register: GDBus.Error:org.freedesktop.DBus.Error.ServiceUnknown: org.freedesktop.DBus.Error.ServiceUnknown
    
    opened by jljouannic 6
  • Random crashes when editing

    Random crashes when editing

    Started editing a blueprint to get some info on when this happens, but can't figure out where it's happening.

    This is about where it started crashing, but it only happens randomly:

    using Gtk 4.0;
    using Adw 1;
    
    template MainWindow : Adw.ApplicationWindow {
      Box main_box {
        Adw.HeaderBar {
          [title]
          Adw.ViewSwitch  // This is where it starts happening, as I'm typing out ViewSwitcherTitle it keeps randomly crashing after a few characters
        }
      }
    }
    
    opened by polyjitter 5
  • Default demo shouldn't have Code

    Default demo shouldn't have Code

    So that the default is a simpler Gtk/CSS editor

    It will look simpler / more accessible to beginner and I expect most application developers use Workbench for GTK/CSS only.

    opened by sonnyp 5
  • Allow preview in dedicated window

    Allow preview in dedicated window

    There are 2 use cases for this

    1. Allow to render <GtkWindow/> , AdwHeaderBar, ...
    2. Allow the user to arrange their workspace however they like (like resizing the preview window and set it to always on top)

    In the future it will also enable https://github.com/sonnyp/Workbench/issues/17

    The remaining question is do we need some mechanism to "Detach" the preview or should we just rely on <GtkWindow/> being the top level object in UI ?

    opened by sonnyp 5
  • Crash when blueprint tries to create an instance of the abstract class

    Crash when blueprint tries to create an instance of the abstract class "gtk widget"

    (workbench-vala-previewer:38): Adwaita-WARNING **: 20:30:23.189: Using GtkSettings:gtk-application-prefer-dark-theme with libadwaita is unsupported. Please use AdwStyleManager:color-scheme instead.
    
    (re.sonny.Workbench:4): GLib-GObject-ERROR **: 20:30:23.327: cannot create instance of abstract (non-instantiatable) type 'GtkWidget'
    

    This is the file I want to edit:

    using Gtk 4.0;
    using Adw 1;
    
    Widget {
        
    }
    

    I am guessing that this syntax is wrong 😅

    opened by mijorus 4
  • Replace XML formatter and add format shortcut

    Replace XML formatter and add format shortcut

    The shortcut is <Ctrl><Shift>Return.

    There were a few issues with our previous XML formatter, the biggest one is that it would behave differently than Blueprint formatter. So I wrote a custom XML formatter that behaves exactly like Blueprint xml_emitter.py .

    https://gitlab.gnome.org/jwestman/blueprint-compiler/-/blob/59283a76adc8d270ff5f67b630b7dfa905ec34a9/blueprintcompiler/xml_emitter.py

    @melix99 could you test this quickly? Building this branch in GNOME Builder should work just fine.

    Feel free to review as well but that's not required .

    opened by sonnyp 4
  • Preview broken on flatpak

    Preview broken on flatpak

    Hey there, It appears that the preview is broken on flatpak: It's just a white box without any content. There is one error in the console: Promise timed out after 1000 milliseconds Why is this happening? Flatpak --version: 1.12.7, Workbench version: 42.0

    opened by UltraBlackLinux 4
  • Blueprint error info popup disappears instantly

    Blueprint error info popup disappears instantly

    • Make a mistake in the blueprint code (e.g. mis-spell widget name or property name)
    • The error is now underlined in red
    • Hover over the underlined code
    • A popup with the error information appears, and then disappears instantly, making the error impossible to read
    opened by eayus 0
  • Workbench claims wrong shortcut will launch GTK inspector

    Workbench claims wrong shortcut will launch GTK inspector

    The Platform Tools module found in the Library says, at the bottom of its rendered output:

    As with most GTK applications, you can use the keyboard shortcut to open the Inspector and select an object to see what it is made of.

    Ctrl+Shift+I

    Except... Ctrl+Shift+I doesn't open the inspector. On my Fedora 36 system, at least, a Ctrl+Shift+I in Nautilus (for example) results in a "Select All" being performed in the focused window.

    Ctrl+Shift+D launches the GTK Inspector.

    Edit: (In fact, Ctrl+Shift+I doesn't even open the inspector in Workbench. Even there, the only working shortcut AFAICT is Ctrl+Shift+D.)

    opened by ferdnyc 4
  • Add VIM emulation

    Add VIM emulation

    I've just recently started learning GTK and Workbench has been great for experimenting with UIs but my workflow is being hampered due to the lack of vim support.

    Other GTK4 applications such as Builder, Text Editor already have vim support, so it'd be great if Workbench could have support for it as well.

    If I'm not wrong, I think GtkSourceView already has Vim emulation support, so I'd at least hope that it'd not be too complicated to add support for vim. I don't know much about GTK yet, so that's all the info I can provide regarding possible implementations. Thanks!

    opened by nozwock 2
  • Completion provider

    Completion provider

    This is blocked by https://gitlab.gnome.org/GNOME/gjs/-/issues/72

    https://gitlab.gnome.org/GNOME/gjs/-/issues/255 is a better explanation of the problem

    opened by sonnyp 0
Releases(v1.0.0)
Owner
Sonny Piers
Sonny Piers
Simplify gnome-extensions development

GISP GISP Is a Starter Pack About GISP is a project to simplify ?? gnome-extensions development. There're hundrends (maybe thousands?) of javascript d

Leandro Simões 3 Jul 18, 2022
GNOME Shell extension to integrate Plank, the simplest dock on the planet.

Dash to Plank Gnome Shell extension to integrate Plank, the simplest dock on the planet. To use this extension you must install Plank on your system.

Hardpixel 36 Dec 9, 2022
Extension personnelle pour GNOME SHELL

Extension perso GNOME Extension personnelle pour GNOME SHELL qui affiche des vues différentes dans la barre des tâches. Les vues affichent des informa

Adrien_D 20 Nov 13, 2022
Tunes overview UI of the gnome 40 a bit

Gnome 40 Overview UI Tune Simple gnome-shell (v40.0) extension that tunes overview UI to make it more usable. Changes Search textbox is hidden by defa

Alexey Manukhin 68 Nov 28, 2022
A Gnome extension to remind you to give a rest to your eyes every a specific period of time

A Gnome extension to remind you to give a rest to your eyes every a specific period of time

null 8 Jun 21, 2022
Another Drop Down Terminal Extension for GNOME Shell

Another Drop Down Terminal Extension for GNOME Shell

Guilhem Lettron 9 Apr 6, 2022
A gnome-shell extensions that try to add rounded corners for all windows

Rounded Window Corners A gnome-shell extensions that try to add rounded corners for all windows Features Works with Gnome 40/41/42 Custom border radiu

Yi 194 Jan 3, 2023
GNOME Shell extension for controling Lenovo IdeaPad laptops options.

IdeaPad Controls GNOME Shell extension for controling Lenovo IdeaPad laptops options. Available options: Conservation Mode, Camera Lock, Fn Lock, Touc

null 17 Dec 23, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

Skeleton Skeleton is a simple, responsive boilerplate to kickstart any responsive project. Check out http://getskeleton.com for documentation and deta

Dave Gamache 18.8k Dec 29, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Jan 1, 2023
A bare-bones CSS reset for modern web development.

A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm

Andy Bell 2.7k Jan 1, 2023
A gnome-shell extension to keep the old topbar corners, which were removed for GNOME 42.

Panel corners A GNOME shell extension to keep the old topbar corners, which were removed for GNOME 42. It also allows you to customize the rounded cor

Aurélien Hamy 34 Dec 10, 2022
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Cleo Menezes Jr. 43 Nov 7, 2022
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Instalation Enable Epiphany extension. Optional if not

GNOME Web Extensions 12 Sep 2, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Simplify gnome-extensions development

GISP GISP Is a Starter Pack About GISP is a project to simplify ?? gnome-extensions development. There're hundrends (maybe thousands?) of javascript d

Leandro Simões 3 Jul 18, 2022
GNOME Shell extension to integrate Plank, the simplest dock on the planet.

Dash to Plank Gnome Shell extension to integrate Plank, the simplest dock on the planet. To use this extension you must install Plank on your system.

Hardpixel 36 Dec 9, 2022