add firefox design docs

README.md

@@ -15,9 +15,12 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
 </details>
 <details>
-  <summary> <strong>How it works (in chrome mv3)</strong> </summary>
+  <summary> <strong>How it works</strong> </summary>
 
-![screenshot](./doc/design.png)
+- Chrome mv3
+  ![screenshot](./doc/design.chrome.png)
+- Firefox
+  ![screenshot](./doc/design.firefox.png)
 
 </details>
 

doc/design.plantuml → doc/design.chrome.plantuml

@@ -31,12 +31,12 @@ end box
 User -> Console: console.diff(...)
 
 activate Console
-Console -> Proxy: jsdiff-console-to-proxy-inprogress
+Console -> Proxy: jsdiff-console-\nto-proxy-inprogress
 activate Proxy
   Proxy -> Panel: jsdiff-proxy-to-panel-inprogress
 deactivate Proxy
 Console o->o Console: clone arguments
-Console -> Proxy: jsdiff-console-to-proxy-compare
+Console -> Proxy: jsdiff-console-\nto-proxy-compare
 deactivate Console
 
 activate Proxy

doc/design.firefox.plantuml

@@ -0,0 +1,71 @@
+@startuml Design
+skinparam style strictuml
+
+box "Devtools"
+actor "User" as User
+end box
+
+box "Firefox Runtime Context"
+participant Console [
+  =Console
+  ----
+  content script
+]
+participant Proxy [
+  =Proxy
+  ----
+  content script
+]
+participant Background [
+  =Background
+]
+database Storage
+participant Panel [
+  =Panel
+  ----
+  DevTools View
+]
+end box
+
+[-> User: Open Devtools
+
+Background <- Panel: jsdiff-devtools-page-connect
+activate Background
+Background <-- Panel: keep alive
+
+=== Invoke API ==
+User -> Console: jsdiff.diff(...)
+activate Console
+  Console -> Proxy: jsdiff-console-\nto-proxy-inprogress
+  activate Proxy
+    Proxy -> Background: jsdiff-proxy-to-panel-inprogress
+  deactivate Proxy
+  Console o->o Console: clone arguments
+  Console -> Proxy: jsdiff-console-\nto-proxy-compare
+deactivate Console
+
+activate Proxy
+  Proxy o<->o Proxy: arrange payload
+  Proxy -> Storage: write payload
+  Proxy --> Background: jsdiff-proxy-to-panel-error
+  Proxy -> Background: jsdiff-proxy-to-panel-compare
+deactivate Proxy
+Background -> Panel: relay all messages
+
+deactivate Background
+
+activate Panel
+  Storage -> Panel: read payload
+  Panel -> Panel: Compare objects
+  Panel ->o]: Display result
+deactivate Panel
+
+=== Search in DevTools Panel ==
+User -> Panel: ^+F\n⌘+F
+
+activate Panel
+  Panel -> Panel: search in DOM
+  Panel ->o]: Display result
+deactivate Panel
+
+@enduml