tools/visual_debugger/filter-ui.js - chromium/src - Git at Google

 // Copyright 2022 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 const MDCMenu = mdc.menu.MDCMenu;
 const MDCMenuFoundation = mdc.menu.MDCMenuFoundation;
 const maxZIndex = 999;

 class FilterUI extends HTMLElement {
   constructor() {
     super();
   }

   connectedCallback() {
     this.innerHTML = `
 <style>
 .row {
   display: flex;
   justify-content: space-between;
   padding-bottom: 10px;
 }

 #filter-container {
   max-width: 400px;
   min-width: 350px;
   font-family: Roboto;
   font-size: 10pt;
   background-color: white;
   padding: 10px;
 }

 #saveFilter {
   margin: 20px 10px;
   margin-right: 0px;
 }

 </style>
 <div id='filter-container'>
   <div class='sectionTitle' id='filter-ui-title'>Add Filter</div>
   <div class='section'>
     <div class='row'>
       <div class='label' title='Filter annotation to match.
       For example frame.root.damage' >Annotation </div>
       <div class='input'>
         <input list="knownAnnotations" placeholder='Substring to match'
          id='annotation' size=40>
         <!-- TODO: A fancy drop-down here would be nice. -->
       </div>
     </div>
     <div class='row'>
       <div class='label'>File name</div>
       <div class='input'>
         <input placeholder='Substring to match (usually empty!)'
          id='filename' size=40>
         <!-- TODO: A fancy drop-down here would be nice. -->
       </div>
     </div>
     <div class='row'>
       <div class='label'>Function</div>
       <div class='input'>
         <input placeholder='Substring to match (usually empty!)'
          id='functionname' size=40>
         <!-- TODO: A fancy drop-down here would be nice. -->
       </div>
     </div>


   </div>
   <div style='display: flex'>
     <div style='flex-grow: 1'>
       <div class='sectionTitle'>Action</div>
       <div class='section'>
         <div>
           <form id="actionform">
             <input type='radio' id='drawfilter' name='dowhat' value='drawfilter'/>Override
             <input type='color' id='drawcolor' name='drawcolor' value='#000000'/>
             opacity <input type='range' name='fillalpha' min='0' max='100'
              step='10' value='50' list='alphastep'/>
             <datalist id='alphastep'>
               <option>0</option><option>10</option><option>20</option>
               <option>30</option><option>40</option><option>50</option>
               <option>60</option> <option>70</option><option>80</option>
               <option>90</option><option>100</option>
             </datalist>
             <input checked type='radio' name='dowhat' value='drawcaller'/>
             Draw with caller color and opacity
             <br/>
             <input type='radio' name='dowhat' value='skip'
             title='Used as a discard filter'/>Do not draw
             <br/>
           </form>
         </div>
       </div>
     </div>
     <button id='saveFilter'>Save</button>
   </div>
 <div>
 `;
     this.setUpButtons_();

     // Event listener to check if custom color selected
     // to automatically select override button
     document.getElementById('drawcolor').addEventListener("change",function(){
       document.getElementById('drawfilter').checked = true;
     });
   }

   setUpButtons_() {
     const SaveFilter = () => {
       let input = this.querySelector('#filename');
       const filename = input.value || undefined;
       input = this.querySelector('#functionname');
       const func = input.value || undefined;
       input = this.querySelector('#annotation');
       const anno = input.value || undefined;

       input = this.querySelector('input[name="dowhat"]:checked');
       const action = { skipDraw: input.value === 'skip' };
       if (input.value === 'drawfilter') {
         action.color = this.querySelector('input[name="drawcolor"]').value;
         action.alpha = this.querySelector('input[name="fillalpha"]').value;
       }

       this.dispatchEvent(new CustomEvent('saveFilter', {
         detail: { selector: { filename, func, anno }, action }
       }));
     };

     this.querySelector('#saveFilter').addEventListener('click', SaveFilter);
     this.querySelector('#filter-container').addEventListener('keypress',
       (e) => { if (e.key === 'Enter') SaveFilter(); });
   }
 };

 window.customElements.define('filter-ui', FilterUI);

 // A <datalist> element containing values of previously seen filter annotations.
 let dataListElement = undefined;
 let knownAnnotations = new Set();
 // Called when processing new sources from a frame.
 function notifyUiOfNewSource(source) {
   if (dataListElement === undefined) {
     dataListElement = document.createElement("datalist");
     dataListElement.id = "knownAnnotations";
     document.body.appendChild(dataListElement);
   }

   if (!knownAnnotations.has(source.anno)) {
     let option = document.createElement("option");
     option.value = source.anno;
     dataListElement.appendChild(option);

     knownAnnotations.add(source.anno);
   }
 }

 function createFilterChip(filter) {
   const chip = document.createElement('div');
   chip.className = "mdc-chip";
   chip.setAttribute("role", "row");
   chip.style.margin = '5px';
   chip.style.borderRadius = '0px';
   chip.style.zIndex = maxZIndex;
   if (filter.shouldDraw) {
     chip.style.border = filter.drawColor ?
       `2px solid ${filter.drawColor}` : `1px solid black`;
     if (filter.fillAlpha > 0) {
       var alpha = Math.min(.6, parseFloat(filter.fillAlpha) / 100);
       var rgba = filter.drawColor + DrawCall.alphaFloatToHex(alpha);
       chip.style.backgroundColor = rgba;
       chip.style.fontWeight = 'bold';
     }
     else {
       chip.style.backgroundColor = `white`;
     }
   }
   else {
     chip.style.border = `1px dashed grey`;
     chip.style.backgroundColor = `white`;
   }

   chip.innerHTML =
     `
   <input checked type="checkbox"/>
   <span role="gridcell">
   <span class="mdc-chip__text" id="filterstring"></span>
   </span>
   <span role="gridcell">
     <div class="mdc-menu-surface--anchor">
     <i class="material-icons-outlined mdc-chip__icon mdc-chip__icon--trailing"
        tabindex="-1" role="button" id="filtermenu">more_vert</i>
       <div id="filterchipmenu" class="mdc-menu mdc-menu-surface">
         <ul class="mdc-list" role="menu" aria-hidden="true"
          aria-orientation="vertical" tabindex="-1">
           <li class="mdc-list-item" role="menuitem"
           id="filter-moveprev" onclick="movePrev(this)">
             <span class="mdc-list-item__ripple"></span>
             <span class="mdc-list-item__text">
             <i class="material-icons-outlined">arrow_back_ios</i>Move Previous
             </span>
           </li>
           <li class="mdc-list-item" role="menuitem"
           id="filter-movenext" onclick="moveNext(this)">
             <span class="mdc-list-item__ripple"></span>
             <span class="mdc-list-item__text">
             <i class="material-icons-outlined">arrow_forward_ios</i> Move Next
             </span>
           </li>
           <li class="mdc-list-item"
            role="menuitem" id="filter-edit" onclick="showEditFilterPopup(this)">
             <span class="mdc-list-item__ripple"></span>
             <span class="mdc-list-item__text">
             <i class="material-icons-outlined">edit</i> Edit</span>
           </li>
           <li class="mdc-list-item" role="menuitem"
            id="filter-delete" onclick="deleteFilter(this)">
             <span class="mdc-list-item__ripple"></span>
             <span class="mdc-list-item__text">
             <i class="material-icons-outlined">delete</i> Delete</span>
           </li>
         </ul>
       </div>
     </div>
   </span>
   `;

   chip.querySelector('#filterstring').innerHTML = filter.createUIString();

   chip.querySelector('#filtermenu').addEventListener('click', () => {
     const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
     menu.setAnchorMargin({ top: 25 });
     menu.open = true;
   });

   const check = chip.querySelector('input');
   check.checked = filter.enabled;
   check.addEventListener('change', () => {
     filter.enabled = !!check.checked;
     locallyStoreFilters();
     Player.instance.refresh();
     Filter.sendStreamFilters();
   });

   return chip;
 }

 function showCreateFilterPopup(anchor) {
   const filterUi = document.createElement('filter-ui');
   filterUi.addEventListener('saveFilter', (event) => {
     if (event.detail.selector && event.detail.action) {
       const filter =
         new Filter(true, event.detail.selector, event.detail.action);
       const chip = createFilterChip(filter);
       const list = document.querySelector('#filters');
       list.appendChild(chip);
       hideModal();
       refreshFilterSet();
     }
   });
   filterUi.style.position = 'absolute';
   filterUi.style.top = (anchor.offsetTop + anchor.offsetHeight) + 'px';
   filterUi.style.left = (anchor.offsetLeft + 20) + 'px';
   filterUi.style.zIndex = maxZIndex;

   showModal(filterUi, '#annotation');
 }

 // Traverses through all the filter chips and enables/disables
 // "move next/prev" button clickability depending on if
 // the chip is at the beginning/middle/end of list
 function refreshFilterSet() {
   const list = document.querySelector('#filters');
   for (var chip = list.firstElementChild;
     chip !== null; chip = chip.nextSibling) {
     if (chip === list.firstElementChild) {
       chip.querySelector('#filter-moveprev')
         .classList.add("mdc-list-item--disabled");
     }
     else {
       chip.querySelector('#filter-moveprev')
         .classList.remove("mdc-list-item--disabled");
     }
     if (chip.nextSibling === null) {
       chip.querySelector('#filter-movenext')
         .classList.add("mdc-list-item--disabled");
     }
     else {
       chip.querySelector('#filter-movenext')
         .classList.remove("mdc-list-item--disabled");
     }
   }
   locallyStoreFilters();
   Player.instance.refresh();
   Filter.sendStreamFilters();
 }

 function movePrev(item) {
   if (item.classList.contains("mdc-list-item--disabled")) {
     return;
   }
   var chip = item.closest(".mdc-chip");
   const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
   menu.open = false;
   var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
   Filter.swapFilters(index - 1, index);
   var prevChip = chip.previousElementSibling;
   chip.parentNode.insertBefore(chip, prevChip);
   refreshFilterSet();
 }

 function moveNext(item) {
   if (item.classList.contains("mdc-list-item--disabled")) {
     return;
   }
   var chip = item.closest(".mdc-chip");
   const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
   menu.open = false;
   var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
   Filter.swapFilters(index, index + 1);
   var nextChip = chip.nextElementSibling;
   chip.parentNode.insertBefore(nextChip, chip);
   refreshFilterSet();
 }

 function createFilterComplete(enabled, selector, action, index) {
   var newFilter =
     new Filter(enabled, selector, action, index);
   const newChip = createFilterChip(newFilter);
   const list = document.querySelector('#filters');
   list.appendChild(newChip);
   hideModal();
   refreshFilterSet();
   return newChip;
 }

 function showEditFilterPopup(item) {
   var chip = item.closest(".mdc-chip");
   var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
   var filter = Filter.getFilter(index);

   const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
   menu.open = false;

   const filterUi = document.createElement('filter-ui');
   const isEnabled = filter.enabled;
   filterUi.addEventListener('saveFilter', (event) => {
     if (event.detail.selector && event.detail.action) {
       var newChip = createFilterComplete(isEnabled, event.detail.selector,
         event.detail.action, index);
       chip.replaceWith(newChip);
     }
   });
   filterUi.style.position = 'absolute';
   filterUi.style.top = (chip.offsetTop + chip.offsetHeight) + 'px';
   filterUi.style.left = (chip.offsetLeft + 20) + 'px';
   filterUi.style.zIndex = maxZIndex;

   showModal(filterUi, '#annotation');

   // fill form from filter data
   filterUi.querySelector('#filter-ui-title').innerHTML = "Edit Filter";
   filterUi.querySelector('#filename').value = filter.file;
   filterUi.querySelector('#functionname').value = filter.func;
   filterUi.querySelector('#annotation').value = filter.anno;

   var actionform = filterUi.querySelector('#actionform');
   actionform.dowhat.value = !filter.shouldDraw ? 'skip' :
     filter.drawColor ? 'drawfilter' : 'drawcaller';
   actionform.drawcolor.value = filter.drawColor;
   actionform.fillalpha.value = filter.fillAlpha;
 }

 function deleteFilter(item) {
   var chip = item.closest(".mdc-chip");
   const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
   menu.open = false;
   var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
   Filter.deleteFilter(index);
   chip.parentNode.removeChild(chip);
   refreshFilterSet();
 }

 // Stores filter instances in local storage
 function locallyStoreFilters() {
   var filterInstances = Filter.instances;
   // Store string representation of filterInstances list in local storage.
   localStorage.setItem('filterInstances', JSON.stringify(filterInstances));
 }

 // Restores filter instances from local storage.
 function restoreFilters() {
   const retrievedFilterString = localStorage.getItem('filterInstances');
   console.log(" Filter string=" + retrievedFilterString);
   // Add default filters to the instances list.
   FilterUIDefault.initialize();

   if (!retrievedFilterString) {
     return;
   }

   var retrievedFilterInstances = JSON.parse(retrievedFilterString);
   // Remove any default filter duplicates from restored filters.
   for (const defaultFilter of defaultFilters) {
     retrievedFilterInstances = retrievedFilterInstances.filter
         (instance => !isDuplicate(instance, defaultFilter));
   }
   // Re-create non-default filter chips from local storage.
   // Pre-existing filters are appended behind the default ones.
   retrievedFilterInstances.forEach((instance) =>
     createFilterComplete(instance.enabled_,
       instance.selector_, instance.action_));
 }

 // Checks if one filter is a duplicate of another.
 // NOTE: Custom equality check needed to avoid marking same style
 // of filters with different user states and indices as non-duplicates.
 function isDuplicate(filter1, filter2) {
   if (!filter1 || !filter2) {
     return false;
   }
   if (filter1.selector_.filename !== filter2.selector_.filename) {
     return false;
   }
   if (filter1.selector_.func !== filter2.selector_.func) {
     return false;
   }
   if (filter1.selector_.anno !== filter2.selector_.anno) {
     return false;
   }

   return true;
 }

 const defaultFilters = [
     {
       selector_: { filename: "", func: "", anno: "frame.render_pass.meta" },
       action_: { skipDraw: false },
       enabled_: false
     },
     {
       selector_: { filename: "", func: "", anno: "frame.render_pass.quad" },
       action_: { skipDraw: false, color: '#000000', alpha: "10" },
       enabled_: true
     },
     {
       selector_: { filename: "", func: "", anno: "frame.render_pass.damage" },
       action_: { skipDraw: false, color: '#FF0000', alpha: "20" },
       enabled_: true
     },
     {
       selector_: {
         filename: "",
         func: "",
         anno: "frame.render_pass.output_rect",
       },
       action_: { skipDraw: false },
       enabled_: false,
     },
     {
       selector_: { filename: "", func: "", anno: "overlay.selected.rect" },
       action_: { skipDraw: false, color: '#22FF22', alpha: "20" },
       enabled_: true
     },
     {
       selector_: { filename: "", func: "", anno: "overlay.outgoing.damage" },
       action_: { skipDraw: false, color: '#AA00AA', alpha: "20" },
       enabled_: true
     },
     {
       selector_: { filename: "", func: "", anno: "frame.render_pass.material" },
       action_: { skipDraw: false },
       enabled_: false
     }
 ];


 // Default filters should probably load off disk.
 const FilterUIDefault = {
   initialize() {
     defaultFilters.forEach((instance) =>
       createFilterComplete(instance.enabled_,
                  instance.selector_, instance.action_))
   }
 };
	// Copyright 2022 The Chromium Authors
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	const MDCMenu = mdc.menu.MDCMenu;
	const MDCMenuFoundation = mdc.menu.MDCMenuFoundation;
	const maxZIndex = 999;

	class FilterUI extends HTMLElement {
	constructor() {
	super();
	}

	connectedCallback() {
	this.innerHTML = `
	<style>
	.row {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
	}

	#filter-container {
	max-width: 400px;
	min-width: 350px;
	font-family: Roboto;
	font-size: 10pt;
	background-color: white;
	padding: 10px;
	}

	#saveFilter {
	margin: 20px 10px;
	margin-right: 0px;
	}

	</style>
	<div id='filter-container'>
	<div class='sectionTitle' id='filter-ui-title'>Add Filter</div>
	<div class='section'>
	<div class='row'>
	<div class='label' title='Filter annotation to match.
	For example frame.root.damage' >Annotation </div>
	<div class='input'>
	<input list="knownAnnotations" placeholder='Substring to match'
	id='annotation' size=40>
	<!-- TODO: A fancy drop-down here would be nice. -->
	</div>
	</div>
	<div class='row'>
	<div class='label'>File name</div>
	<div class='input'>
	<input placeholder='Substring to match (usually empty!)'
	id='filename' size=40>
	<!-- TODO: A fancy drop-down here would be nice. -->
	</div>
	</div>
	<div class='row'>
	<div class='label'>Function</div>
	<div class='input'>
	<input placeholder='Substring to match (usually empty!)'
	id='functionname' size=40>
	<!-- TODO: A fancy drop-down here would be nice. -->
	</div>
	</div>


	</div>
	<div style='display: flex'>
	<div style='flex-grow: 1'>
	<div class='sectionTitle'>Action</div>
	<div class='section'>
	<div>
	<form id="actionform">
	<input type='radio' id='drawfilter' name='dowhat' value='drawfilter'/>Override
	<input type='color' id='drawcolor' name='drawcolor' value='#000000'/>
	opacity <input type='range' name='fillalpha' min='0' max='100'
	step='10' value='50' list='alphastep'/>
	<datalist id='alphastep'>
	<option>0</option><option>10</option><option>20</option>
	<option>30</option><option>40</option><option>50</option>
	<option>60</option> <option>70</option><option>80</option>
	<option>90</option><option>100</option>
	</datalist>
	<input checked type='radio' name='dowhat' value='drawcaller'/>
	Draw with caller color and opacity
	<br/>
	<input type='radio' name='dowhat' value='skip'
	title='Used as a discard filter'/>Do not draw
	<br/>
	</form>
	</div>
	</div>
	</div>
	<button id='saveFilter'>Save</button>
	</div>
	<div>
	`;
	this.setUpButtons_();

	// Event listener to check if custom color selected
	// to automatically select override button
	document.getElementById('drawcolor').addEventListener("change",function(){
	document.getElementById('drawfilter').checked = true;
	});
	}

	setUpButtons_() {
	const SaveFilter = () => {
	let input = this.querySelector('#filename');
	const filename = input.value \|\| undefined;
	input = this.querySelector('#functionname');
	const func = input.value \|\| undefined;
	input = this.querySelector('#annotation');
	const anno = input.value \|\| undefined;

	input = this.querySelector('input[name="dowhat"]:checked');
	const action = { skipDraw: input.value === 'skip' };
	if (input.value === 'drawfilter') {
	action.color = this.querySelector('input[name="drawcolor"]').value;
	action.alpha = this.querySelector('input[name="fillalpha"]').value;
	}

	this.dispatchEvent(new CustomEvent('saveFilter', {
	detail: { selector: { filename, func, anno }, action }
	}));
	};

	this.querySelector('#saveFilter').addEventListener('click', SaveFilter);
	this.querySelector('#filter-container').addEventListener('keypress',
	(e) => { if (e.key === 'Enter') SaveFilter(); });
	}
	};

	window.customElements.define('filter-ui', FilterUI);

	// A <datalist> element containing values of previously seen filter annotations.
	let dataListElement = undefined;
	let knownAnnotations = new Set();
	// Called when processing new sources from a frame.
	function notifyUiOfNewSource(source) {
	if (dataListElement === undefined) {
	dataListElement = document.createElement("datalist");
	dataListElement.id = "knownAnnotations";
	document.body.appendChild(dataListElement);
	}

	if (!knownAnnotations.has(source.anno)) {
	let option = document.createElement("option");
	option.value = source.anno;
	dataListElement.appendChild(option);

	knownAnnotations.add(source.anno);
	}
	}

	function createFilterChip(filter) {
	const chip = document.createElement('div');
	chip.className = "mdc-chip";
	chip.setAttribute("role", "row");
	chip.style.margin = '5px';
	chip.style.borderRadius = '0px';
	chip.style.zIndex = maxZIndex;
	if (filter.shouldDraw) {
	chip.style.border = filter.drawColor ?
	`2px solid ${filter.drawColor}` : `1px solid black`;
	if (filter.fillAlpha > 0) {
	var alpha = Math.min(.6, parseFloat(filter.fillAlpha) / 100);
	var rgba = filter.drawColor + DrawCall.alphaFloatToHex(alpha);
	chip.style.backgroundColor = rgba;
	chip.style.fontWeight = 'bold';
	}
	else {
	chip.style.backgroundColor = `white`;
	}
	}
	else {
	chip.style.border = `1px dashed grey`;
	chip.style.backgroundColor = `white`;
	}

	chip.innerHTML =
	`
	<input checked type="checkbox"/>
	<span role="gridcell">
	<span class="mdc-chip__text" id="filterstring"></span>
	</span>
	<span role="gridcell">
	<div class="mdc-menu-surface--anchor">
	<i class="material-icons-outlined mdc-chip__icon mdc-chip__icon--trailing"
	tabindex="-1" role="button" id="filtermenu">more_vert</i>
	<div id="filterchipmenu" class="mdc-menu mdc-menu-surface">
	<ul class="mdc-list" role="menu" aria-hidden="true"
	aria-orientation="vertical" tabindex="-1">
	<li class="mdc-list-item" role="menuitem"
	id="filter-moveprev" onclick="movePrev(this)">
	<span class="mdc-list-item__ripple"></span>
	<span class="mdc-list-item__text">
	<i class="material-icons-outlined">arrow_back_ios</i>Move Previous
	</span>
	</li>
	<li class="mdc-list-item" role="menuitem"
	id="filter-movenext" onclick="moveNext(this)">
	<span class="mdc-list-item__ripple"></span>
	<span class="mdc-list-item__text">
	<i class="material-icons-outlined">arrow_forward_ios</i> Move Next
	</span>
	</li>
	<li class="mdc-list-item"
	role="menuitem" id="filter-edit" onclick="showEditFilterPopup(this)">
	<span class="mdc-list-item__ripple"></span>
	<span class="mdc-list-item__text">
	<i class="material-icons-outlined">edit</i> Edit</span>
	</li>
	<li class="mdc-list-item" role="menuitem"
	id="filter-delete" onclick="deleteFilter(this)">
	<span class="mdc-list-item__ripple"></span>
	<span class="mdc-list-item__text">
	<i class="material-icons-outlined">delete</i> Delete</span>
	</li>
	</ul>
	</div>
	</div>
	</span>
	`;

	chip.querySelector('#filterstring').innerHTML = filter.createUIString();

	chip.querySelector('#filtermenu').addEventListener('click', () => {
	const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
	menu.setAnchorMargin({ top: 25 });
	menu.open = true;
	});

	const check = chip.querySelector('input');
	check.checked = filter.enabled;
	check.addEventListener('change', () => {
	filter.enabled = !!check.checked;
	locallyStoreFilters();
	Player.instance.refresh();
	Filter.sendStreamFilters();
	});

	return chip;
	}

	function showCreateFilterPopup(anchor) {
	const filterUi = document.createElement('filter-ui');
	filterUi.addEventListener('saveFilter', (event) => {
	if (event.detail.selector && event.detail.action) {
	const filter =
	new Filter(true, event.detail.selector, event.detail.action);
	const chip = createFilterChip(filter);
	const list = document.querySelector('#filters');
	list.appendChild(chip);
	hideModal();
	refreshFilterSet();
	}
	});
	filterUi.style.position = 'absolute';
	filterUi.style.top = (anchor.offsetTop + anchor.offsetHeight) + 'px';
	filterUi.style.left = (anchor.offsetLeft + 20) + 'px';
	filterUi.style.zIndex = maxZIndex;

	showModal(filterUi, '#annotation');
	}

	// Traverses through all the filter chips and enables/disables
	// "move next/prev" button clickability depending on if
	// the chip is at the beginning/middle/end of list
	function refreshFilterSet() {
	const list = document.querySelector('#filters');
	for (var chip = list.firstElementChild;
	chip !== null; chip = chip.nextSibling) {
	if (chip === list.firstElementChild) {
	chip.querySelector('#filter-moveprev')
	.classList.add("mdc-list-item--disabled");
	}
	else {
	chip.querySelector('#filter-moveprev')
	.classList.remove("mdc-list-item--disabled");
	}
	if (chip.nextSibling === null) {
	chip.querySelector('#filter-movenext')
	.classList.add("mdc-list-item--disabled");
	}
	else {
	chip.querySelector('#filter-movenext')
	.classList.remove("mdc-list-item--disabled");
	}
	}
	locallyStoreFilters();
	Player.instance.refresh();
	Filter.sendStreamFilters();
	}

	function movePrev(item) {
	if (item.classList.contains("mdc-list-item--disabled")) {
	return;
	}
	var chip = item.closest(".mdc-chip");
	const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
	menu.open = false;
	var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
	Filter.swapFilters(index - 1, index);
	var prevChip = chip.previousElementSibling;
	chip.parentNode.insertBefore(chip, prevChip);
	refreshFilterSet();
	}

	function moveNext(item) {
	if (item.classList.contains("mdc-list-item--disabled")) {
	return;
	}
	var chip = item.closest(".mdc-chip");
	const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
	menu.open = false;
	var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
	Filter.swapFilters(index, index + 1);
	var nextChip = chip.nextElementSibling;
	chip.parentNode.insertBefore(nextChip, chip);
	refreshFilterSet();
	}

	function createFilterComplete(enabled, selector, action, index) {
	var newFilter =
	new Filter(enabled, selector, action, index);
	const newChip = createFilterChip(newFilter);
	const list = document.querySelector('#filters');
	list.appendChild(newChip);
	hideModal();
	refreshFilterSet();
	return newChip;
	}

	function showEditFilterPopup(item) {
	var chip = item.closest(".mdc-chip");
	var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
	var filter = Filter.getFilter(index);

	const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
	menu.open = false;

	const filterUi = document.createElement('filter-ui');
	const isEnabled = filter.enabled;
	filterUi.addEventListener('saveFilter', (event) => {
	if (event.detail.selector && event.detail.action) {
	var newChip = createFilterComplete(isEnabled, event.detail.selector,
	event.detail.action, index);
	chip.replaceWith(newChip);
	}
	});
	filterUi.style.position = 'absolute';
	filterUi.style.top = (chip.offsetTop + chip.offsetHeight) + 'px';
	filterUi.style.left = (chip.offsetLeft + 20) + 'px';
	filterUi.style.zIndex = maxZIndex;

	showModal(filterUi, '#annotation');

	// fill form from filter data
	filterUi.querySelector('#filter-ui-title').innerHTML = "Edit Filter";
	filterUi.querySelector('#filename').value = filter.file;
	filterUi.querySelector('#functionname').value = filter.func;
	filterUi.querySelector('#annotation').value = filter.anno;

	var actionform = filterUi.querySelector('#actionform');
	actionform.dowhat.value = !filter.shouldDraw ? 'skip' :
	filter.drawColor ? 'drawfilter' : 'drawcaller';
	actionform.drawcolor.value = filter.drawColor;
	actionform.fillalpha.value = filter.fillAlpha;
	}

	function deleteFilter(item) {
	var chip = item.closest(".mdc-chip");
	const menu = new MDCMenu(chip.querySelector('#filterchipmenu'));
	menu.open = false;
	var index = Array.prototype.indexOf.call(chip.parentNode.children, chip);
	Filter.deleteFilter(index);
	chip.parentNode.removeChild(chip);
	refreshFilterSet();
	}

	// Stores filter instances in local storage
	function locallyStoreFilters() {
	var filterInstances = Filter.instances;
	// Store string representation of filterInstances list in local storage.
	localStorage.setItem('filterInstances', JSON.stringify(filterInstances));
	}

	// Restores filter instances from local storage.
	function restoreFilters() {
	const retrievedFilterString = localStorage.getItem('filterInstances');
	console.log(" Filter string=" + retrievedFilterString);
	// Add default filters to the instances list.
	FilterUIDefault.initialize();

	if (!retrievedFilterString) {
	return;
	}

	var retrievedFilterInstances = JSON.parse(retrievedFilterString);
	// Remove any default filter duplicates from restored filters.
	for (const defaultFilter of defaultFilters) {
	retrievedFilterInstances = retrievedFilterInstances.filter
	(instance => !isDuplicate(instance, defaultFilter));
	}
	// Re-create non-default filter chips from local storage.
	// Pre-existing filters are appended behind the default ones.
	retrievedFilterInstances.forEach((instance) =>
	createFilterComplete(instance.enabled_,
	instance.selector_, instance.action_));
	}

	// Checks if one filter is a duplicate of another.
	// NOTE: Custom equality check needed to avoid marking same style
	// of filters with different user states and indices as non-duplicates.
	function isDuplicate(filter1, filter2) {
	if (!filter1 \|\| !filter2) {
	return false;
	}
	if (filter1.selector_.filename !== filter2.selector_.filename) {
	return false;
	}
	if (filter1.selector_.func !== filter2.selector_.func) {
	return false;
	}
	if (filter1.selector_.anno !== filter2.selector_.anno) {
	return false;
	}

	return true;
	}

	const defaultFilters = [
	{
	selector_: { filename: "", func: "", anno: "frame.render_pass.meta" },
	action_: { skipDraw: false },
	enabled_: false
	},
	{
	selector_: { filename: "", func: "", anno: "frame.render_pass.quad" },
	action_: { skipDraw: false, color: '#000000', alpha: "10" },
	enabled_: true
	},
	{
	selector_: { filename: "", func: "", anno: "frame.render_pass.damage" },
	action_: { skipDraw: false, color: '#FF0000', alpha: "20" },
	enabled_: true
	},
	{
	selector_: {
	filename: "",
	func: "",
	anno: "frame.render_pass.output_rect",
	},
	action_: { skipDraw: false },
	enabled_: false,
	},
	{
	selector_: { filename: "", func: "", anno: "overlay.selected.rect" },
	action_: { skipDraw: false, color: '#22FF22', alpha: "20" },
	enabled_: true
	},
	{
	selector_: { filename: "", func: "", anno: "overlay.outgoing.damage" },
	action_: { skipDraw: false, color: '#AA00AA', alpha: "20" },
	enabled_: true
	},
	{
	selector_: { filename: "", func: "", anno: "frame.render_pass.material" },
	action_: { skipDraw: false },
	enabled_: false
	}
	];


	// Default filters should probably load off disk.
	const FilterUIDefault = {
	initialize() {
	defaultFilters.forEach((instance) =>
	createFilterComplete(instance.enabled_,
	instance.selector_, instance.action_))
	}
	};