Migrate child element manipulation, innerHTML, classList, attributes,

tracing/tracing/ui/base/dom_helpers.html

Index: tracing/tracing/ui/base/dom_helpers.html
diff --git a/tracing/tracing/ui/base/dom_helpers.html b/tracing/tracing/ui/base/dom_helpers.html
index 8841c9b9448bfcdf3d69313d26e537083eba9c2e..78cdddaf945a0dde8e39e62593310044d6250eeb 100644
--- a/tracing/tracing/ui/base/dom_helpers.html
+++ b/tracing/tracing/ui/base/dom_helpers.html
@@ -68,7 +68,7 @@ tr.exportTo('tr.ui.b', function() {
   function createScopedStyle(styleContent) {
     var styleEl = document.createElement('style');
     styleEl.scoped = true;
-    styleEl.innerHTML = styleContent;
+    Polymer.dom(styleEl).innerHTML = styleContent;
     return styleEl;
   }
 
@@ -153,7 +153,7 @@ tr.exportTo('tr.ui.b', function() {
   function createEditCategorySpan(optionGroupEl, targetEl) {
     var spanEl = createSpan({className: 'edit-categories'});
     spanEl.textContent = 'Edit categories';
-    spanEl.classList.add('labeled-option');
+    Polymer.dom(spanEl).classList.add('labeled-option');
 
     spanEl.addEventListener('click', function() {
       targetEl.onClickEditCategories();
@@ -180,9 +180,9 @@ tr.exportTo('tr.ui.b', function() {
 
       var radioEl = document.createElement('input');
       radioEl.type = 'radio';
-      radioEl.setAttribute('id', id);
-      radioEl.setAttribute('name', 'category-presets-group');
-      radioEl.setAttribute('value', item.value);
+      Polymer.dom(radioEl).setAttribute('id', id);
+      Polymer.dom(radioEl).setAttribute('name', 'category-presets-group');
+      Polymer.dom(radioEl).setAttribute('value', item.value);
       radioEl.addEventListener('change', onChange.bind(radioEl, targetEl,
                                                        targetElProperty,
                                                        settingsKey));
@@ -191,7 +191,7 @@ tr.exportTo('tr.ui.b', function() {
 
       var labelEl = document.createElement('label');
       labelEl.textContent = item.label;
-      labelEl.setAttribute('for', id);
+      Polymer.dom(labelEl).setAttribute('for', id);
 
       var spanEl = createSpan({className: 'labeled-option'});
       Polymer.dom(spanEl).appendChild(radioEl);
@@ -218,7 +218,7 @@ tr.exportTo('tr.ui.b', function() {
     // 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');
+      Polymer.dom(optionGroupEl).classList.add('categories-expanded');
     targetEl[targetElProperty] = initialValue;
 
     return optionGroupEl;
@@ -249,11 +249,11 @@ tr.exportTo('tr.ui.b', function() {
     var id = '#checkbox-' + nextCheckboxId++;
 
     var spanEl = createSpan({className: 'labeled-checkbox'});
-    buttonEl.setAttribute('id', id);
+    Polymer.dom(buttonEl).setAttribute('id', id);
 
     var labelEl = document.createElement('label');
     labelEl.textContent = label;
-    labelEl.setAttribute('for', id);
+    Polymer.dom(labelEl).setAttribute('for', id);
     Polymer.dom(spanEl).appendChild(buttonEl);
     Polymer.dom(spanEl).appendChild(labelEl);
 
@@ -305,8 +305,8 @@ tr.exportTo('tr.ui.b', function() {
 
   function isElementAttachedToDocument(el) {
     var cur = el;
-    while (cur.parentNode)
-      cur = cur.parentNode;
+    while (Polymer.dom(cur).parentNode)
+      cur = Polymer.dom(cur).parentNode;
     return (cur === el.ownerDocument || cur.nodeName === '#document-fragment');
   }