user.css outside extension directory

* Move drawing style to `default.css`.
* Generate (when opening) and handle `user.css` in `~/.local/share/drawOnYourScreen/`.

data/default.css

@@ -0,0 +1,47 @@
+/*
+ * Except for the font, you don't need to restart the extension.
+ * Just save this file as ~/.local/share/drawOnYourScreen/user.css and the changes will be applied for your next brushstroke.
+ *
+ * ~/.local/share/drawOnYourScreen/user.css file is automatically generated by activating "Open user.css".
+ * Delete ~/.local/share/drawOnYourScreen/user.css file to retrieve default drawing style.
+ *
+ * line-join (no string):
+ * 0 : miter, 1 : round, 2 : bevel
+ * line-cap (no string):
+ * 0 : butt, 1 : round, 2 : square
+ *
+ * dash:
+ * dash-array-on is the length of dashes (no dashes if 0, you can put 0.1 to get dots or square according to line-cap)
+ * dash-array-off is the length of gaps (no dashes if 0)
+ *
+ * font:
+ * only one family : no comma separated list of families like "font1, font2, ..., Sans-Serif"
+ * font family can be any font installed, or a generic family name (Serif, Sans-Serif, Monospace, Cursive, Fantasy)
+ * font weight and font style : no upper case when string
+ * weight <= 500 (or lighter, normal, medium) is rendered as normal
+ * weight > 500 (or bolder, bold) is rendered as bold
+ * oblique and italic style support depends on the font family and seem to be rendered identically
+ *
+ */
+
+.draw-on-your-screen {
+    -drawing-line-width: 5px;
+    -drawing-line-join: 1;
+    -drawing-line-cap: 1;
+    -drawing-dash-array-on: 5px;
+    -drawing-dash-array-off: 15px;
+    -drawing-dash-offset: 0px;
+    -drawing-color1: HotPink;
+    -drawing-color2: Cyan;
+    -drawing-color3: yellow;
+    -drawing-color4: Orangered;
+    -drawing-color5: Chartreuse;
+    -drawing-color6: DarkViolet;
+    -drawing-color7: #ffffff;
+    -drawing-color8: rgba(130, 130, 130, 0.3);
+    -drawing-color9: rgb(0, 0, 0);
+    -drawing-background-color: #2e3436;
+    font-family: Cantarell;
+    font-weight: normal;
+    font-style: normal;
+}

draw.js

