feat: bug report page & clipboard data inspector

[situ2001]

close #8309

@cnrpman I made a simple bug report page and a clipboard data inspector.

Mechanism of clipboard data inspector

When a paste event occurs, the inspector does these things.

1. Extract clipboard data (.-clipboardData e)
2. Parse (.-items data) => Array<{kind:string, type:string}>
3. Parse (.-types data) => Array<{kind:string, data: string}>. Notes that data is read by (.getData data type)
4. Parse (.-files data) => Array<{name:string, type:string, size:number}>
5. conj then into a {}

For example, if I copy these codes from vscode.

#?(:cljs
   (defn copy-to-clipboard!
     ([s]
      (utils/writeClipboard (clj->js {:text s})))
     ([s html]
      (utils/writeClipboard (clj->js {:text s :html html})))))

The output will be

{
  "items": [
    {
      "kind": "string",
      "type": "text/plain"
    },
    {
      "kind": "string",
      "type": "text/html"
    },
    {
      "kind": "string",
      "type": "vscode-editor-data"
    }
  ],
  "types": [
    {
      "type": "text/plain",
      "data": "#?(:cljs\n   (defn copy-to-clipboard!\n     ([s]\n      (utils/writeClipboard (clj->js {:text s})))\n     ([s html]\n      (utils/writeClipboard (clj->js {:text s :html html})))))"
    },
    {
      "type": "text/html",
      "data": "<meta charset='utf-8'><div style=\"color: #abb2bf;background-color: #23272e;font-family: Fira Code ,PingFang SC, Menlo, Monaco, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;\"><div><span style=\"color: #abb2bf;\">#?(</span><span style=\"color: #56b6c2;\">:cljs</span></div><div><span style=\"color: #abb2bf;\">   (</span><span style=\"color: #d19a66;\">defn</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #61afef;\">copy-to-clipboard!</span></div><div><span style=\"color: #abb2bf;\">     ([</span><span style=\"color: #e06c75;\">s</span><span style=\"color: #abb2bf;\">]</span></div><div><span style=\"color: #abb2bf;\">      (</span><span style=\"color: #e5c07b;\">utils</span><span style=\"color: #e06c75;\">/</span><span style=\"color: #61afef;\">writeClipboard</span><span style=\"color: #abb2bf;\"> (</span><span style=\"color: #61afef;\">clj-&gt;js</span><span style=\"color: #abb2bf;\"> {</span><span style=\"color: #c678dd;\">:text</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #e06c75;\">s</span><span style=\"color: #abb2bf;\">})))</span></div><div><span style=\"color: #abb2bf;\">     ([</span><span style=\"color: #e06c75;\">s</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #e06c75;\">html</span><span style=\"color: #abb2bf;\">]</span></div><div><span style=\"color: #abb2bf;\">      (</span><span style=\"color: #e5c07b;\">utils</span><span style=\"color: #e06c75;\">/</span><span style=\"color: #61afef;\">writeClipboard</span><span style=\"color: #abb2bf;\"> (</span><span style=\"color: #61afef;\">clj-&gt;js</span><span style=\"color: #abb2bf;\"> {</span><span style=\"color: #c678dd;\">:text</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #e06c75;\">s</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #c678dd;\">:html</span><span style=\"color: #abb2bf;\"> </span><span style=\"color: #e06c75;\">html</span><span style=\"color: #abb2bf;\">})))))</span></div></div>"
    },
    {
      "type": "vscode-editor-data",
      "data": "{\"version\":1,\"isFromEmptySelection\":false,\"multicursorText\":null,\"mode\":\"clojure\"}"
    }
  ],
  "files": []
}

Screenshots

Clipboard data can be collected on both PC and phone.

Kapture.2023-01-12.at.12.52.24.mp4

Kapture.2023-01-12.at.13.00.36.mp4

Reviews

• Polish the English expression, if needed.
• Point out any UX issues.

[andelf]

non-blocking: Better hide it under "Developer mode".

[cnrpman]

IMO hiding it in Dev mode is not a good idea 👀

[situ2001]

IMO this is a feature orienting to the users. 🤔

[cnrpman]

Just rebase to the current master. It's upgraded to Electron 20
Follow steps may required:
yarn
yarn watch
In another window:
cd static
yarn
cd ..
yarn dev-electron-app and kill all electron process
Then a normal start happens

[cnrpman]

Looks great! Just made some UX tuning:
Unifiy the buttons

Finetune the input box and add a Go back but

[Bad3r]

it only works with the default light theme:
 

[situ2001]

it only works with the default light theme:  

Fixed.

[andelf]

Looks good. Let's deliver it.

[situ2001]

This :on-click pointed here will mess up the history stack since it pushes the href to the stack instead of popping, as the following screen recording shows.

Kapture.2023-01-15.at.16.19.51.mp4