✨ Add extensible chart markings support (#4658)

- Replace add_marking with CHART_MARKED event
- Allow for arbitrary markings in the JS UI

Example plugin usage:

```python
self._event_bus.fire(Events.CHART_MARKED, {
    "type": "pluginname_eventname",
    "label": "Event",
})
```

5 files changed, 79 insertions, 43 deletions

diff --git a/docs/events/index.rst b/docs/events/index.rst
index a3188bd3a..4289ca425 100644
--- a/docs/events/index.rst
+++ b/docs/events/index.rst
@@ -605,6 +605,17 @@ GcodeScript${ScriptName}Finished
 
    .. versionadded:: 1.6.0
 
+ChartMarked
+   A time-based marking has been made on the UI's temperature chart.
+
+   Payload:
+
+     * ``type``: the marking's ID. Built-in types are ``print``, ``done``, ``cancel``, ``pause``, and ``resume``. Plugins may set arbitrary types
+     * ``label``: the human-readable short label of the marking
+     * ``time``: the epoch time of marking
+
+   .. versionadded:: 1.9.0
+
 .. _sec-events-available_events-gcode_processing:
 
 GCODE processing
diff --git a/src/octoprint/events.py b/src/octoprint/events.py
index 537f220ed..010c20604 100644
--- a/src/octoprint/events.py
+++ b/src/octoprint/events.py
@@ -81,6 +81,7 @@ class Events:
     PRINT_PAUSED = "PrintPaused"
     PRINT_RESUMED = "PrintResumed"
     ERROR = "Error"
+    CHART_MARKED = "ChartMarked"
 
     # print/gcode events
     POWER_ON = "PowerOn"
diff --git a/src/octoprint/printer/standard.py b/src/octoprint/printer/standard.py
index 361752645..742035022 100644
--- a/src/octoprint/printer/standard.py
+++ b/src/octoprint/printer/standard.py
@@ -163,6 +163,7 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
         eventManager().subscribe(
             Events.METADATA_STATISTICS_UPDATED, self._on_event_MetadataStatisticsUpdated
         )
+        eventManager().subscribe(Events.CHART_MARKED, self._on_event_ChartMarked)
 
         self._handle_connect_hooks = plugin_manager().get_hooks(
             "octoprint.printer.handle_connect"
@@ -306,6 +307,17 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
                     self._selectedFile["user"],
                 )
 
+    # ~~ chart marking insertions
+
+    def _on_event_ChartMarked(self, event, data):
+        self._markings.append(
+            {
+                "type": data.get("type", "unknown"),
+                "label": data.get("label"),
+                "time": data.get("time", time.time()),
+            }
+        )
+
     # ~~ progress plugin reporting
 
     def _reportPrintProgressToPlugins(self, progress):
@@ -713,14 +725,6 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
 
         return self._comm.getFilePosition()
 
-    def add_marking(self, type):
-        self._markings.append(
-            {
-                "type": type,
-                "time": time.time(),
-            }
-        )
-
     def get_markings(self):
         return self._markings
 
@@ -1583,7 +1587,10 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
         payload = self._payload_for_print_job_event(print_job_user=user, action_user=user)
         if payload:
             eventManager().fire(Events.PRINT_STARTED, payload)
-            self.add_marking("print")
+            eventManager().fire(
+                Events.CHART_MARKED,
+                {"type": "print", "label": "Start"},
+            )
             self._logger_job.info(
                 "Print job started - origin: {}, path: {}, owner: {}, user: {}".format(
                     payload.get("origin"),
@@ -1607,7 +1614,10 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
         payload = self._payload_for_print_job_event()
         if payload:
             payload["time"] = self._comm.getPrintTime()
-            self.add_marking("done")
+            eventManager().fire(
+                Events.CHART_MARKED,
+                {"type": "done", "label": "Done"},
+            )
             self._updateProgressData(
                 completion=1.0,
                 filepos=payload["size"],
@@ -1684,7 +1694,10 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
             payload["time"] = self._comm.getPrintTime()
 
             eventManager().fire(Events.PRINT_CANCELLED, payload)
-            self.add_marking("cancel")
+            eventManager().fire(
+                Events.CHART_MARKED,
+                {"type": "cancel", "label": "Cancel"},
+            )
             self._logger_job.info(
                 "Print job cancelled - origin: {}, path: {}, owner: {}, user: {}".format(
                     payload.get("origin"),
@@ -1736,7 +1749,10 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
                     payload.get("user"),
                 )
             )
-            self.add_marking("pause")
+            eventManager().fire(
+                Events.CHART_MARKED,
+                {"type": "pause", "label": "Pause"},
+            )
             if not suppress_script:
                 self.script(
                     "afterPrintPaused",
@@ -1749,7 +1765,10 @@ class Printer(PrinterInterface, comm.MachineComPrintCallback):
         payload = self._payload_for_print_job_event(action_user=user)
         if payload:
             eventManager().fire(Events.PRINT_RESUMED, payload)
-            self.add_marking("resume")
+            eventManager().fire(
+                Events.CHART_MARKED,
+                {"type": "resume", "label": "Resume"},
+            )
             self._logger_job.info(
                 "Print job resumed - origin: {}, path: {}, owner: {}, user: {}".format(
                     payload.get("origin"),
diff --git a/src/octoprint/static/js/app/viewmodels/temperature.js b/src/octoprint/static/js/app/viewmodels/temperature.js
index ef90c3323..538d1de71 100644
--- a/src/octoprint/static/js/app/viewmodels/temperature.js
+++ b/src/octoprint/static/js/app/viewmodels/temperature.js
@@ -203,29 +203,6 @@ $(function () {
 
         self.markings = [];
 
-        self.marking_props = {
-            print: {
-                label: gettext("Start"),
-                color: "#218656"
-            },
-            pause: {
-                label: gettext("Pause"),
-                color: "#FDC02F"
-            },
-            resume: {
-                label: gettext("Resume"),
-                color: "#27CAEE"
-            },
-            cancel: {
-                label: gettext("Cancel"),
-                color: "#DA3749"
-            },
-            done: {
-                label: gettext("Done"),
-                color: "#1B72F9"
-            }
-        };
-
         self.showStateMarks = ko.observable(
             loadFromLocalStorage("temperatureGraph.showStateMarks", true)
         );
@@ -485,15 +462,15 @@ $(function () {
                     y: self.plot.getAxes().yaxis.max
                 });
 
+                var markLabel = mark.type;
+                if (mark.label) {
+                    markLabel = gettext(mark.label);
+                }
                 if (o.left > yAxisLabelWidth) {
                     var label = $("<div></div>");
-                    label.html(self.marking_props[mark.type].label);
-                    var css = {
-                        backgroundColor: self.marking_props[mark.type].color
-                    };
-
-                    label.css(css);
+                    label.html(markLabel);
                     label.addClass("temperature-mark-label");
+                    label.addClass("temperature-mark-type-" + mark.type);
 
                     graph.append(label);
 
@@ -520,7 +497,7 @@ $(function () {
                 }
 
                 return {
-                    color: self.marking_props[mark.type].color,
+                    color: label.css("background-color"),
                     lineWidth: lineWidth,
                     xaxis: {from: time, to: time}
                 };
@@ -529,6 +506,17 @@ $(function () {
             return marks;
         };
 
+        // Dummy translation requests for dynamic strings supplied by the backend
+        // noinspection BadExpressionStatementJS
+        [
+            // mark labels
+            gettext("Start"),
+            gettext("Done"),
+            gettext("Cancel"),
+            gettext("Pause"),
+            gettext("Resume")
+        ];
+
         self._initializePlot = function (force, plotInfo) {
             var graph = $("#temperature-graph");
             if (!graph.length) return; // no graph
diff --git a/src/octoprint/static/less/octoprint.less b/src/octoprint/static/less/octoprint.less
index 80acc34d0..131266d69 100644
--- a/src/octoprint/static/less/octoprint.less
+++ b/src/octoprint/static/less/octoprint.less
@@ -575,12 +575,29 @@ table {
 .temperature-mark-label {
   position: absolute;
   color: white;
+  background-color: #aeb6bf;
   padding: 0 5px;
   font-size: 8px;
   transform-origin: 0 0;
   transform: rotate(-90deg);
 }
 
+.temperature-mark-type-print {
+  background-color: #218656;
+}
+.temperature-mark-type-pause {
+  background-color: #fdc02f;
+}
+.temperature-mark-type-resume {
+  background-color: #27caee;
+}
+.temperature-mark-type-cancel {
+  background-color: #da3749;
+}
+.temperature-mark-type-done {
+  background-color: #1b72f9;
+}
+
 /** Various */
 
 .tab-content,