@@ -1264,7 +1264,7 @@ var DrawingMenu = new Lang.Class({
         this._addSaveDrawingSubMenuItem(this.menu);
         
         this.menu.addAction(_("Save drawing as a SVG file"), this.area.saveAsSvg.bind(this.area), 'image-x-generic-symbolic');
-        this.menu.addAction(_("Open stylesheet.css"), manager.openStylesheetFile.bind(manager), 'document-page-setup-symbolic');
+        this.menu.addAction(_("Open user.css"), manager.openUserStyleFile.bind(manager), 'document-page-setup-symbolic');
         this.menu.addAction(_("Show help"), this.area.toggleHelp.bind(this.area), 'preferences-desktop-keyboard-shortcuts-symbolic');
         
         this.updateSectionVisibility();

extension.js

@@ -21,6 +21,7 @@
  */
 
 const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
 const Lang = imports.lang;
 const Meta = imports.gi.Meta;
 const Shell = imports.gi.Shell;
@@ -93,16 +94,25 @@ var AreaManager = new Lang.Class({
         this.desktopSettingHandler = this.settings.connect('changed::drawing-on-desktop', this.onDesktopSettingChanged.bind(this));
         this.persistentSettingHandler = this.settings.connect('changed::persistent-drawing', this.onPersistentSettingChanged.bind(this));
         
-        if (Me.stylesheet) {
-            this.stylesheetMonitor = Me.stylesheet.monitor(Gio.FileMonitorFlags.NONE, null);
-            this.stylesheetChangedHandler = this.stylesheetMonitor.connect('changed', (monitor, file, otherFile, eventType) => {
-                if ((eventType != 0 && eventType != 3) || !Me.stylesheet.query_exists(null))
-                    return;
-                let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
-                theme.unload_stylesheet(Me.stylesheet);
-                theme.load_stylesheet(Me.stylesheet);
-            });
+        this.userStyleFile = Gio.File.new_for_path(GLib.build_filenamev([GLib.get_user_data_dir(), Me.metadata['data-dir'], 'user.css']));
+        
+        if (this.userStyleFile.query_exists(null)) {
+            let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
+            theme.load_stylesheet(this.userStyleFile);
         }
+        
+        this.userStyleMonitor = this.userStyleFile.monitor_file(Gio.FileMonitorFlags.WATCH_MOVES, null);
+        this.userStyleHandler = this.userStyleMonitor.connect('changed', (monitor, file, otherFile, eventType) => {
+            // 'CHANGED' events are followed by a 'CHANGES_DONE_HINT' event
+            if (eventType == Gio.FileMonitorEvent.CHANGED || eventType == Gio.FileMonitorEvent.ATTRIBUTE_CHANGED)
+                return;
+            
+            let theme = St.ThemeContext.get_for_stage(global.stage).get_theme();
+            if (theme.get_custom_stylesheets().indexOf(this.userStyleFile) != -1)
+                theme.unload_stylesheet(this.userStyleFile);
+            if (this.userStyleFile.query_exists(null))
+                theme.load_stylesheet(this.userStyleFile);
+        });
     },
     
     onDesktopSettingChanged: function() {
@@ -185,7 +195,7 @@ var AreaManager = new Lang.Class({
             'toggle-font-style': this.activeArea.toggleFontStyle.bind(this.activeArea),
             'toggle-panel-and-dock-visibility': this.togglePanelAndDockOpacity.bind(this),
             'toggle-help': this.activeArea.toggleHelp.bind(this.activeArea),
-            'open-stylesheet': this.openStylesheetFile.bind(this)
+            'open-user-stylesheet': this.openUserStyleFile.bind(this)
         };
         
         for (let key in this.internalKeybindings) {
@@ -216,9 +226,19 @@ var AreaManager = new Lang.Class({
         }
     },
     
-    openStylesheetFile: function() {
-        if (Me.stylesheet && Me.stylesheet.query_exists(null))
-            Gio.AppInfo.launch_default_for_uri(Me.stylesheet.get_uri(), global.create_app_launch_context(0, -1));
+    openUserStyleFile: function() {
+        if (!this.userStyleFile.query_exists(null)) {
+            if (!this.userStyleFile.get_parent().query_exists(null))
+                this.userStyleFile.get_parent().make_directory_with_parents(null);
+            let defaultStyleFile = Me.dir.get_child('data').get_child('default.css');
+            if (!defaultStyleFile.query_exists(null))
+                return;
+            let success = defaultStyleFile.copy(this.userStyleFile, Gio.FileCopyFlags.NONE, null, null);
+            if (!success)
+                return;
+        }
+        
+        Gio.AppInfo.launch_default_for_uri(this.userStyleFile.get_uri(), global.create_app_launch_context(0, -1));
         if (this.activeArea)
             this.toggleDrawing();
     },
@@ -364,9 +384,13 @@ var AreaManager = new Lang.Class({
     },
     
     disable: function() {
-        if (this.stylesheetChangedHandler) {
-            this.stylesheetMonitor.disconnect(this.stylesheetChangedHandler);
-            this.stylesheetChangedHandler = null;
+        if (this.userStyleHandler && this.userStyleMonitor) {
+            this.userStyleMonitor.disconnect(this.userStyleHandler);
+            this.userStyleHandler = null;
+        }
+        if (this.userStyleMonitor) {
+            this.userStyleMonitor.cancel();
+            this.userStyleMonitor = null;
         }
         if (this.monitorChangedHandler) {
             Main.layoutManager.disconnect(this.monitorChangedHandler);

locale/draw-on-your-screen.pot

@@ -215,7 +215,7 @@ msgstr ""
 msgid "Save drawing as a SVG file"
 msgstr ""
 
-msgid "Open stylesheet.css"
+msgid "Open user.css"
 msgstr ""
 
 msgid "Show help"
@@ -315,13 +315,11 @@ msgid ""
 " . extend and rotate an ellipse\n"
 " . curve a line (cubic Bezier curve)\n"
 " . smooth a free drawing stroke (you may prefer to smooth the stroke afterward, see “<i>%s</i>”)"
-
 msgstr ""
 
-msgid "Change the style"
-msgstr ""
-
-msgid "See stylesheet.css"
+msgid ""
+"Default drawing attributes (colors, font, line, dash) are defined in an editable css file.\n"
+"See <i>“%s”</i>."
 msgstr ""
 
 msgid ""

prefs.js

@@ -71,7 +71,7 @@ var INTERNAL_KEYBINDINGS = {
     'open-next-json': "Open next drawing",
     'save-as-json': "Save drawing",
     'save-as-svg': "Save drawing as a SVG file",
-    'open-stylesheet': "Open stylesheet.css",
+    'open-user-stylesheet': "Open user.css",
     'toggle-help': "Show help"
 };
 
@@ -291,11 +291,14 @@ var PrefsPage = new GObject.Class({
         listBox.add(internalKeybindingsWidget);
         
         let styleBox = new Gtk.Box({ margin_top: MARGIN, margin_left: MARGIN, margin_right: MARGIN, margin_bottom:MARGIN });
-        let styleLabel = new Gtk.Label({ label: _("Change the style") });
+        let styleLabel = new Gtk.Label({
+            use_markup: true,
+            label: _("<b>Default</b> drawing attributes (color palette, font, line, dash) are defined in an editable <b>css</b> file.\n" +
+                     "See <i>“%s”</i>.").format(_("Open user.css"))
+        });
         styleLabel.set_halign(1);
-        let styleLabel2 = new Gtk.Label({ label: _("See stylesheet.css") });
+        styleLabel.get_style_context().add_class("dim-label");
         styleBox.pack_start(styleLabel, true, true, 4);
-        styleBox.pack_start(styleLabel2, false, false, 4);
         listBox.add(styleBox);
         
         let noteBox = new Gtk.Box({ margin_top: MARGIN, margin_left: MARGIN, margin_right: MARGIN, margin_bottom:MARGIN });

schemas/org.gnome.shell.extensions.draw-on-your-screen.gschema.xml

@@ -191,10 +191,10 @@
       <summary>toggle font style</summary>
       <description>toggle font style</description>
     </key>
-    <key type="as" name="open-stylesheet">
+    <key type="as" name="open-user-stylesheet">
       <default>["&lt;Primary&gt;o"]</default>
-      <summary>open stylesheet</summary>
-      <description>open stylesheet</description>
+      <summary>open user stylesheet</summary>
+      <description>open user stylesheet</description>
     </key>
     <key type="as" name="save-as-svg">
       <default>["&lt;Primary&gt;&lt;Shift&gt;s"]</default>

stylesheet.css

@@ -1,50 +1,6 @@
-/*
- * Except for the font,
- * you don't need to restart the extension.
- * Just save this file and the changes will be applied for your next brushstroke.
- *
- * line-join (no string):
- * 0 : miter, 1 : round, 2 : bevel
- * line-cap (no string):
- * 0 : butt, 1 : round, 2 : square
- *
- * dash:
- * dash-array-on is the length of dashes (no dashes if 0, you can put 0.1 to get dots or square according to line-cap)
- * dash-array-off is the length of gaps (no dashes if 0)
- *
- * font:
- * only one family : no comma separated list of families like "font1, font2, ..., Sans-Serif"
- * font family can be any font installed, or a generic family name (Serif, Sans-Serif, Monospace, Cursive, Fantasy)
- * font weight and font style : no upper case when string
- * weight <= 500 (or lighter, normal, medium) is rendered as normal
- * weight > 500 (or bolder, bold) is rendered as bold
- * oblique and italic style support depends on the font family and seem to be rendered identically
- *
- */
+@import "./data/default.css";
 
-.draw-on-your-screen {
-    -drawing-line-width: 5px;
-    -drawing-line-join: 1;
-    -drawing-line-cap: 1;
-    -drawing-dash-array-on: 5px;
-    -drawing-dash-array-off: 15px;
-    -drawing-dash-offset: 0px;
-    -drawing-color1: HotPink;
-    -drawing-color2: Cyan;
-    -drawing-color3: yellow;
-    -drawing-color4: Orangered;
-    -drawing-color5: Chartreuse;
-    -drawing-color6: DarkViolet;
-    -drawing-color7: #ffffff;
-    -drawing-color8: rgba(130, 130, 130, 0.3);
-    -drawing-color9: rgb(0, 0, 0);
-    -drawing-background-color: #2e3436; /* GS osd_bg_color: #2e3436, GTK Adwaita-dark theme_base_color: #2d2c2e */
-    font-family: Cantarell;
-    font-weight: normal;
-    font-style: normal;
-}
-
-/*********************************************/
+/* The following styles don't affect the drawing */
 
 /* square area */
 
@@ -56,8 +12,7 @@
     outline: none;
 }
 
-/* The following styles don't affect the drawing,
- * but the "Ctrl + F1" on-screen-display */
+ /* "Ctrl + F1" on-screen-display */
 
 .draw-on-your-screen-helper {
     margin: 0;