profile-viewer 0.0.0

data/dist/docs/guide-startup-shutdown.md

@@ -0,0 +1,108 @@
+# Profiling Firefox Startup & Shutdown
+
+## Startup
+
+Before starting, make sure the profiler's popup is already present. Otherwise
+please go to https://profiler.firefox.com to add it first to your Firefox.
+
+1. Start your Firefox with the environment variable `MOZ_PROFILER_STARTUP=1` set. This way, the profiler is started as early as possible during startup.
+
+2. Then capture the profile using the popup, as usual.
+
+Startup profiling does not use the settings that you configured in the `about:profiling`. It uses settings that can be configured with the environment variables `MOZ_PROFILER_STARTUP_ENTRIES`, `MOZ_PROFILER_STARTUP_INTERVAL`, and more:
+
+* If it looks like the buffer is not large enough, you can tweak the buffer size with the env var `MOZ_PROFILER_STARTUP_ENTRIES`. This defaults to 1000000, which is 9MB. If you want 90MB, use 10000000, and for 180MB, use 20000000, which are good values to debug long startups.
+
+* If you'd like a coarser resolution, you can also choose a different interval using `MOZ_PROFILER_STARTUP_INTERVAL`, which defaults to 1 (unit is millisecond). You can't go below 1 ms, but you can use e.g. 10 ms.
+
+* More environment variables are available to control the profiler settings. They can be listed by setting `MOZ_PROFILER_HELP=1` and running Firefox from a command line inside a terminal; Firefox will exit immediately, and display all accepted variables in the terminal.
+
+## Shutdown
+
+1. Start your Firefox with the environment variable `MOZ_PROFILER_SHUTDOWN=<filename>` set, where `<filename>` is the name of the file where the recorded profile should be saved.
+
+2. Start the profiler using the popup, then close Firefox.
+
+3. The file you specified will contain the recorded profile. Load it through the [profiler.firefox.com](https://profiler.firefox.com) interface by either drag and drop or the file upload interface.
+
+For startup profiling, similar to [startup profiling on Desktop](https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler#Profiling_Firefox_Startup), you will need to manually set some `MOZ_PROFILER_STARTUP*` environment variables. The way to do this varies based on the app you want to profile (more details below). Once the app has been started with these environment variables, the profiler will be running. Then you can connect to the app using `about:debugging` as usual, and capture the profile with the regular UI.
+
+
+## Firefox for Android
+
+First, you'll need to use [the general information about profiling on Android](./guide-remote-profiling.md).
+Then you can follow the additional instructions below.
+
+### Startup profiling GeckoView-example (and Fennec)
+
+If you have compiled GeckoView-example locally, you can launch it with `./mach run` and specify environment variables as follows:
+
+```bash
+./mach run --setenv MOZ_PROFILER_STARTUP=1 \
+           --setenv MOZ_PROFILER_STARTUP_INTERVAL=5 \
+           --setenv MOZ_PROFILER_STARTUP_FEATURES=threads,js,stackwalk,leaf,screenshots,ipcmessages,java \
+           --setenv MOZ_PROFILER_STARTUP_FILTERS="GeckoMain,Compositor,Renderer,IPDL Background"
+```
+
+Alternatively, if you have installed GeckoView-example from another source, you can launch it from the command line using `adb` with environment variables specified like this:
+
+```bash
+adb shell am start -n org.mozilla.geckoview_example/.App \
+    --es env0 MOZ_PROFILER_STARTUP=1 \
+    --es env1 MOZ_PROFILER_STARTUP_INTERVAL=5 \
+    --es env2 MOZ_PROFILER_STARTUP_FEATURES=threads,js,stackwalk,leaf,screenshots,ipcmessages,java \
+    --es env3 MOZ_PROFILER_STARTUP_FILTERS="GeckoMain,Compositor,Renderer,IPDL Background"
+```
+
+### Startup profiling Fenix
+
+Fenix has a [different way](https://firefox-source-docs.mozilla.org/mobile/android/geckoview/consumer/automation.html#reading-configuration-from-a-file) to specify environment variables: it uses a yaml file.
+
+The easiest way to set up startup profiling is to run the `<fenix-repo>/tools/setup-startup-profiling.py` script. For example:
+```bash
+./tools/setup-startup-profiling.py activate nightly  # To activate startup profiling on nightly.
+./tools/setup-startup-profiling.py deactivate beta  # To deactivate startup profiling on beta.
+```
+
+If the app is uninstalled or the device is restarted, the `activate` command may need to be re-run. The script is hard-coded to use a default configuration file with default profiling arguments. If you wish to change these arguments or use a non-standard app ID, modify the script locally or read below.
+
+If you don't want to check out [the fenix repository](https://github.com/mozilla-mobile/fenix/), you should be able to download [the script standalone](https://raw.githubusercontent.com/mozilla-mobile/fenix/master/tools/setup-startup-profiling.py) and execute it.
+
+#### Manual configuration
+
+The filename of the YAML file mentioned above depends on the bundle ID of your Fenix app. The instructions below assume you want to profile the Fenix Nightly app, with the bundle ID `org.mozilla.fenix`.
+
+ 1. Create a file with the name `org.mozilla.fenix-geckoview-config.yaml` on your desktop machine and content of the following form:
+
+    ```
+    env:
+      MOZ_PROFILER_STARTUP: 1
+      MOZ_PROFILER_STARTUP_INTERVAL: 5
+      MOZ_PROFILER_STARTUP_FEATURES: threads,js,stackwalk,leaf,screenshots,ipcmessages,java
+      MOZ_PROFILER_STARTUP_FILTERS: GeckoMain,Compositor,Renderer,IPDL Background
+    ```
+ 2. Push this file to the device with `adb push org.mozilla.fenix-geckoview-config.yaml /data/local/tmp/`.
+ 3. Run `adb shell am set-debug-app --persistent org.mozilla.fenix` to make sure the file is respected.
+
+From now on, whenever you open the Fenix app, Gecko will be profiling itself automatically from the start, even if remote debugging is turned off. Then you can enable remote debugging, connect to the browser with `about:debugging`, and capture the profiling run.
+
+You can delete the file again when you want to stop this behavior, e.g. using `adb shell rm /data/local/tmp/org.mozilla.fenix-geckoview-config.yaml`.
+
+[Here's an example profile captured using this method](https://perfht.ml/3bKTFCG).
+
+Refer to the [Reading configuration from a file](https://firefox-source-docs.mozilla.org/mobile/android/geckoview/consumer/automation.html#reading-configuration-from-a-file) section of the GeckoView docs for more details.
+
+### Profiling App Link startup
+
+Fenix can be launched with a URL as follows (assuming a debug Fenix build):
+
+```
+adb shell am start-activity -d "https://www.mozilla.org/" \
+ -a android.intent.action.VIEW org.mozilla.fenix.debug/org.mozilla.fenix.IntentReceiverActivity
+```
+
+When combined with the startup profiling `.yaml` file as described in the previous section, this allows profiling GeckoView during the App Link startup path. This is the scenario of a user opening a link from a different Android app in the default browser.
+
+Startup from App Link is the most important GeckoView startup scenario. In this scenario, GeckoView startup is directly in the critical path between the user action (tapping the link) and the first useful result (the web page being shown on the screen). This is different from the scenario of launching Fenix from the home screen - in that case, Fenix can show meaningful content even before Gecko is initialized, so Gecko's startup time is not as crucial to the experience.
+
+

data/dist/docs/guide-ui-tour-panels.md

@@ -0,0 +1,95 @@
+# UI Tour
+
+Get to know Firefox Profiler UI a bit better with a tour that highlights various features. The screenshots are all taken from [this profile](https://share.firefox.dev/3rRG46l).
+
+## The panels
+
+![A screenshot highlighting the panels on the lower half of the UI.](images/ui-tour-panels.png)
+
+The timeline lists multiple threads, while the panels provide an analysis of the currently selected thread in the timeline. The panel only uses one thread at a time by default. However it's possible to merge several threads together by using the `Ctrl` keyboard key when clicking a thread.
+
+## The Call Tree
+
+![A screenshot of the call tree including the sidebar](images/ui-tour-panels-call-tree.png)
+
+The Call Tree panels is a synthetic view of the sample data. The page about
+[stack samples and call trees](guide-stack-samples-and-call-trees) explains well
+how the call tree structure is computed from the sample data.
+
+In short, by merging the common ancestors in stacks, we can find out
+which parts of the program run more often.
+
+The [filtering guide](guide-filtering-call-trees) gives some useful information
+about how to work with this view: searching, filtering to javascript,
+transforming, and inverting (also called bottom-up tree).
+
+Finally the sidebar gives a breakdown of the categories of the code running
+inside the selected function.
+
+## The Flame Graph
+
+![A screenshot of the flame graph](images/ui-tour-panels-flame-graph.png)
+
+The Flame Graph provide a more visual view into the very same call tree
+structures:
+* Larger rectangles mean more running time.
+* The rectangles at the top are the stacks contributing to the self time, that
+  is the code where the program actually spends time.
+* The order is always the same, which makes it more convenient to compare
+  between different range selections, but also between different profiles.
+
+Some users will prefer using the flame graph over the call tree because it's
+much more visual.
+
+## The Stack Chart
+
+![A screenshot of the stack chart](images/ui-tour-panels-stack-chart.png)
+
+The Stack Chart panel also shows the sample data, but this isn't a summary.
+Instead it's a chronological view that is aligned with the timeline: as we can
+see on the screenshot above, the same categories can be seen at the same
+timestamps. Therefore this provides a different view into the same data than the
+previous panels.
+
+Be careful though: in this panel we try to rebuild the sequence of the function calls,
+but because the sample data by nature can miss short events, the view could show
+a long call where it's instead a sequence of short calls.
+
+## The Marker Chart
+
+![A screenshot of the marker chart](images/ui-tour-panels-marker-chart.png)
+
+The Marker Chart is a chronological and visual representation of all markers
+that happened during a profiling session. [As a reminder](./guide-profiler-fundamentals),
+the marker data comes from source code instrumentation (C++, Rust, JavaScript,
+Java).
+
+By hovering on the markers it's possible to inspect their data. For example for
+CSS animation markers, the element that the animation runs for is displayed.
+
+Right clicking on a marker displays a context menu that allows interacting even
+more with these pieces of information, such as copy their data.
+
+Web Developers can add their own markers using [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) and
+[performance.measure](https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure). Gecko Developers can look at [this comprehensive
+documentation](https://firefox-source-docs.mozilla.org/tools/profiler/markers-guide.html) to add their new markers.
+
+## The Marker Table
+
+This panel provide a table view to the same data as the marker chart. Its
+strength is that by searching it's possibly faster to display the payload
+information for several markers at once.
+
+## The Network Chart
+
+![A screenshot of the network chart](images/ui-tour-panels-network-chart.png)
+
+This panel shows all network requests happening during the capturing session.
+Especially all the phases happening during a request are shown, and they are
+even more detailed when hovering a line.
+
+This panel is also chronologically aligned with the timeline, so that we can
+relate network requests with it.
+
+The network requests are also displayed in the marker chart as well as the
+timeline.

data/dist/docs/guide-ui-tour-timeline.md

@@ -0,0 +1,76 @@
+# UI Tour
+
+Get to know Firefox Profiler UI a bit better with a tour that highlights various features. The screenshots are all taken from [this profile](https://share.firefox.dev/3rRG46l).
+
+## Timeline
+
+![A screenshot of the UI, selecting the top portion with threads.](images/ui-tour-timeline.png)
+
+The Firefox Profiler visualizes multi-threaded profiles. Each thread gets a row in the timeline. Clicking on the name of the thread selects the thread for the selected panel below the timeline. Threads can be hidden and shown by right clicking the thread name.
+
+## Creating a range selection
+
+[A video highlighting a range selection in the timeline.](images/ui-tour-selection.webm ':include :type=video controls width=100%')
+
+Clicking and dragging in the timeline creates a new range selection. The selection is used to zoom in on information in the panels below. For example, the call tree recomputes dynamically when dragging across the timeline. These range selections can be committed by clicking the zoom button.
+
+## The committed range selections
+
+![A screenshot highlighting the commit ranges in the top toolbar.](images/ui-tour-ranges.png)
+
+Committing a range selection by clicking the zoom button is a useful way to zoom in on a useful selection. It can be helpful to commit several ranges to focus on specific parts of a profile.
+
+## The timeline's screenshots
+
+![A screenshot highlighting the screenshot track in the timeline.](images/ui-tour-timeline-screenshots.png)
+
+The screenshots track helps users navigate through the profile by providing visual context within the timeline.
+
+## Timeline's activity graph
+
+![A screenshot highlighting the activity graph.](images/ui-tour-activity-graph.png)
+
+Each thread in the timeline contains an activity graph. The X axis represents time, and the Y axis represents the CPU usage.
+
+Clicking on the activity graph will select a sample and update the panel below (if the panel uses the currently selected stack). For instance, in the call tree, it will open up the tree to find the stack for this sample. The selected stack will be colored a darker blue in the list. This is another useful way to correlate stacks with when they were executed over time.
+
+[Stacks and samples can be filtered out](./guide-filtering-call-trees.md) through various operations. When this happens, the activity graph will be greyed at that spot. When the thread didn't have samples at all for an area (for instance the thread hadn't yet started up), then it should have an indicator as to the reason why there are no samples.
+
+## Timeline's markers
+
+![A screenshot highlighting the timeline's markers.](images/ui-tour-timeline-markers.png)
+
+Markers are displayed in the timeline and can be useful to correlate events with the activity graph. Markers can be clicked to set the range selection to that time. Hovering over the marker will display a tooltip with information about the marker.
+
+Perhaps one of the most useful markers is the responsiveness marker—pictured here in red. This is collected when events are taking a long time to run inside of Firefox. Clicking on one of these will quickly zoom in on potential problem areas and can indicate jank.
+
+Only certain markers are broken out and colored in the timeline. A similar but more detailed view can be seen in the Marker Chart panel.
+
+## Timeline's network activity
+![A screenshot highlighting the timeline's network activity.](images/ui-tour-timeline-network.png)
+
+Network requests are displayed in the timeline, which can be useful to correlate
+the work that's done by the browser and the webpage, and the network activity.
+For example you could find out that some JavaScript code is executed when
+some response is received.
+
+Hovering a network request will show interesting information about it, and
+clicking it will switch to the more detailed network panel.
+
+## Timeline's memory usage change
+![A screenshot highlighting the timeline's memory usage.](images/ui-tour-timeline-memory.png)
+
+The timeline also gives an overview of the memory usage change for a process.
+Please note that this doesn't show the absolute memory usage, but rather the
+difference between the lowest and highest memory usage during the profiling
+session.
+
+## Track selection
+![A screenshot showing the track selection button.](images/ui-tour-timeline-track-selection.png)
+
+With the button right above the tracks it's possible to either hide tracks and
+threads that are in the way when analyzing a profile, or show some that were
+automatically hidden when loading the profile because we thought they were less
+interesting.
+
+The same operations can be carried out with a right click on each track.

data/dist/docs/images/call-tree-running-time.svg

@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="410" height="328" viewBox="0 0 410 328">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(38 48)">
+      <g fill="#000" font-family="Helvetica" font-size="12" transform="translate(87 1)">
+        <text>
+          <tspan x="125.165" y="11">3ms</tspan>
+        </text>
+        <text>
+          <tspan x="125.165" y="63">3ms</tspan>
+        </text>
+        <text>
+          <tspan x="164.165" y="119">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="183.165" y="175">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="184.165" y="232">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="29.165" y="120">2ms</tspan>
+        </text>
+        <text>
+          <tspan x="1.165" y="174">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="1.165" y="229">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="111.165" y="174">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="111.165" y="232">1ms</tspan>
+        </text>
+      </g>
+    </g>
+    <path fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="square" d="M227.5 66.4305556L227.5 96.5694444M227.5 96.5694444L230.5 85.7694444 224.5 85.7694444 227.5 96.5694444zM166.5 231.430556L166.5 261.569444M166.5 261.569444L169.5 250.769444 163.5 250.769444 166.5 261.569444zM221.5 231.430556L221.5 261.569444M221.5 261.569444L224.5 250.769444 218.5 250.769444 221.5 261.569444zM293.5 231.430556L293.5 261.569444M293.5 261.569444L296.5 250.769444 290.5 250.769444 293.5 261.569444zM228.565217 108.433962L199.5 152.5M199.5 152.5L207.950786 145.136291 202.94217 141.832692 199.5 152.5zM228.565217 108.433962L264.5 153.5M264.5 153.5L260.11239 143.185502 255.421189 146.926174 264.5 153.5zM270.565217 162.433962L292.5 206.5M292.5 206.5L290.373016 195.494731 285.001672 198.168429 292.5 206.5zM189.565217 163.433962L216.5 208.5M216.5 208.5L213.53443 197.690495 208.384194 200.768656 216.5 208.5zM192.565217 162.433962L173.434783 207.566038M173.434783 207.566038L180.411747 198.793241 174.88753 196.451654 173.434783 207.566038z"/>
+    <ellipse cx="228.5" cy="55" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="228.5" cy="110" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="192.5" cy="165" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="167.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="221.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="293.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="221.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="293.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="167.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="272.5" cy="165" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="223" y="62">A</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="223" y="117">B</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="186.189" y="171.582">C</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="161.589" y="226.554">D</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="217" y="227">F</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="289" y="226">F</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="215" y="282">G</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="287" y="282">G</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="162" y="282">E</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="266.389" y="171.582">H</tspan>
+    </text>
+    <text fill="#0A84FF" font-family="Helvetica-Bold, Helvetica" font-size="17" font-weight="bold">
+      <tspan x="33" y="53">Call Tree</tspan> <tspan x="33" y="73">Running Time</tspan>
+    </text>
+  </g>
+</svg>

data/dist/docs/images/call-tree-self-time.svg

@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="410" height="328" viewBox="0 0 410 328">
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(38 48)">
+      <g fill="#000" font-family="Helvetica" font-size="12" transform="translate(87 1)">
+        <text>
+          <tspan x="125.165" y="11">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="125.165" y="63">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="164.165" y="119">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="183.165" y="175">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="184.165" y="232">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="29.165" y="120">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="1.165" y="174">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="1.165" y="229">1ms</tspan>
+        </text>
+        <text>
+          <tspan x="111.165" y="174">0ms</tspan>
+        </text>
+        <text>
+          <tspan x="111.165" y="232">1ms</tspan>
+        </text>
+      </g>
+    </g>
+    <path fill="#4A4A4A" stroke="#4A4A4A" stroke-linecap="square" d="M227.5 66.4305556L227.5 96.5694444M227.5 96.5694444L230.5 85.7694444 224.5 85.7694444 227.5 96.5694444zM166.5 231.430556L166.5 261.569444M166.5 261.569444L169.5 250.769444 163.5 250.769444 166.5 261.569444zM221.5 231.430556L221.5 261.569444M221.5 261.569444L224.5 250.769444 218.5 250.769444 221.5 261.569444zM293.5 231.430556L293.5 261.569444M293.5 261.569444L296.5 250.769444 290.5 250.769444 293.5 261.569444zM228.565217 108.433962L199.5 152.5M199.5 152.5L207.950786 145.136291 202.94217 141.832692 199.5 152.5zM228.565217 108.433962L264.5 153.5M264.5 153.5L260.11239 143.185502 255.421189 146.926174 264.5 153.5zM270.565217 162.433962L292.5 206.5M292.5 206.5L290.373016 195.494731 285.001672 198.168429 292.5 206.5zM189.565217 163.433962L216.5 208.5M216.5 208.5L213.53443 197.690495 208.384194 200.768656 216.5 208.5zM192.565217 162.433962L173.434783 207.566038M173.434783 207.566038L180.411747 198.793241 174.88753 196.451654 173.434783 207.566038z"/>
+    <ellipse cx="228.5" cy="55" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="228.5" cy="110" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="192.5" cy="165" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="167.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="221.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="293.5" cy="220" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="221.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="293.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="167.5" cy="275" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <ellipse cx="272.5" cy="165" fill="#D7D7DB" stroke="#737373" rx="12.5" ry="12"/>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="223" y="62">A</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="223" y="117">B</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="186.189" y="171.582">C</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="161.589" y="226.554">D</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="217" y="227">F</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="289" y="226">F</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="215" y="282">G</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="287" y="282">G</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="162" y="282">E</tspan>
+    </text>
+    <text fill="#000" font-family="Helvetica" font-size="17">
+      <tspan x="266.389" y="171.582">H</tspan>
+    </text>
+    <text fill="#0A84FF" font-family="Helvetica-Bold, Helvetica" font-size="17" font-weight="bold">
+      <tspan x="37" y="53">Call Tree</tspan> <tspan x="37" y="73">Self Time</tspan>
+    </text>
+  </g>
+</svg>