summaryrefslogtreecommitdiffstats
path: root/devtools/docs/contributor/tools/storage
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/docs/contributor/tools/storage')
-rw-r--r--devtools/docs/contributor/tools/storage/crud-cookie.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/flow-fission-off.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/flow-fission-on.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/legacy.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-off.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-on.svg6
-rw-r--r--devtools/docs/contributor/tools/storage/resources.svg6
7 files changed, 42 insertions, 0 deletions
diff --git a/devtools/docs/contributor/tools/storage/crud-cookie.svg b/devtools/docs/contributor/tools/storage/crud-cookie.svg
new file mode 100644
index 0000000000..5a4671a0df
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/crud-cookie.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1052px" height="527px" viewBox="-0.5 -0.5 1052 527" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-06-09T15:53:37.452Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; version=&quot;14.6.13&quot; etag=&quot;EwVAYTYE5uQF3ssIPhho&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;Dm-Yc-wTLX_n6glO8A4T&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="555" y="0" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 630 60 L 630 525" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="629.5" y="26.5">StorageActorMock</text><text x="629.5" y="47.5">(parent p.)</text></g><rect x="622.5" y="330" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="135" y="0" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 210 60 L 210 525" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="209.5" y="37">StorageUI</text></g><rect x="202.5" y="116.25" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 21 116.25 L 190.32 116.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="15" cy="116.25" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 200.82 116.25 L 190.32 121.5 L 190.32 111 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="43" y="74" width="145" height="41" stroke-width="0"/><text x="113.5" y="88.75">user clicks the</text><text x="113.5" y="108.25">"add cookie" button</text></g><rect x="720" y="0" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 795 60 L 795 525" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="794.5" y="26.5">Cookies</text><text x="794.5" y="47.5">(actor)</text></g><rect x="787.5" y="135" width="15" height="90" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="787.5" y="270" width="15" height="90" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="390" y="0" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 465 60 L 465 495" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="464.5" y="37">CookieWatcher</text></g><rect x="457.5" y="375" width="15" height="106.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="622.5" y="375" width="15" height="46.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 621.75 375 L 483.93 375" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 473.43 375 L 483.93 369.75 L 483.93 380.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 247px; margin-left: 365px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="365" y="247" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="510" y="375" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 260px; margin-left: 341px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="365" y="262" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><rect x="787.5" y="447.75" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 471.75 449.23 L 773.82 450.69" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 784.32 450.74 L 773.8 455.94 L 773.85 445.44 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 297px; margin-left: 419px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="419" y="297" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="202.5" y="462.75" width="15" height="48.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 785.25 495.75 L 228.18 495.52" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 217.68 495.51 L 228.18 490.27 L 228.17 500.77 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 327px; margin-left: 250px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="250" y="327" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g><rect x="570" y="447.75" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 309px; margin-left: 381px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="425" y="311" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><path d="M 216.75 134.25 L 775.32 134.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 785.82 135 L 775.32 140.23 L 775.33 129.73 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 87px; margin-left: 334px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">addItem</div></div></div></foreignObject><text x="334" y="87" fill="#000000" font-family="Helvetica" font-size="9px" text-anchor="middle">addItem</text></switch></g><rect x="622.5" y="165" width="15" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 787.5 164.25 L 648.18 164.94" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 637.68 164.99 L 648.15 159.69 L 648.2 170.19 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 107px; margin-left: 474px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">getWindowFromHost</div></div></div></foreignObject><text x="474" y="107" fill="#000000" font-family="Helvetica" font-size="9px" text-anchor="middle">getWindowFromHost</text></switch></g><path d="M 638.25 194.25 L 784.15 194.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="stroke"/><path d="M 772.32 201 L 785.82 194.25 L 772.32 187.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 127px; margin-left: 476px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">window mock</div></div></div></foreignObject><text x="476" y="127" fill="#000000" font-family="Helvetica" font-size="9px" text-anchor="middle">window mock</text></switch></g><rect x="900" y="0" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 975 60 L 975 525" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="974.5" y="37">Services</text></g><rect x="967.5" y="210" width="15" height="15" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="967.5" y="255" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 801.75 208.53 L 953.07 209.89" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 963.57 209.98 L 953.03 215.14 L 953.12 204.64 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 137px; margin-left: 589px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">cookies.add</div></div></div></foreignObject><text x="589" y="137" fill="#000000" font-family="Helvetica" font-size="9px" text-anchor="middle">cookies.add</text></switch></g><path d="M 966.75 270 L 813.18 270" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 802.68 270 L 813.18 264.75 L 813.18 275.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 177px; margin-left: 590px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 9px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onCookieChanged</div></div></div></foreignObject><text x="590" y="177" fill="#000000" font-family="Helvetica" font-size="9px" text-anchor="middle">onCookieChanged</text></switch></g><path d="M 785.25 330.03 L 650.43 330" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 639.93 330 L 650.43 324.75 L 650.43 335.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 217px; margin-left: 475px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("added")</div></div></div></foreignObject><text x="475" y="217" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("added")</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/flow-fission-off.svg b/devtools/docs/contributor/tools/storage/flow-fission-off.svg
new file mode 100644
index 0000000000..3f1c2475d8
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/flow-fission-off.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1697px" height="932px" viewBox="-0.5 -0.5 1697 932" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="885" y="90" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 960 150 L 960 630" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="959.5" y="116.5">StorageActorMock</text><text x="959.5" y="137.5">(parent p.)</text></g><rect x="120" y="90" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 195 150 L 195 735" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="194.5" y="127">StorageUI</text></g><rect x="187.5" y="195" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 21 195 L 175.32 195" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="15" cy="195" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 185.82 195 L 175.32 200.25 L 175.32 189.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="55" y="173" width="97" height="21" stroke-width="0"/><text x="101.5" y="187">open toolbox</text></g><rect x="375" y="90" width="165" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 457.5 150 L 457.5 465" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="457" y="116.5">Resource</text><text x="457" y="137.5">Command</text></g><rect x="450" y="240" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="450" y="390" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 202.5 209.25 L 610.32 209.24" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620.82 209.24 L 610.32 214.49 L 610.32 203.99 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="15px"><rect fill="#ffffff" stroke="none" x="248" y="188" width="91" height="20" stroke-width="0"/><text x="292" y="201.25">watchTargets</text></g><rect x="202.5" y="240" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 170px; margin-left: 136px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">(we only listen to onAvailable)</div></div></div></foreignObject><text x="205" y="172" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">(we only listen to onAvailable)</text></switch></g><rect x="0" y="0" width="90" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 10px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Fission</b> OFF</div></div></div></foreignObject><text x="30" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Fission OFF</text></switch></g><path d="M 203.25 238.5 L 436.32 239.24" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 446.82 239.27 L 436.31 244.49 L 436.34 233.99 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 156px; margin-left: 190px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">watchResources</div></div></div></foreignObject><text x="190" y="156" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">watchResources</text></switch></g><rect x="555" y="90" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 630 150 L 630 375" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="629.5" y="116.5">Target</text><text x="629.5" y="137.5">Command</text></g><rect x="622.5" y="210" width="15" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 621.75 340.17 L 214.68 340.49" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 204.18 340.5 L 214.67 335.24 L 214.68 345.74 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 224px; margin-left: 275px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetAvailable</div></div></div></foreignObject><text x="275" y="224" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetAvailable</text></switch></g><rect x="622.5" y="340.5" width="15" height="19.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="187.5" y="340.5" width="15" height="19.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="187.5" y="390" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 447.75 390 L 211.68 390" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.18 390 L 211.68 384.75 L 211.68 395.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 257px; margin-left: 216px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onResourceListAvailable</div></div></div></foreignObject><text x="216" y="257" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onResourceListAv...</text></switch></g><rect x="202.5" y="390" width="225" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 270px; margin-left: 136px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">parent storage types: 1 front<br />content storage types: 1 front per target</div></div></div></foreignObject><text x="210" y="272" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">parent storage types: 1 front...</text></switch></g><rect x="1050" y="90" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1125 150 L 1125 720" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1124.5" y="116.5">Cookies</text><text x="1124.5" y="137.5">(actor)</text></g><rect x="1117.5" y="491.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 966.75 491.25 L 1104.57 491.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1115.07 491.25 L 1104.57 496.5 L 1104.57 486 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 325px; margin-left: 695px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onWindowReady</div></div></div></foreignObject><text x="695" y="325" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onWindowReady</text></switch></g><rect x="952.5" y="480" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1117.5 523.5 L 977.68 523.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 967.18 524.02 L 977.66 518.73 L 977.7 529.23 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 346px; margin-left: 694px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("added")</div></div></div></foreignObject><text x="694" y="346" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("added")</text></switch></g><rect x="720" y="90" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 795 150 L 795 705" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="794.5" y="127">CookieWatcher</text></g><rect x="787.5" y="568.5" width="15" height="106.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="952.5" y="568.5" width="15" height="46.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 951.75 568.5 L 813.93 568.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 803.43 568.5 L 813.93 563.25 L 813.93 573.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 376px; margin-left: 585px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="585" y="376" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="840" y="568.5" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 389px; margin-left: 561px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="585" y="391" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><path d="M 696 480 L 940.32 480" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="690" cy="480" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 950.82 480 L 940.32 485.25 L 940.32 474.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="698" y="458" width="136" height="21" stroke-width="0"/><text x="764.5" y="472">new remote target</text></g><rect x="1117.5" y="641.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 801.75 642.73 L 1103.82 644.19" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1114.32 644.24 L 1103.8 649.44 L 1103.85 638.94 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 426px; margin-left: 639px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="639" y="426" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="187.5" y="660" width="15" height="90" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1115.25 689.25 L 213.18 689.96" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 202.68 689.97 L 213.17 684.71 L 213.18 695.21 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 457px; margin-left: 439px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="439" y="457" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g><rect x="900" y="641.25" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 438px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="645" y="440" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><rect x="720" y="45" width="435" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 288px; height: 1px; padding-top: 40px; margin-left: 482px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">Note: IndexedDB does the same things.</div></div></div></foreignObject><text x="482" y="43" fill="#000000" font-family="Helvetica" font-size="10px">Note: IndexedDB does the same things.</text></switch></g><rect x="187.5" y="780" width="480" height="150" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 510px; margin-left: 130px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 110px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Notes:</h1><p></p><ul><li>Storage resources are actually <b>fronts</b>.</li><li><b>Content process resources</b> are: localStorage, sessionStorage and Cache</li><li><b>Parent process resources</b> are: cookies and IndexedDB</li></ul><p></p></div></div></div></foreignObject><text x="130" y="520" fill="#333333" font-family="Helvetica" font-size="10px">Notes:...</text></switch></g><rect x="1380" y="90" width="150" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1455 150 L 1455 720" fill="none" stroke="#d6b656" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1454.5" y="116.5">StorageActorMock</text><text x="1454.5" y="137.5">(content p.)</text></g><rect x="1545" y="90" width="150" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1620 150 L 1620 765" fill="none" stroke="#d6b656" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1619.5" y="116.5">LocalStorage</text><text x="1619.5" y="137.5">(actor)</text></g><rect x="1612.5" y="491.25" width="15" height="63.75" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1461.75 491.25 L 1599.57 491.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1610.07 491.25 L 1599.57 496.5 L 1599.57 486 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 325px; margin-left: 1025px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onWindowReady</div></div></div></foreignObject><text x="1025" y="325" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onWindowReady</text></switch></g><rect x="1447.5" y="480" width="15" height="75" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1612.5 523.5 L 1472.68 523.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1462.18 524.02 L 1472.66 518.73 L 1472.7 529.23 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 346px; margin-left: 1024px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("added")</div></div></div></foreignObject><text x="1024" y="346" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("added")</text></switch></g><rect x="1215" y="90" width="150" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1290 150 L 1290 705" fill="none" stroke="#d6b656" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1289.5" y="116.5">LocalStorage</text><text x="1289.5" y="137.5">Watcher</text></g><rect x="1282.5" y="568.5" width="15" height="106.5" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><rect x="1447.5" y="568.5" width="15" height="46.5" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1446.75 568.5 L 1308.93 568.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1298.43 568.5 L 1308.93 563.25 L 1308.93 573.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 376px; margin-left: 915px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="915" y="376" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="1335" y="568.5" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 389px; margin-left: 891px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="915" y="391" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><rect x="1612.5" y="641.25" width="15" height="93.75" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 1296.75 642.73 L 1598.82 645.54" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1609.32 645.64 L 1598.77 650.79 L 1598.87 640.29 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 426px; margin-left: 969px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="969" y="426" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="1395" y="641.25" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 438px; margin-left: 931px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="975" y="440" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><path d="M 1191 480 L 1435.32 480" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="1185" cy="480" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1445.82 480 L 1435.32 485.25 L 1435.32 474.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="1193" y="458" width="136" height="21" stroke-width="0"/><text x="1259.5" y="472">new remote target</text></g><rect x="1215" y="45" width="435" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 288px; height: 1px; padding-top: 40px; margin-left: 812px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">Note: sessionStorage and Cache do the same things.</div></div></div></foreignObject><text x="812" y="43" fill="#000000" font-family="Helvetica" font-size="10px">Note: sessionStorage and Cache do the same things.</text></switch></g><path d="M 1609.99 718.97 L 214.18 716.99" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 203.68 716.97 L 214.19 711.74 L 214.17 722.24 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 475px; margin-left: 440px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="440" y="475" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/flow-fission-on.svg b/devtools/docs/contributor/tools/storage/flow-fission-on.svg
new file mode 100644
index 0000000000..24cd56aaf1
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/flow-fission-on.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1202px" height="932px" viewBox="-0.5 -0.5 1202 932" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-09-01T14:01:03.647Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_5_2) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; etag=&quot;Vd28oLcwDLHYtGPCu13_&quot; version=&quot;14.6.13&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;kgpKYQtTHZ0yAKxKKP6v&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="885" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 960 165 L 960 735" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="959.5" y="131.5">ParentStorage</text><text x="959.5" y="152.5">Mock</text></g><rect x="120" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 195 165 L 195 750" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="194.5" y="142">StorageUI</text></g><rect x="187.5" y="210" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 21 210 L 175.32 210" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="15" cy="210" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 185.82 210 L 175.32 215.25 L 175.32 204.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="55" y="188" width="97" height="21" stroke-width="0"/><text x="101.5" y="202">open toolbox</text></g><rect x="375" y="105" width="165" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 457.5 165 L 457.5 600" fill="none" stroke="#d6b656" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="457" y="131.5">Resource</text><text x="457" y="152.5">Command</text></g><rect x="450" y="255" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="450" y="405" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="450" y="523.5" width="15" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 202.5 224.25 L 610.32 224.24" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 620.82 224.24 L 610.32 229.49 L 610.32 218.99 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="15px"><rect fill="#ffffff" stroke="none" x="248" y="203" width="91" height="20" stroke-width="0"/><text x="292" y="216.25">watchTargets</text></g><rect x="202.5" y="255" width="210" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 180px; margin-left: 136px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">(we only listen to onAvailable)</div></div></div></foreignObject><text x="205" y="182" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">(we only listen to onAvailable)</text></switch></g><rect x="0" y="0" width="90" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 10px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Fission</b> ON</div></div></div></foreignObject><text x="30" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Fission ON</text></switch></g><path d="M 203.25 253.5 L 436.32 254.24" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 446.82 254.27 L 436.31 259.49 L 436.34 248.99 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 166px; margin-left: 190px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">watchResources</div></div></div></foreignObject><text x="190" y="166" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">watchResources</text></switch></g><rect x="555" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 630 165 L 630 390" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="629.5" y="131.5">Target</text><text x="629.5" y="152.5">Command</text></g><rect x="622.5" y="225" width="15" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 621.75 355.17 L 214.68 355.49" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 204.18 355.5 L 214.67 350.24 L 214.68 360.74 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 234px; margin-left: 275px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetAvailable</div></div></div></foreignObject><text x="275" y="234" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetAvailable</text></switch></g><rect x="622.5" y="355.5" width="15" height="19.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="187.5" y="355.5" width="15" height="19.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="187.5" y="405" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 447.75 405 L 211.68 405" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.18 405 L 211.68 399.75 L 211.68 410.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 267px; margin-left: 216px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onResourceListAvailable</div></div></div></foreignObject><text x="216" y="267" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onResourceListAv...</text></switch></g><rect x="202.5" y="405" width="225" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 280px; margin-left: 136px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">parent storage types: 1 front<br />content storage types: 1 front per target</div></div></div></foreignObject><text x="210" y="282" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">parent storage types: 1 front...</text></switch></g><path d="M 451.5 523.5 L 214.68 523.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 204.18 523.5 L 214.68 518.25 L 214.68 528.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 346px; margin-left: 218px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onResourceListAvailable</div></div></div></foreignObject><text x="218" y="346" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onResourceListAv...</text></switch></g><path d="M 22.5 495 L 444.57 495" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="16.5" cy="495" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 455.07 495 L 444.57 500.25 L 444.57 489.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="26" y="473" width="136" height="21" stroke-width="0"/><text x="92.5" y="487">new remote target</text></g><rect x="187.5" y="523.5" width="15" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><rect x="210" y="520.5" width="225" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 357px; margin-left: 141px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">only content storage types</div></div></div></foreignObject><text x="215" y="359" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">only content storage types</text></switch></g><rect x="1050" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1125 165 L 1125 735" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1124.5" y="131.5">Cookies</text><text x="1124.5" y="152.5">(actor)</text></g><rect x="1117.5" y="506.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 966.75 506.25 L 1104.57 506.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1115.07 506.25 L 1104.57 511.5 L 1104.57 501 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 335px; margin-left: 695px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onWindowReady</div></div></div></foreignObject><text x="695" y="335" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onWindowReady</text></switch></g><rect x="952.5" y="495" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1117.5 538.5 L 977.68 538.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 967.18 539.02 L 977.66 533.73 L 977.7 544.23 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 356px; margin-left: 694px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("added")</div></div></div></foreignObject><text x="694" y="356" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("added")</text></switch></g><rect x="720" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 795 165 L 795 720" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="794.5" y="142">CookieWatcher</text></g><rect x="787.5" y="583.5" width="15" height="106.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="952.5" y="583.5" width="15" height="46.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 951.75 583.5 L 813.93 583.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 803.43 583.5 L 813.93 578.25 L 813.93 588.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 386px; margin-left: 585px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="585" y="386" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="840" y="583.5" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 399px; margin-left: 561px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="585" y="401" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><path d="M 696 495 L 940.32 495" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="690" cy="495" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 950.82 495 L 940.32 500.25 L 940.32 489.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="698" y="473" width="136" height="21" stroke-width="0"/><text x="764.5" y="487">new remote target</text></g><rect x="1117.5" y="656.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 801.75 657.73 L 1103.82 659.19" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 1114.32 659.24 L 1103.8 664.44 L 1103.85 653.94 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 436px; margin-left: 639px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="639" y="436" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="187.5" y="675" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1115.25 704.25 L 216.93 706.47" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 206.43 706.5 L 216.91 701.22 L 216.94 711.72 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 467px; margin-left: 440px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="440" y="467" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g><rect x="900" y="656.25" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 448px; margin-left: 601px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="645" y="450" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><rect x="720" y="60" width="435" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 288px; height: 1px; padding-top: 50px; margin-left: 482px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">Note: IndexedDB does the same things</div></div></div></foreignObject><text x="482" y="53" fill="#000000" font-family="Helvetica" font-size="10px">Note: IndexedDB does the same things</text></switch></g><rect x="187.5" y="780" width="480" height="150" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 510px; margin-left: 130px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 110px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Notes:</h1><p></p><ul><li>Storage resources are actually <b>fronts</b>.</li><li><b>Content process resources</b> are: localStorage, sessionStorage and Cache</li><li><b>Parent process resources</b> are: cookies and IndexedDB</li></ul><p></p></div></div></div></foreignObject><text x="130" y="520" fill="#333333" font-family="Helvetica" font-size="10px">Notes:...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/legacy.svg b/devtools/docs/contributor/tools/storage/legacy.svg
new file mode 100644
index 0000000000..99df5ee72c
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/legacy.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="722px" height="564px" viewBox="-0.5 -0.5 722 564" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-06-09T15:02:41.953Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; version=&quot;14.6.13&quot; etag=&quot;5bLNuVU7haQv3XDUxh68&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;8hjxK8QrEu9bYOSHH7Pt&quot;&gt;zVpLc9o6FP41XjaD5EdgGSBtF+1MZ+jMvVkqtsCaCIuRnQL99ZWw/JBEbAM2cTaxjo8e/s53HpJw3MX28I2jXfyTRZg6cBIdHHfpQAjAJBD/pOSYS2bQywUbTiKlVAlW5C9WwomSvpMIp5pixhjNyE4XhixJcJhpMsQ52+tqa0b1WXdogy3BKkTUlv5HoizOpVP4WMm/Y7KJi5lBMMvfbFGhrL4kjVHE9jWR++y4C85Ylj9tDwtMJXgFLnm/rx+8LRfGcZJ16QDzDn8QfVffptaVHYuP5ew9ibDUnzjufB+TDK92KJRv98K8QhZnWypaQDyuCaULRhkX7YQlQmkeoTQ+dZfv1XSYZ/jw4ZJBCYRgEGZbnPGjUCk6uAo7RZ4Sy31lCjhRsrhmBjhVQqTMvynHrhASDwqk84C57YDhJHqSJKsgqAPEkkwReiqa+ECy/9Ur+fwiYX7wVWt5UKifGseikYg1l51ko9ZLNqtup1bRTzdkvmwcGUxP2TsPlUiRNkN8gxWG087WqlnDP2OMQsYxRRn5oy/inIHUDL8YEROXZHAnOhn8wLBx/j2qV90RzIF8YyBgDJSjYA0kLI2ONbWdVEgbFgz1ebzAb16XqQ80ffGQr6Aib2mDTnz2Pp/POi+vZXcHPvs2n4Ox8dkwtxWzOvPZGMh9vA+f4YV8dnvms2/xmTKRuFcZ4zKp35Tc+khejwZcvp28ADzDL7eH3BVY2KQ4TQlLxopOGd3vgc6jhc4ChfEIQbknZaYWKER8/AFHy/nogPHuyZaZBUzI2BvB6fhguSdfiqqphstTKKLL56PS7kTToTABFiYWHLUa61UkrLdTeVPsfEGQN78SOccJsBo4AxZMKiTWC6YCx8sqJlCU5TeWR2JJD75mSDi7skACZiGiCpe2AumKmgR02GU3FtmliSeXmdiorFVtXjx3qc07kOTMLtG/hiMDVtXA2Nx5ZjHclTTBzBgIGgP1VFVbC26pqk19owq/uaoGtx57XMvgD/g35i2caYtih3Mx2cqEZFbDA0SoW48BBrTv2I6cLN/szb7+cPa1t8Vj2fO55vbGU2ttK1e9Pkoze0vcxPuQIrFfDoc70e3He9pKuLGlZ9czste1NZ1rpGeLIz16lH1ckOYedX6/I430A71iqpMHUbJJJLOEJTAXAulLJET0Sb3YkiiSY8w5Tslf9HoaT9pelRBicH/u+EudiECOTeV0c8YjzI0rmVQ4NEk2v5lw5yUsVVH4tjm5f6HuQHd9+mtydXXJppbmlNcxGr2CxhjwZfIANcOBXng11cYM9O5svU7xzSywz0cuzJufdv+j7yc7RJKpHUlGF0jMo49rA4ln3rp0DCQ33waBy07Pe6/zzxxrxYRGp5j2izHaxO7awYViFjDILui1Ul0Zz2K2YQmiz5W0PRxmMmRZka7c2Zae81J3nJacWznOS/1dX7eo4My1E7y0ShIR0g982I+XGHVnYJK7q5f4XstAPXmJZ9z4g9mkcV2wWV/3kqp3r5mhcNSBDv1MD7Ac57xLgKtcAtzDJT73YNHMHIF5/d/ZJ9yWgQbyicIXP1xXo/qliUM0q98o5erVL73c538=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="180" y="55.5" width="300" height="420" fill="none" stroke="#000000" stroke-width="1.5" stroke-dasharray="4.5 4.5" pointer-events="all"/><path d="M 420 423 L 465 423 L 465 348 L 420 348" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 420 123 L 465 123 L 465 198 L 420 198" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><rect x="240" y="100.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 82px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">localStorage</div></div></div></foreignObject><text x="220" y="86" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">localStorage</text></switch></g><rect x="240" y="175.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 132px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">sessionStorage</div></div></div></foreignObject><text x="220" y="136" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">sessionStorage</text></switch></g><rect x="240" y="250.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 182px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Cache</div></div></div></foreignObject><text x="220" y="186" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Cache</text></switch></g><rect x="240" y="325.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 232px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">indexedDB</div></div></div></foreignObject><text x="220" y="236" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">indexedDB</text></switch></g><rect x="240" y="400.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 282px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">cookies</div></div></div></foreignObject><text x="220" y="286" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">cookies</text></switch></g><rect x="0" y="250.5" width="120" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 182px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Actor</div></div></div></foreignObject><text x="40" y="186" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Actor</text></switch></g><path d="M 240 273 L 147.18 273" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.68 273 L 147.18 260.25 L 147.18 285.75 Z" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><path d="M 240 423 L 210 423 L 210 123 L 240 123" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 210 198 L 240 198" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 210 348 L 240 348" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><rect x="540" y="243" width="180" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 182px; margin-left: 361px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Storage</div></div></div></foreignObject><text x="420" y="186" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Storage</text></switch></g><path d="M 420 273 L 530.45 273" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 538.32 273 L 527.82 278.25 L 530.45 273 L 527.82 267.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 189px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">storageActor</div></div></div></foreignObject><text x="321" y="192" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">storageActor</text></switch></g><path d="M 420 348 L 465 348 L 465 123 L 420 123" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 630 243 L 630 10.5 L 330 10.5 L 330 43.32" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 330 53.82 L 324.75 43.32 L 335.25 43.32 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 85px; margin-left: 420px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">childActorPool</div></div></div></foreignObject><text x="420" y="96" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">childActorPool</text></switch></g><path d="M 630 303 L 630 535.5 L 60 535.5 L 60 322.68" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 60 297.18 L 72.75 322.68 L 47.25 322.68 Z" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-off.svg b/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-off.svg
new file mode 100644
index 0000000000..6899f5d8b4
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-off.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1082px" height="902px" viewBox="-0.5 -0.5 1082 902" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-06-09T15:36:10.658Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; version=&quot;14.6.13&quot; etag=&quot;y1Qj4akUHhTtIlbDpFi7&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;P-9pQ54hQDAgbKCWHi1S&quot;&gt;7Vxbc5s4FP41nrYP9QDiYj8mTrPb2d5m0053HwnIhq2MvCAn8f76PRLiJskxdiFpkzoziXUQQpz7+Thkghbru9/ycJO8pzEmE8eK7yboYuI4tm358IdTdiVl7rglYZWnsZzUEK7S/7AkWpK6TWNcdCYySglLN11iRLMMR6xDC/Oc3nanLSnpXnUTrrBGuIpColO/pjFLqvvy582B33G6SuSlZ05QHliH1WR5J0USxvS2RUJvJmiRU8rKb+u7BSaceRVfyvMu9xytN5bjjPU5wSlPuAnJVt7bFaM5bP8sgr/vafRt4oCwEHAenb+U68IFpq/k/tmuYgrcyoZ/3a7Ju3SJSZrB6HyD83SNGc7hCJHkTw3tHETEQqDx47YYExJuivRaLMuvmuNomxfpDf4TF6UmCCrdZjGO5ahmoxiwnH6rBcMXlTeJc4bv9jLKrtkPeospbDDfwRR5QmBJie1qJS7Hty0FqOYkLdk7c0kMpdKt6rUbucAXKRqzmNA+MX15+8zkYM9PlAMKBpCDq8kBmEG3eYRbZrKg63WYxc9MMMjvIRh7LMF4mmBAIASucH4NX1b8y2VaFCnNKjqsWB+CMz9+0OQFvOAHE7Ymkk0l4xaU0FxMQb74wJFlSkiLvvT4D9BDkq4yoEXARSFOzuMUIsmZPLBO45hf8Pw2SRm+2oQRv/otxE1NhkvQBBkLZ3LYumT5GcfIXF2UvsnVDSBIXxPk5zBfYfbs7cudPabjCwz2pbB/Q9OMiUt45xPvQmE9zVlCVzQLSZv5D81EB3kdJtYq22HiOJo901i4oPRbCnlsK8MKedr13HKrmf2YudX8aaj2zFNU2wqmXi/ldp1q4vewsVq5xUeafU0zuO0LzO94h3WX3YqtamC8pozRNRzAWXzGazZOI7wg6URCYTbAonz3F4xeW1PLqwh/S3aLwcVdZ7Rrj1piK4l3KeOrWdO5J4diraldDZvV+GDXGqhrlbeMY6WglEmjVPeSxspA11bKHuJvCbeKEDkmIQOj7lzRJFu52ieu3q1SJ7AUTULdJcrNy7PaxaWy0Mw7sFB5x9pCQtXqW+ynffbTsOLAVa24X4DyBnCEtg4GbDdxyPBLiFD/bjkkcR5jApyJG4Ieq4a2aWs684OOTU+9WXCKXe+xxbbd2f0lNrzhaS68cgPHGl6gLTQbzfB0aKJMa76GLEqA9c8rlfFOhScGSWVsHZ/4Ub0gupeNihe03XkvLxjcY3K9eWiCEn5MHh4XSbx+PERD8FCv4mnGEUtcfBER5QGCxny4PLDOKqtEcJQs0DNEI/cRo9FeBTo2GvkumvqBVX9sddkpUuqPAcOTDlywJAeNIoZq5BDgl1ERq9pYnySNCPMN4Ap8NaE3uAJvJNTD1mGPLLxJVyYnsNfyC1AIVtk+haXM3kBMa7Gul5PVjLI/X8EvuM7MH8TaPK3oUpjfO/fbV0EcMK5moWoiXS4L/N0G+EThFfTA8Iqjwyt4nbJWaVak2Yrg1wUPs6+3Msw+XJkGxmB3qzTLPalK24u++PNglMDrGgLvY+IvvgKbIPtEVzBzDyw0XJx1ngj+oj4gQHZfM0fDmLmOwcjMeeTEuUl17a7VBR462uraaXjXJ/iBMyBy0zHjuW7GR8h/hPzZ6Vqfpz6H62vGjuIPvBHNWEdzeIILrL+RjT8c0bG2Zl38IfNnEl5jch5G31ZiWvshvfgMVG0rj7DM6cF8pCTb0JfygYKA0BkQ3wJv7nB8wbscYsofN1os4TItwjUWA0gciukI0iR4yb5Plj2Ep3qyAYSpgngzHcMbT5T7O1kSu+pX4cIthHTrXpbmYEXcqASYpdG2RKWQtKLIFjPhCUtfxXUHuMh/R2wbEsKZpjXaLHPK47yhz2baIjbX0a+sLbmAFaUDyinso+huytjRwzcqDABCXkjqm1lwLceiFai5QdFOYi3CiBvGaVv8VPdGHr/DqGoEkBtpmew9mwGiLr4DUj/Sxvu0OBVgwOBBgNoafaYbnk041h4zp2CgSyJSkgTcAc76mn7ldRSrV1zOiL1RaoboGRB+5Bi8g60W4ie5Bx1Z1TSxapiyituURdy7m/XPD9dcFNl1wf98vLwcRT1+zg44KMI6UjZ0wM29kSKADln+QswMabGLBkLMPOeHQswMjWI0K2364RpprOlMmNJQjTR2p6Z0Z8fXlHt0r10COoYSMOitosNXgK6Cv2juob+GHlhowArwieC1e436EFo7xNsaOlb7JHhYdxI/BA+fKqBoKCbH6jhGJjCxjCRnN2EKGTYZHVC0phZCHefvnOD867hkV8u1HjP4QzaDteNJZcfteIIeE1JEykNCV2376xtQkAJXueNBikiHFHVA4w/MGVbZ8/24xn2QhQknKOoqn+02oshOoMrmmm+JbkbxTpCV8l8lLsbfqbMikpYLgf6T65C/B2ktKQc/J76l52O+1RfbMOAE+g5jmr1gYqc3Ap5olBB2weEViWNQrmZ8RoZ5UmgxTiiwABFgT2W35oS/qyMx26LvNj/g24mAeWjeoD5RjkPR/SlZAQ4hmYjXbCXXS/hi0+cWXwKzU77Ibdko+KIo9yyG5ZZByxLKF0wLKQgcv+JnJJhLS1ZFIL/7b+oXTvIYOIkXnIqToCFCn46I11qp6qKA4OzGsiScklfa0Kj3oTOt8vFIZao/w+ORIVIc5c1P1/RS1Vj9RVV61eIzj+lXctgkgW8aqsKRZs47KsyRi+YfzNhO8incgl/tCK7JbtoPS6sj5rzG/KDi/gTE0JpQ0XrIp3e20ZvZJvTxJ0zKXTX96fka4CCFzRN9lbIvDwcxehNEVr2J/y4tHqC8qQuSwUAyrfViDIissuCOR3lMjAxZe0zx6JJmdmChk0saGDb/kKWc3vxbG/Tmfw==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="765" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 840 165 L 840 540" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="839.5" y="131.5">StorageActorMock</text><text x="839.5" y="152.5">(parent p.)</text></g><rect x="0" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 75 165 L 75 660" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="74.5" y="142">StorageUI</text></g><rect x="255" y="105" width="165" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 337.5 165 L 337.5 660" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="337" y="131.5">Resource</text><text x="337" y="152.5">Command</text></g><rect x="0" y="0" width="90" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 10px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Fission</b> ON</div></div></div></foreignObject><text x="30" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Fission ON</text></switch></g><rect x="435" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 510 165 L 510 660" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="509.5" y="131.5">Target</text><text x="509.5" y="152.5">Command</text></g><rect x="67.5" y="270" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="930" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1005 165 L 1005 540" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1004.5" y="131.5">Cookies</text><text x="1004.5" y="152.5">(actor)</text></g><rect x="997.5" y="251.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 846.75 251.25 L 984.57 251.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 995.07 251.25 L 984.57 256.5 L 984.57 246 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 165px; margin-left: 615px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onWindowDestroyed</div></div></div></foreignObject><text x="615" y="165" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onWindowDestroyed</text></switch></g><rect x="832.5" y="240" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 997.5 283.5 L 857.68 283.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 847.18 284.02 L 857.66 278.73 L 857.7 289.23 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 186px; margin-left: 614px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("deleted")</div></div></div></foreignObject><text x="614" y="186" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("deleted")</text></switch></g><rect x="600" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 675 165 L 675 540" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="674.5" y="142">CookieWatcher</text></g><rect x="667.5" y="328.5" width="15" height="106.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="832.5" y="328.5" width="15" height="46.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 831.75 328.5 L 693.93 328.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 683.43 328.5 L 693.93 323.25 L 693.93 333.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 216px; margin-left: 505px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="505" y="216" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="720" y="328.5" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 229px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="505" y="231" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><path d="M 576 240 L 820.32 240" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="570" cy="240" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 830.82 240 L 820.32 245.25 L 820.32 234.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="614" y="218" width="65" height="21" stroke-width="0"/><text x="644.5" y="232">navigate</text></g><rect x="997.5" y="401.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 681.75 402.73 L 983.82 404.19" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 994.32 404.24 L 983.8 409.44 L 983.85 398.94 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 266px; margin-left: 559px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="559" y="266" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="67.5" y="416.25" width="15" height="48.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 995.25 449.25 L 93.18 449.01" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 82.68 449.01 L 93.18 443.76 L 93.18 454.26 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 296px; margin-left: 359px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="359" y="296" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g><rect x="780" y="401.25" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 278px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="565" y="280" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><rect x="600" y="60" width="435" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 288px; height: 1px; padding-top: 50px; margin-left: 402px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">Note: IndexedDB does the same things.</div></div></div></foreignObject><text x="402" y="53" fill="#000000" font-family="Helvetica" font-size="10px">Note: IndexedDB does the same things.</text></switch></g><rect x="67.5" y="705" width="480" height="150" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 460px; margin-left: 50px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 110px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Notes:</h1><p></p><ul><li>Storage resources are actually <b>fronts</b>.</li><li><b>Content process resources</b> are: localStorage, sessionStorage and Cache</li><li><b>Parent process resources</b> are: cookies and IndexedDB</li></ul><p></p></div></div></div></foreignObject><text x="50" y="470" fill="#333333" font-family="Helvetica" font-size="10px">Notes:...</text></switch></g><rect x="112.5" y="0" width="142.5" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 93px; height: 1px; padding-top: 10px; margin-left: 76px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Target switching</b> OFF</div></div></div></foreignObject><text x="123" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Target switching OFF</text></switch></g><path d="M 366 240 L 490.32 240" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="360" cy="240" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 500.82 240 L 490.32 245.25 L 490.32 234.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="369" y="218" width="65" height="21" stroke-width="0"/><text x="400" y="232">navigate</text></g><path d="M 504 268.98 L 92.17 269.97" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81.67 270 L 92.16 264.72 L 92.18 275.22 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 177px; margin-left: 195px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetDestroyed</div></div></div></foreignObject><text x="195" y="177" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetDestroyed</text></switch></g><rect x="502.5" y="240" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="502.5" y="495" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="67.5" y="510" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 502.99 511.98 L 95.17 512.01" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 84.67 512.01 L 95.17 506.76 L 95.17 517.26 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 338px; margin-left: 195px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetAvailable</div></div></div></foreignObject><text x="195" y="338" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetAvailable</text></switch></g><rect x="577.5" y="705" width="480" height="195" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 460px; margin-left: 390px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 140px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Key points:</h1><ul><li>Content process storage types handle deletion in the UI client callback for `onTargetDestroyed`.</li><li>Parent process storage types don't have a target front, so we need to send `delete` updates.</li><li>New actors are created for both content and parent process storage types (their watcher's `watch` method is called) when navigation.</li></ul><p></p></div></div></div></foreignObject><text x="390" y="470" fill="#333333" font-family="Helvetica" font-size="10px">Key points:...</text></switch></g><rect x="105" y="570" width="225" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 148px; height: 1px; padding-top: 390px; margin-left: 71px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">parent storage types: 1 front<br />content storage types: 1 front per target</div></div></div></foreignObject><text x="145" y="392" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">parent storage types: 1 front...</text></switch></g><rect x="330" y="570" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="67.5" y="570" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 327.75 570 L 94.68 570" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 84.18 570 L 94.68 564.75 L 94.68 575.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 377px; margin-left: 137px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onResourceListAvailable</div></div></div></foreignObject><text x="137" y="377" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onResourceListAv...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-on.svg b/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-on.svg
new file mode 100644
index 0000000000..be0381741d
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/navigation-fission-on-target-switching-on.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1082px" height="1127px" viewBox="-0.5 -0.5 1082 1127" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="765" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 840 165 L 840 480" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="839.5" y="131.5">StorageActorMock</text><text x="839.5" y="152.5">(parent p.)</text></g><rect x="0" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 75 165 L 75 780" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="74.5" y="142">StorageUI</text></g><rect x="195" y="105" width="165" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 277.5 165 L 277.5 780" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="277" y="131.5">Resource</text><text x="277" y="152.5">Command</text></g><rect x="0" y="0" width="90" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 10px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Fission</b> ON</div></div></div></foreignObject><text x="30" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Fission ON</text></switch></g><rect x="390" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 465 165 L 465 660" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="464.5" y="131.5">Target</text><text x="464.5" y="152.5">Command</text></g><rect x="67.5" y="270" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="930" y="105" width="150" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 1005 165 L 1005 480" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="1004.5" y="131.5">Cookies</text><text x="1004.5" y="152.5">(actor)</text></g><rect x="997.5" y="251.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 846.75 251.25 L 984.57 251.25" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 995.07 251.25 L 984.57 256.5 L 984.57 246 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 165px; margin-left: 615px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onWindowDestroyed</div></div></div></foreignObject><text x="615" y="165" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onWindowDestroyed</text></switch></g><rect x="832.5" y="240" width="15" height="75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 997.5 283.5 L 857.68 283.98" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 847.18 284.02 L 857.66 278.73 L 857.7 289.23 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 186px; margin-left: 614px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">update("deleted")</div></div></div></foreignObject><text x="614" y="186" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">update("deleted")</text></switch></g><rect x="600" y="105" width="150" height="60" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><path d="M 675 165 L 675 600" fill="none" stroke="#d6b656" stroke-width="1.5" stroke-miterlimit="10" stroke-dasharray="4.5 4.5" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="18px"><text x="674.5" y="142">CookieWatcher</text></g><rect x="667.5" y="328.5" width="15" height="106.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="667.5" y="493.5" width="15" height="61.5" fill="#fff2cc" stroke="#d6b656" stroke-width="1.5" pointer-events="all"/><rect x="832.5" y="328.5" width="15" height="46.5" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 831.75 328.5 L 693.93 328.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 683.43 328.5 L 693.93 323.25 L 693.93 333.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 216px; margin-left: 505px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoresUpdate</div></div></div></foreignObject><text x="505" y="216" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoresUpdate</text></switch></g><rect x="720" y="328.5" width="75" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 229px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">throttled</div></div></div></foreignObject><text x="505" y="231" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">throttled</text></switch></g><path d="M 576 240 L 820.32 240" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="570" cy="240" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 830.82 240 L 820.32 245.25 L 820.32 234.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="614" y="218" width="65" height="21" stroke-width="0"/><text x="644.5" y="232">navigate</text></g><rect x="997.5" y="401.25" width="15" height="63.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 681.75 402.73 L 983.82 404.19" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 994.32 404.24 L 983.8 409.44 L 983.85 398.94 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 266px; margin-left: 559px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">emit("single-store-update")</div></div></div></foreignObject><text x="559" y="266" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">emit("single-sto...</text></switch></g><rect x="67.5" y="416.25" width="15" height="48.75" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 995.25 449.25 L 93.18 449.01" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 82.68 449.01 L 93.18 443.76 L 93.18 454.26 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 296px; margin-left: 359px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onStoreUpdate</div></div></div></foreignObject><text x="359" y="296" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onStoreUpdate</text></switch></g><rect x="780" y="401.25" width="135" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 278px; margin-left: 521px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">one event per update</div></div></div></foreignObject><text x="565" y="280" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">one event per update</text></switch></g><rect x="600" y="60" width="435" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 288px; height: 1px; padding-top: 50px; margin-left: 402px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: normal; word-wrap: normal; ">Note: IndexedDB does the same things.</div></div></div></foreignObject><text x="402" y="53" fill="#000000" font-family="Helvetica" font-size="10px">Note: IndexedDB does the same things.</text></switch></g><rect x="67.5" y="855" width="480" height="150" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 560px; margin-left: 50px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 110px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Notes:</h1><p></p><ul><li>Storage resources are actually <b>fronts</b>.</li><li><b>Content process resources</b> are: localStorage, sessionStorage and Cache</li><li><b>Parent process resources</b> are: cookies and IndexedDB</li></ul><p></p></div></div></div></foreignObject><text x="50" y="570" fill="#333333" font-family="Helvetica" font-size="10px">Notes:...</text></switch></g><rect x="112.5" y="0" width="142.5" height="30" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 93px; height: 1px; padding-top: 10px; margin-left: 76px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><b>Target switching</b> ON</div></div></div></foreignObject><text x="123" y="12" fill="#333333" font-family="Helvetica" font-size="8px" text-anchor="middle">Target switching ON</text></switch></g><path d="M 321 240 L 445.32 240" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="315" cy="240" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 455.82 240 L 445.32 245.25 L 445.32 234.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="16.5px"><rect fill="#ffffff" stroke="none" x="324" y="218" width="65" height="21" stroke-width="0"/><text x="355" y="232">navigate</text></g><path d="M 459 268.98 L 92.17 269.97" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81.67 270 L 92.16 264.72 L 92.19 275.22 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 177px; margin-left: 180px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetDestroyed</div></div></div></foreignObject><text x="180" y="177" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetDestroyed</text></switch></g><rect x="457.5" y="240" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="457.5" y="630" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="67.5" y="645" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 457.99 646.98 L 95.17 647.01" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 84.67 647.01 L 95.17 641.76 L 95.17 652.26 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 428px; margin-left: 180px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onTargetAvailable</div></div></div></foreignObject><text x="180" y="428" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onTargetAvailable</text></switch></g><rect x="577.5" y="855" width="480" height="270" fill="#f5f5f5" stroke="#666666" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 312px; height: 1px; padding-top: 560px; margin-left: 390px;"><div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 190px; overflow: hidden; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #333333; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; "><h1>Key points:</h1><ul><li>Content process storage types handle deletion in the UI client callback for `onTargetDestroyed`.</li><li>Parent process storage types don't have a target front, so we need to send `delete` updates.</li><li>New actors are created for content process storage types (their watcher's `watch` method is called) when navigation.</li><li>New actors are created for parent process storage types after observing the event `window-global-created`. We delay sending these as resources until `target-available-form` has been triggered and the client has then processed onTargetAvailable.</li></ul><p></p></div></div></div></foreignObject><text x="390" y="570" fill="#333333" font-family="Helvetica" font-size="10px">Key points:...</text></switch></g><rect x="88.5" y="714" width="172.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 113px; height: 1px; padding-top: 486px; margin-left: 60px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">parent storage types: 1 front<br />content storage types: 1 front per target</div></div></div></foreignObject><text x="117" y="488" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">parent storage types: 1 fron...</text></switch></g><rect x="270" y="705" width="15" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><rect x="67.5" y="705" width="15" height="30" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 267.75 705 L 94.68 705" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 84.18 705 L 94.68 699.75 L 94.68 710.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 467px; margin-left: 117px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 10px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">onResourceListAvailable</div></div></div></foreignObject><text x="117" y="467" fill="#000000" font-family="Helvetica" font-size="10px" text-anchor="middle">onResourceListAv...</text></switch></g><path d="M 501 495 L 655.32 495" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="495" cy="495" rx="6" ry="6" fill="#000000" stroke="#000000" stroke-width="1.5" pointer-events="all"/><path d="M 665.82 495 L 655.32 500.25 L 655.32 489.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g fill="#000000" font-family="Helvetica" text-anchor="middle" font-size="13.5px"><rect fill="#ffffff" stroke="none" x="503" y="477" width="137" height="17" stroke-width="0"/><text x="569.5" y="487">window-global-created</text></g><rect x="697.5" y="525" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 360px; margin-left: 466px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">schedule spawning a new actor as a resource and send onAvailable after onTargetAvailable has been sent</div></div></div></foreignObject><text x="505" y="362" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">schedule spawning a...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file
diff --git a/devtools/docs/contributor/tools/storage/resources.svg b/devtools/docs/contributor/tools/storage/resources.svg
new file mode 100644
index 0000000000..5be2517e08
--- /dev/null
+++ b/devtools/docs/contributor/tools/storage/resources.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1142px" height="429px" viewBox="-0.5 -0.5 1142 429" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2021-06-09T15:08:00.737Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36&quot; version=&quot;14.6.13&quot; etag=&quot;Z0MbjdkrAFKkCsY56XtO&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;xBC6-tSpt6A_KGkmK59l&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 375 363 L 420 363 L 420 288 L 375 288" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 375 63 L 420 63 L 420 213 L 375 213" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><rect x="195" y="40.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 42px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">localStorage</div></div></div></foreignObject><text x="190" y="46" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">localStorage</text></switch></g><rect x="195" y="115.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 92px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">sessionStorage</div></div></div></foreignObject><text x="190" y="96" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">sessionStorage</text></switch></g><rect x="195" y="190.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 142px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Cache</div></div></div></foreignObject><text x="190" y="146" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Cache</text></switch></g><rect x="195" y="265.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 192px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">indexedDB</div></div></div></foreignObject><text x="190" y="196" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">indexedDB</text></switch></g><rect x="195" y="340.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 242px; margin-left: 131px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">cookies</div></div></div></foreignObject><text x="190" y="246" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">cookies</text></switch></g><rect x="0" y="190.5" width="120" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 142px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Actor</div></div></div></foreignObject><text x="40" y="146" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">Actor</text></switch></g><path d="M 195 213 L 147.18 213" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.68 213 L 147.18 200.25 L 147.18 225.75 Z" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><path d="M 195 363 L 165 363 L 165 63 L 195 63" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 165 138 L 195 138" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 165 288 L 195 288" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><rect x="480" y="108" width="180" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 92px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">StorageActorMock<br />(content process)</div></div></div></foreignObject><text x="380" y="96" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">StorageActorMock...</text></switch></g><rect x="480" y="295.5" width="180" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 217px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">StorageActorMock<br />(parent process)</div></div></div></foreignObject><text x="380" y="221" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">StorageActorMock...</text></switch></g><rect x="491.25" y="168" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 122px; margin-left: 329px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">In legacy, an actual Storage actor is used</div></div></div></foreignObject><text x="380" y="124" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">In legacy, an actual Stora...</text></switch></g><path d="M 375 138 L 470.45 138" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 478.32 138 L 467.82 143.25 L 470.45 138 L 467.82 132.75 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 101px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">storageActor</div></div></div></foreignObject><text x="281" y="103" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">storageActor</text></switch></g><path d="M 375 288 L 420 288 L 420 325.5 L 470.45 325.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 478.32 325.5 L 467.82 330.75 L 470.45 325.5 L 467.82 320.25 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 228px; margin-left: 281px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">storageActor</div></div></div></foreignObject><text x="281" y="230" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">storageActor</text></switch></g><rect x="960" y="108" width="180" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 92px; margin-left: 641px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">ContentProcessStorage<br style="font-size: 11px" />(watcher)</div></div></div></foreignObject><text x="700" y="95" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">ContentProcessStorage...</text></switch></g><rect x="960" y="295.5" width="180" height="60" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 217px; margin-left: 641px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">ParentProcessStorage<br style="font-size: 11px" />(watcher)</div></div></div></foreignObject><text x="700" y="220" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">ParentProcessStorage...</text></switch></g><rect x="720" y="115.5" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 92px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">LocalStorageWatcher</div></div></div></foreignObject><text x="540" y="95" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">LocalStorageWatcher</text></switch></g><rect x="720" y="303" width="180" height="45" fill="#ffffff" stroke="#000000" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 217px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">CookieWatcher</div></div></div></foreignObject><text x="540" y="220" fill="#000000" font-family="Helvetica" font-size="11px" text-anchor="middle">CookieWatcher</text></switch></g><path d="M 900 325.5 L 932.82 325.5" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 958.32 325.5 L 932.82 338.25 L 932.82 312.75 Z" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><path d="M 900 137.63 L 932.82 137.63" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 958.32 137.63 L 932.82 150.38 L 932.82 124.88 Z" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><path d="M 810 115.5 L 810 10.5 L 285 10.5 L 285 30.95" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 285 38.82 L 279.75 28.32 L 285 30.95 L 290.25 28.32 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 46px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">actor</div></div></div></foreignObject><text x="541" y="48" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">actor</text></switch></g><rect x="491.25" y="355.5" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 247px; margin-left: 329px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">In legacy, an actual Storage actor is used</div></div></div></foreignObject><text x="380" y="249" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">In legacy, an actual Stora...</text></switch></g><path d="M 810 348 L 810 415.5 L 285 415.5 L 285 395.05" fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 285 387.18 L 290.25 397.68 L 285 395.05 L 279.75 397.68 Z" fill="#000000" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 253px; margin-left: 541px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">actor</div></div></div></foreignObject><text x="541" y="255" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">actor</text></switch></g><rect x="731.25" y="168" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 122px; margin-left: 489px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">SessionStorageWatcher and CacheWatcher also exist</div></div></div></foreignObject><text x="540" y="124" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">SessionStorageWatcher and...</text></switch></g><rect x="731.25" y="265.5" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 187px; margin-left: 489px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">IndexedDBWatcher also exists</div></div></div></foreignObject><text x="540" y="189" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">IndexedDBWatcher also exis...</text></switch></g><rect x="971.25" y="355.5" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 247px; margin-left: 649px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">This watcher emits fronts as resources</div></div></div></foreignObject><text x="700" y="249" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">This watcher emits fronts...</text></switch></g><rect x="971.25" y="168" width="157.5" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 103px; height: 1px; padding-top: 122px; margin-left: 649px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 8px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">This watcher emits fronts as resources</div></div></div></foreignObject><text x="700" y="124" fill="#000000" font-family="Helvetica" font-size="8px" text-anchor="middle">This watcher emits fronts...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> \ No newline at end of file