Add call tree filter to Observatory CPU profile tree

runtime/observatory/lib/src/elements/cpu_profile.html

Index: runtime/observatory/lib/src/elements/cpu_profile.html
diff --git a/runtime/observatory/lib/src/elements/cpu_profile.html b/runtime/observatory/lib/src/elements/cpu_profile.html
index 057883508717512a9e6e6e1e0b37a7f0d710ec6a..b5f2432d3dc97fc59c045d02c2de2a1e04753ca9 100644
--- a/runtime/observatory/lib/src/elements/cpu_profile.html
+++ b/runtime/observatory/lib/src/elements/cpu_profile.html
@@ -113,53 +113,62 @@
     <style>
     .statusBox {
       height: 100%;
-      padding: 1em;
+      padding: 0.5em;
+    }
+    .row {
+      display: flex;
     }
     </style>
     <div class="content-centered-big">
       <template if="{{ show }}">
         <h2>Tree display</h2>
         <hr>
-        <div class="memberList">
-          <template if="{{ showModeSelector }}">
-            <div class="memberItem">
-              <div class="memberName">Mode</div>
-              <div class="memberValue">
-                <select value="{{modeSelector}}">
-                  <option value="Code">Code</option>
-                  <option value="Function">Function</option>
-                </select>
-              </div>
-            </div>
-          </template>
-          <template if="{{ showDirectionSelector }}">
-            <div class="memberItem">
-              <div class="memberName">Call Tree Direction</div>
-              <div class="memberValue">
-                <select value="{{directionSelector}}">
-                  <option value="Down">Top down</option>
-                  <option value="Up">Bottom up</option>
-                </select>
-              </div>
+        <div class="row">
+          <div>
+            <div class="memberList">
+              <template if="{{ showModeSelector }}">
+                <div class="memberItem">
+                  <div class="memberName">Mode</div>
+                  <div class="memberValue">
+                    <select value="{{modeSelector}}">
+                      <option value="Code">Code</option>
+                      <option value="Function">Function</option>
+                    </select>
+                  </div>
+                </div>
+              </template>
+              <template if="{{ showDirectionSelector }}">
+                <div class="memberItem">
+                  <div class="memberName">Call Tree Direction</div>
+                  <span class="memberValue">
+                    <select value="{{directionSelector}}">
+                      <option value="Down">Top down</option>
+                      <option value="Up">Bottom up</option>
+                    </select>
+                    <template if="{{ directionSelector == 'Down' }}">
+                      <span>
+                        Tree is rooted at "main". Child nodes are callees.
+                      </span>
+                    </template>
+                    <template if="{{ directionSelector == 'Up' }}">
+                      <span>
+                        Tree is rooted at executing function / code. Child nodes are callers.
+                      </span>
+                    </template>
+                  </span>
+                </div>
+              </template>
+              <template if="{{ showFilter }}">
+                <div class="memberItem">
+                  <div title="case-sensitive substring match" class="memberName">Call Tree Filter</div>
+                  <span class="memberValue">
+                    <input type="text" placeholder="Search filter" id="filterInput">
+                  </span>
+                </div>
+              </template>
             </div>
-          </template>
-        </div>
-        <template if="{{ directionSelector == 'Down' }}">
-          <br>
-          <div class="statusBox shadow">
-            <div>Tree is rooted at main.</div>
-            <br>
-            <div>Child nodes are callees.</div>
           </div>
-        </template>
-        <template if="{{ directionSelector == 'Up' }}">
-          <br>
-          <div class="statusBox shadow">
-            <div>Tree is rooted at executing function / code.</div>
-            <br>
-            <div>Child nodes are callers.</div>
-          </div>
-        </template>
+        </div>
       </template>
     </div>
   </template>