commit 33fdf659b5d767c7243c81b844405c69231d8421
author Nicolò Mazzucato <nicomazz@google.com> Fri Aug 30 12:47:42 2019 +0100
committer Nicolò Mazzucato <nicomazz@google.com> Fri Aug 30 12:47:42 2019 +0100
tree 794c1c740a59d4d6284fafac592798f797680491
parent 80bbdd8f35d49857ce7fea4d964240e2d05a48ce

Add ui for choosing chrome categories

If the categories have been fetched from the extension, at the bottom
of the chrome tab a list of categories is shown. After the selection,
they are inserted in the configuration.

Bug: 140224909
Change-Id: I402133d088113afe8914d27ee49a3e94aa7115b8

ui/src/assets/record.scss

diff --git a/ui/src/assets/record.scss b/ui/src/assets/record.scss
index 7b2b8ff..40c3751 100644
--- a/ui/src/assets/record.scss
+++ b/ui/src/assets/record.scss
@@ -563,6 +563,24 @@
         }
         margin: 0;
       }
+
+      &.two-columns {
+        height: 400px;
+        width: auto;
+        margin: var(--record-section-padding);
+        optgroup {
+          display: grid;
+          padding: 0;
+          grid-template-columns: 1fr 1fr;
+        }
+        option {
+          &:nth-of-type(2n + 1) {
+            border-left: 1px solid #eee;
+            border-right: 1px solid #eee;
+          }
+          margin: 0;
+        }
+      }
     }
   }
 
@@ -574,6 +592,10 @@
     height: 152px;
   }
 
+  .chrome-categories {
+    height: 152px;
+  }
+
   textarea.extra-input {
     width: 100%;
     height: 60px;
@@ -595,7 +617,6 @@
     user-select: text;
     box-shadow: 0 0 12px #999;
 
-
     @keyframes ripple{
       0% { transform: scale(1.00); }
       30% { transform: scale(1.20); }

ui/src/common/state.ts

diff --git a/ui/src/common/state.ts b/ui/src/common/state.ts
index c427a44..21ac4be 100644
--- a/ui/src/common/state.ts
+++ b/ui/src/common/state.ts
@@ -250,6 +250,8 @@
 
   procStats: boolean;
   procStatsPeriodMs: number;
+
+  chromeCategoriesSelected: string[];
 }
 
 export function createEmptyRecordConfig(): RecordConfig {
@@ -302,6 +304,8 @@
     memLmk: false,
     procStats: false,
     procStatsPeriodMs: 1000,
+
+    chromeCategoriesSelected: [],
   };
 }
 

ui/src/controller/record_controller.ts

diff --git a/ui/src/controller/record_controller.ts b/ui/src/controller/record_controller.ts
index e073cb7..47a4e80 100644
--- a/ui/src/controller/record_controller.ts
+++ b/ui/src/controller/record_controller.ts
@@ -101,6 +101,7 @@
   const atraceCats = new Set<string>(uiCfg.atrace ? uiCfg.atraceCats : []);
   const atraceApps = new Set<string>();
   const chromeCategories = new Set<string>();
+  uiCfg.chromeCategoriesSelected.forEach(it => chromeCategories.add(it));
 
   let procThreadAssociationPolling = false;
   let procThreadAssociationFtrace = false;

ui/src/frontend/record_page.ts

diff --git a/ui/src/frontend/record_page.ts b/ui/src/frontend/record_page.ts
index 39afc3c..33cda2d 100644
--- a/ui/src/frontend/record_page.ts
+++ b/ui/src/frontend/record_page.ts
@@ -473,7 +473,25 @@
         descr: `Records network events for navigations and resources.`,
         setEnabled: (cfg, val) => cfg.navigationAndLoading = val,
         isEnabled: (cfg) => cfg.navigationAndLoading
-      } as ProbeAttrs));
+      } as ProbeAttrs),
+      ChromeCategoriesSelection());
+}
+
+function ChromeCategoriesSelection() {
+  // The categories are displayed only if the extension is installed, because
+  // they come from the chrome.debugging API, not available from normal web
+  // pages.
+  const categories = globals.state.chromeCategories;
+  if (!categories) return [];
+  const categoriesMap = new Map<string, string>();
+  categories.forEach(cat => categoriesMap.set(cat, cat));
+  return m(Dropdown, {
+    title: 'Additional Chrome categories',
+    cssClass: '.multicolumn.two-columns.chrome-categories',
+    options: categoriesMap,
+    set: (cfg, val) => cfg.chromeCategoriesSelected = val,
+    get: (cfg) => cfg.chromeCategoriesSelected
+  } as DropdownAttrs);
 }
 
 function AdvancedSettings(cssClass: string) {