Show visible hint when view has focus

src/renderview.css

@@ -10,6 +10,7 @@ div.renderview-wrapper {
     --line-radius: 6px;
     --line-thickness: 2px;
     --line-color: rgba(127, 127, 127, 0.3);
+    --line-color-focus: rgba(127, 127, 127, 0.5);
     --titlebar-height: 1.7em;
     display: inline-block;
     position: relative;
@@ -63,6 +64,11 @@ div.renderview-wrapper .renderview-resizer {
     cursor: nwse-resize;
 }
 
+div.renderview-wrapper.has-focus,
+div.renderview-wrapper.has-focus .renderview-top {
+    border-color: var(--line-color-focus);
+}
+
 div.renderview-wrapper.has-titlebar {
     margin-top: 2em !important;
 }

src/renderview.js

@@ -389,7 +389,7 @@ class BaseRenderView {
     const viewElement = this.viewElement
     const signal = this._abortController.signal // to unregister/abort stuff
 
-    // ----- visibility ---------------
+    // ----- visibility and focus ---------------
 
     this._intersectionObserver = new IntersectionObserver((entries, observer) => {
       // This gets called when one of the observed elements becomes visible/invisible.
@@ -409,6 +409,23 @@ class BaseRenderView {
     })
     this._intersectionObserver.observe(viewElement)
 
+    this._focusElement.addEventListener('focus', (ev) => {
+      if (this.wrapperElement) {
+        this.wrapperElement.classList.add('has-focus')
+      }
+      // at the moment the spec does not define focus and blur events, so only used internally for styling purposeses
+    },
+    { signal }
+    )
+
+    this._focusElement.addEventListener('blur', (ev) => {
+      if (this.wrapperElement) {
+        this.wrapperElement.classList.remove('has-focus')
+      }
+    },
+    { signal }
+    )
+
     // ----- resize ---------------
 
     this._resizeObserver = new ResizeObserver((entries) => {