catapult/tracing/tracing/ui/base/dom_helpers.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright (c) 2014 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->

 <link rel="import" href="/tracing/base/settings.html">
 <link rel="import" href="/tracing/ui/base/ui.html">

 <style>
 * /deep/ .labeled-checkbox {
   display: flex;
   white-space: nowrap;
 }
 </style>

 <script>
 'use strict';

 tr.exportTo('tr.ui.b', function() {

   function createSpan(opt_dictionary) {
     var ownerDocument = document;
     if (opt_dictionary && opt_dictionary.ownerDocument)
       ownerDocument = opt_dictionary.ownerDocument;
     var spanEl = ownerDocument.createElement('span');
     if (opt_dictionary) {
       if (opt_dictionary.className)
         spanEl.className = opt_dictionary.className;
       if (opt_dictionary.textContent)
         spanEl.textContent = opt_dictionary.textContent;
       if (opt_dictionary.tooltip)
         spanEl.title = opt_dictionary.tooltip;
       if (opt_dictionary.parent)
         opt_dictionary.parent.appendChild(spanEl);
       if (opt_dictionary.bold)
         spanEl.style.fontWeight = 'bold';
       if (opt_dictionary.italic)
         spanEl.style.fontStyle = 'italic';
       if (opt_dictionary.marginLeft)
         spanEl.style.marginLeft = opt_dictionary.marginLeft;
       if (opt_dictionary.marginRight)
         spanEl.style.marginRight = opt_dictionary.marginRight;
       if (opt_dictionary.backgroundColor)
         spanEl.style.backgroundColor = opt_dictionary.backgroundColor;
       if (opt_dictionary.color)
         spanEl.style.color = opt_dictionary.color;
     }
     return spanEl;
   };

   function createDiv(opt_dictionary) {
     var divEl = document.createElement('div');
     if (opt_dictionary) {
       if (opt_dictionary.className)
         divEl.className = opt_dictionary.className;
       if (opt_dictionary.parent)
         opt_dictionary.parent.appendChild(divEl);
       if (opt_dictionary.textContent)
         divEl.textContent = opt_dictionary.textContent;
       if (opt_dictionary.maxWidth)
         divEl.style.maxWidth = opt_dictionary.maxWidth;
     }
     return divEl;
   };

   function createScopedStyle(styleContent) {
     var styleEl = document.createElement('style');
     styleEl.scoped = true;
     styleEl.innerHTML = styleContent;
     return styleEl;
   }

   function valuesEqual(a, b) {
     if (a instanceof Array && b instanceof Array)
       return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
     return a === b;
   }

   function createSelector(
       targetEl, targetElProperty,
       settingsKey, defaultValue,
       items, opt_namespace) {
     var defaultValueIndex;
     for (var i = 0; i < items.length; i++) {
       var item = items[i];
       if (valuesEqual(item.value, defaultValue)) {
         defaultValueIndex = i;
         break;
       }
     }
     if (defaultValueIndex === undefined)
       throw new Error('defaultValue must be in the items list');

     var selectorEl = document.createElement('select');
     selectorEl.addEventListener('change', onChange);
     for (var i = 0; i < items.length; i++) {
       var item = items[i];
       var optionEl = document.createElement('option');
       optionEl.textContent = item.label;
       optionEl.targetPropertyValue = item.value;
       optionEl.item = item;
       selectorEl.appendChild(optionEl);
     }
     function onChange(e) {
       var value = selectorEl.selectedOptions[0].targetPropertyValue;
       tr.b.Settings.set(settingsKey, value, opt_namespace);
       targetEl[targetElProperty] = value;
     }
     var oldSetter = targetEl.__lookupSetter__('selectedIndex');
     selectorEl.__defineGetter__('selectedValue', function(v) {
       return selectorEl.children[selectorEl.selectedIndex].targetPropertyValue;
     });
     selectorEl.__defineGetter__('selectedItem', function(v) {
       return selectorEl.children[selectorEl.selectedIndex].item;
     });
     selectorEl.__defineSetter__('selectedValue', function(v) {
       for (var i = 0; i < selectorEl.children.length; i++) {
         var value = selectorEl.children[i].targetPropertyValue;
         if (valuesEqual(value, v)) {
           var changed = selectorEl.selectedIndex != i;
           if (changed) {
             selectorEl.selectedIndex = i;
             onChange();
           }
           return;
         }
       }
       throw new Error('Not a valid value');
     });

     var initialValue = tr.b.Settings.get(
         settingsKey, defaultValue, opt_namespace);
     var didSet = false;
     for (var i = 0; i < selectorEl.children.length; i++) {
       if (valuesEqual(selectorEl.children[i].targetPropertyValue,
           initialValue)) {
         didSet = true;
         targetEl[targetElProperty] = initialValue;
         selectorEl.selectedIndex = i;
         break;
       }
     }
     if (!didSet) {
       selectorEl.selectedIndex = defaultValueIndex;
       targetEl[targetElProperty] = defaultValue;
     }

     return selectorEl;
   }

   function createEditCategorySpan(optionGroupEl, targetEl) {
     var spanEl = createSpan({className: 'edit-categories'});
     spanEl.textContent = 'Edit categories';
     spanEl.classList.add('labeled-option');

     spanEl.addEventListener('click', function() {
       targetEl.onClickEditCategories();
     });
     return spanEl;
   }

   function createOptionGroup(targetEl, targetElProperty,
                              settingsKey, defaultValue,
                              items) {
     function onChange() {
       var value = [];
       if (this.value.length)
         value = this.value.split(',');
       tr.b.Settings.set(settingsKey, value);
       targetEl[targetElProperty] = value;
     }

     var optionGroupEl = createSpan({className: 'labeled-option-group'});
     var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
     for (var i = 0; i < items.length; ++i) {
       var item = items[i];
       var id = 'category-preset-' + item.label.replace(/ /g, '-');

       var radioEl = document.createElement('input');
       radioEl.type = 'radio';
       radioEl.setAttribute('id', id);
       radioEl.setAttribute('name', 'category-presets-group');
       radioEl.setAttribute('value', item.value);
       radioEl.addEventListener('change', onChange.bind(radioEl, targetEl,
                                                        targetElProperty,
                                                        settingsKey));
       if (valuesEqual(initialValue, item.value))
         radioEl.checked = true;

       var labelEl = document.createElement('label');
       labelEl.textContent = item.label;
       labelEl.setAttribute('for', id);

       var spanEl = createSpan({className: 'labeled-option'});
       spanEl.appendChild(radioEl);
       spanEl.appendChild(labelEl);

       spanEl.__defineSetter__('checked', function(opt_bool) {
         var changed = radioEl.checked !== (!!opt_bool);
         if (!changed)
           return;

         radioEl.checked = !!opt_bool;
         onChange();
       });
       spanEl.__defineGetter__('checked', function() {
         return radioEl.checked;
       });

       optionGroupEl.appendChild(spanEl);
     }
     optionGroupEl.appendChild(createEditCategorySpan(optionGroupEl, targetEl));
     // Since this option group element is not yet added to the tree,
     // querySelector will fail during updateEditCategoriesStatus_ call.
     // Hence, creating the element with the 'expanded' classlist category
     // added, if last selected value was 'Manual' selection.
     if (!initialValue.length)
       optionGroupEl.classList.add('categories-expanded');
     targetEl[targetElProperty] = initialValue;

     return optionGroupEl;
   }

   var nextCheckboxId = 1;
   function createCheckBox(targetEl, targetElProperty,
                           settingsKey, defaultValue,
                           label, opt_changeCb) {
     var buttonEl = document.createElement('input');
     buttonEl.type = 'checkbox';

     var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
     buttonEl.checked = !!initialValue;
     if (targetEl)
       targetEl[targetElProperty] = initialValue;

     function onChange() {
       tr.b.Settings.set(settingsKey, buttonEl.checked);
       if (targetEl)
         targetEl[targetElProperty] = buttonEl.checked;
       if (opt_changeCb)
         opt_changeCb.call();
     }

     buttonEl.addEventListener('change', onChange);

     var id = '#checkbox-' + nextCheckboxId++;

     var spanEl = createSpan({className: 'labeled-checkbox'});
     buttonEl.setAttribute('id', id);

     var labelEl = document.createElement('label');
     labelEl.textContent = label;
     labelEl.setAttribute('for', id);
     spanEl.appendChild(buttonEl);
     spanEl.appendChild(labelEl);

     spanEl.__defineSetter__('checked', function(opt_bool) {
       var changed = buttonEl.checked !== (!!opt_bool);
       if (!changed)
         return;

       buttonEl.checked = !!opt_bool;
       onChange();
     });
     spanEl.__defineGetter__('checked', function() {
       return buttonEl.checked;
     });

     return spanEl;
   }

   function createButton(targetEl, targetElProperty, label, opt_changeCb) {
     var buttonEl = document.createElement('input');
     buttonEl.type = 'button';

     function onClick() {
       if (opt_changeCb)
         opt_changeCb.call();
     }

     buttonEl.addEventListener('click', onClick);
     buttonEl.value = label;

     return buttonEl;
   }

   function createTextInput(
       targetEl, targetElProperty, settingsKey, defaultValue) {
     var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
     var el = document.createElement('input');
     el.type = 'text';
     function onChange(e) {
       tr.b.Settings.set(settingsKey, el.value);
       targetEl[targetElProperty] = el.value;
     }
     el.addEventListener('input', onChange);
     el.value = initialValue;
     targetEl[targetElProperty] = initialValue;

     return el;
   }

   function isElementAttachedToDocument(el) {
     var cur = el;
     while (cur.parentNode)
       cur = cur.parentNode;
     return (cur === el.ownerDocument || cur.nodeName === '#document-fragment');
   }

   function asHTMLOrTextNode(value, opt_ownerDocument) {
     if (value instanceof Node)
       return value;
     var ownerDocument = opt_ownerDocument || document;
     return ownerDocument.createTextNode(value);
   }

   return {
     createSpan: createSpan,
     createDiv: createDiv,
     createScopedStyle: createScopedStyle,
     createSelector: createSelector,
     createOptionGroup: createOptionGroup,
     createCheckBox: createCheckBox,
     createButton: createButton,
     createTextInput: createTextInput,
     isElementAttachedToDocument: isElementAttachedToDocument,
     asHTMLOrTextNode: asHTMLOrTextNode
   };
 });
 </script>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2014 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->

	<link rel="import" href="/tracing/base/settings.html">
	<link rel="import" href="/tracing/ui/base/ui.html">

	<style>
	* /deep/ .labeled-checkbox {
	display: flex;
	white-space: nowrap;
	}
	</style>

	<script>
	'use strict';

	tr.exportTo('tr.ui.b', function() {

	function createSpan(opt_dictionary) {
	var ownerDocument = document;
	if (opt_dictionary && opt_dictionary.ownerDocument)
	ownerDocument = opt_dictionary.ownerDocument;
	var spanEl = ownerDocument.createElement('span');
	if (opt_dictionary) {
	if (opt_dictionary.className)
	spanEl.className = opt_dictionary.className;
	if (opt_dictionary.textContent)
	spanEl.textContent = opt_dictionary.textContent;
	if (opt_dictionary.tooltip)
	spanEl.title = opt_dictionary.tooltip;
	if (opt_dictionary.parent)
	opt_dictionary.parent.appendChild(spanEl);
	if (opt_dictionary.bold)
	spanEl.style.fontWeight = 'bold';
	if (opt_dictionary.italic)
	spanEl.style.fontStyle = 'italic';
	if (opt_dictionary.marginLeft)
	spanEl.style.marginLeft = opt_dictionary.marginLeft;
	if (opt_dictionary.marginRight)
	spanEl.style.marginRight = opt_dictionary.marginRight;
	if (opt_dictionary.backgroundColor)
	spanEl.style.backgroundColor = opt_dictionary.backgroundColor;
	if (opt_dictionary.color)
	spanEl.style.color = opt_dictionary.color;
	}
	return spanEl;
	};

	function createDiv(opt_dictionary) {
	var divEl = document.createElement('div');
	if (opt_dictionary) {
	if (opt_dictionary.className)
	divEl.className = opt_dictionary.className;
	if (opt_dictionary.parent)
	opt_dictionary.parent.appendChild(divEl);
	if (opt_dictionary.textContent)
	divEl.textContent = opt_dictionary.textContent;
	if (opt_dictionary.maxWidth)
	divEl.style.maxWidth = opt_dictionary.maxWidth;
	}
	return divEl;
	};

	function createScopedStyle(styleContent) {
	var styleEl = document.createElement('style');
	styleEl.scoped = true;
	styleEl.innerHTML = styleContent;
	return styleEl;
	}

	function valuesEqual(a, b) {
	if (a instanceof Array && b instanceof Array)
	return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
	return a === b;
	}

	function createSelector(
	targetEl, targetElProperty,
	settingsKey, defaultValue,
	items, opt_namespace) {
	var defaultValueIndex;
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	if (valuesEqual(item.value, defaultValue)) {
	defaultValueIndex = i;
	break;
	}
	}
	if (defaultValueIndex === undefined)
	throw new Error('defaultValue must be in the items list');

	var selectorEl = document.createElement('select');
	selectorEl.addEventListener('change', onChange);
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	var optionEl = document.createElement('option');
	optionEl.textContent = item.label;
	optionEl.targetPropertyValue = item.value;
	optionEl.item = item;
	selectorEl.appendChild(optionEl);
	}
	function onChange(e) {
	var value = selectorEl.selectedOptions[0].targetPropertyValue;
	tr.b.Settings.set(settingsKey, value, opt_namespace);
	targetEl[targetElProperty] = value;
	}
	var oldSetter = targetEl.__lookupSetter__('selectedIndex');
	selectorEl.__defineGetter__('selectedValue', function(v) {
	return selectorEl.children[selectorEl.selectedIndex].targetPropertyValue;
	});
	selectorEl.__defineGetter__('selectedItem', function(v) {
	return selectorEl.children[selectorEl.selectedIndex].item;
	});
	selectorEl.__defineSetter__('selectedValue', function(v) {
	for (var i = 0; i < selectorEl.children.length; i++) {
	var value = selectorEl.children[i].targetPropertyValue;
	if (valuesEqual(value, v)) {
	var changed = selectorEl.selectedIndex != i;
	if (changed) {
	selectorEl.selectedIndex = i;
	onChange();
	}
	return;
	}
	}
	throw new Error('Not a valid value');
	});

	var initialValue = tr.b.Settings.get(
	settingsKey, defaultValue, opt_namespace);
	var didSet = false;
	for (var i = 0; i < selectorEl.children.length; i++) {
	if (valuesEqual(selectorEl.children[i].targetPropertyValue,
	initialValue)) {
	didSet = true;
	targetEl[targetElProperty] = initialValue;
	selectorEl.selectedIndex = i;
	break;
	}
	}
	if (!didSet) {
	selectorEl.selectedIndex = defaultValueIndex;
	targetEl[targetElProperty] = defaultValue;
	}

	return selectorEl;
	}

	function createEditCategorySpan(optionGroupEl, targetEl) {
	var spanEl = createSpan({className: 'edit-categories'});
	spanEl.textContent = 'Edit categories';
	spanEl.classList.add('labeled-option');

	spanEl.addEventListener('click', function() {
	targetEl.onClickEditCategories();
	});
	return spanEl;
	}

	function createOptionGroup(targetEl, targetElProperty,
	settingsKey, defaultValue,
	items) {
	function onChange() {
	var value = [];
	if (this.value.length)
	value = this.value.split(',');
	tr.b.Settings.set(settingsKey, value);
	targetEl[targetElProperty] = value;
	}

	var optionGroupEl = createSpan({className: 'labeled-option-group'});
	var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
	for (var i = 0; i < items.length; ++i) {
	var item = items[i];
	var id = 'category-preset-' + item.label.replace(/ /g, '-');

	var radioEl = document.createElement('input');
	radioEl.type = 'radio';
	radioEl.setAttribute('id', id);
	radioEl.setAttribute('name', 'category-presets-group');
	radioEl.setAttribute('value', item.value);
	radioEl.addEventListener('change', onChange.bind(radioEl, targetEl,
	targetElProperty,
	settingsKey));
	if (valuesEqual(initialValue, item.value))
	radioEl.checked = true;

	var labelEl = document.createElement('label');
	labelEl.textContent = item.label;
	labelEl.setAttribute('for', id);

	var spanEl = createSpan({className: 'labeled-option'});
	spanEl.appendChild(radioEl);
	spanEl.appendChild(labelEl);

	spanEl.__defineSetter__('checked', function(opt_bool) {
	var changed = radioEl.checked !== (!!opt_bool);
	if (!changed)
	return;

	radioEl.checked = !!opt_bool;
	onChange();
	});
	spanEl.__defineGetter__('checked', function() {
	return radioEl.checked;
	});

	optionGroupEl.appendChild(spanEl);
	}
	optionGroupEl.appendChild(createEditCategorySpan(optionGroupEl, targetEl));
	// Since this option group element is not yet added to the tree,
	// querySelector will fail during updateEditCategoriesStatus_ call.
	// Hence, creating the element with the 'expanded' classlist category
	// added, if last selected value was 'Manual' selection.
	if (!initialValue.length)
	optionGroupEl.classList.add('categories-expanded');
	targetEl[targetElProperty] = initialValue;

	return optionGroupEl;
	}

	var nextCheckboxId = 1;
	function createCheckBox(targetEl, targetElProperty,
	settingsKey, defaultValue,
	label, opt_changeCb) {
	var buttonEl = document.createElement('input');
	buttonEl.type = 'checkbox';

	var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
	buttonEl.checked = !!initialValue;
	if (targetEl)
	targetEl[targetElProperty] = initialValue;

	function onChange() {
	tr.b.Settings.set(settingsKey, buttonEl.checked);
	if (targetEl)
	targetEl[targetElProperty] = buttonEl.checked;
	if (opt_changeCb)
	opt_changeCb.call();
	}

	buttonEl.addEventListener('change', onChange);

	var id = '#checkbox-' + nextCheckboxId++;

	var spanEl = createSpan({className: 'labeled-checkbox'});
	buttonEl.setAttribute('id', id);

	var labelEl = document.createElement('label');
	labelEl.textContent = label;
	labelEl.setAttribute('for', id);
	spanEl.appendChild(buttonEl);
	spanEl.appendChild(labelEl);

	spanEl.__defineSetter__('checked', function(opt_bool) {
	var changed = buttonEl.checked !== (!!opt_bool);
	if (!changed)
	return;

	buttonEl.checked = !!opt_bool;
	onChange();
	});
	spanEl.__defineGetter__('checked', function() {
	return buttonEl.checked;
	});

	return spanEl;
	}

	function createButton(targetEl, targetElProperty, label, opt_changeCb) {
	var buttonEl = document.createElement('input');
	buttonEl.type = 'button';

	function onClick() {
	if (opt_changeCb)
	opt_changeCb.call();
	}

	buttonEl.addEventListener('click', onClick);
	buttonEl.value = label;

	return buttonEl;
	}

	function createTextInput(
	targetEl, targetElProperty, settingsKey, defaultValue) {
	var initialValue = tr.b.Settings.get(settingsKey, defaultValue);
	var el = document.createElement('input');
	el.type = 'text';
	function onChange(e) {
	tr.b.Settings.set(settingsKey, el.value);
	targetEl[targetElProperty] = el.value;
	}
	el.addEventListener('input', onChange);
	el.value = initialValue;
	targetEl[targetElProperty] = initialValue;

	return el;
	}

	function isElementAttachedToDocument(el) {
	var cur = el;
	while (cur.parentNode)
	cur = cur.parentNode;
	return (cur === el.ownerDocument \|\| cur.nodeName === '#document-fragment');
	}

	function asHTMLOrTextNode(value, opt_ownerDocument) {
	if (value instanceof Node)
	return value;
	var ownerDocument = opt_ownerDocument \|\| document;
	return ownerDocument.createTextNode(value);
	}

	return {
	createSpan: createSpan,
	createDiv: createDiv,
	createScopedStyle: createScopedStyle,
	createSelector: createSelector,
	createOptionGroup: createOptionGroup,
	createCheckBox: createCheckBox,
	createButton: createButton,
	createTextInput: createTextInput,
	isElementAttachedToDocument: isElementAttachedToDocument,
	asHTMLOrTextNode: asHTMLOrTextNode
	};
	});
	</script>