[DevTools] Add UI.XElement to be used with UI.Fragment

It supports transforming attributes into css values.

Bug: none
Change-Id: I67c2b67807ceed0ad3d5872aa019d1e59ef3b724
Reviewed-on: https://chromium-review.googlesource.com/826129
Commit-Queue: Dmitry Gozman <dgozman@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#523960}

third_party/WebKit/Source/devtools/BUILD.gn

@@ -795,6 +795,7 @@ all_devtools_files = [
   "front_end/ui/View.js",
   "front_end/ui/viewContainers.css",
   "front_end/ui/Widget.js",
+  "front_end/ui/XElement.js",
   "front_end/ui/ZoomManager.js",
   "front_end/worker_service/ServiceDispatcher.js",
   "front_end/workspace/FileManager.js",

third_party/WebKit/Source/devtools/front_end/ui/XElement.js

+// Copyright 2017 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.
+
+/**
+ * @extends {HTMLElement}
+ */
+UI.XElement = class extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      'flex',       'padding',    'padding-top',   'padding-bottom', 'padding-left', 'padding-right',
+      'margin',     'margin-top', 'margin-bottom', 'margin-left',    'margin-right', 'overflow',
+      'overflow-x', 'overflow-y', 'font-size',     'color',          'background',   'background-color',
+      'border',     'border-top', 'border-bottom', 'border-left',    'border-right'
+    ];
+  }
+
+  /**
+   * @param {string} attr
+   * @param {?string} oldValue
+   * @param {?string} newValue
+   * @override
+   */
+  attributeChangedCallback(attr, oldValue, newValue) {
+    if (attr === 'flex') {
+      if (newValue === null)
+        this.style.removeProperty('flex');
+      else if (newValue === 'initial' || newValue === 'auto' || newValue === 'none' || newValue.indexOf(' ') !== -1)
+        this.style.setProperty('flex', newValue);
+      else
+        this.style.setProperty('flex', '0 0 ' + newValue);
+      return;
+    }
+    if (newValue === null) {
+      this.style.removeProperty(attr);
+      if (attr.startsWith('padding-') || attr.startsWith('margin-') || attr.startsWith('border-') ||
+          attr.startsWith('background-') || attr.startsWith('overflow-')) {
+        var shorthand = attr.substring(0, attr.indexOf('-'));
+        var shorthandValue = this.getAttribute(shorthand);
+        if (shorthandValue !== null)
+          this.style.setProperty(shorthand, shorthandValue);
+      }
+    } else {
+      this.style.setProperty(attr, newValue);
+    }
+  }
+};

third_party/WebKit/Source/devtools/front_end/ui/module.json

@@ -6,6 +6,7 @@
         "host"
     ],
     "scripts": [
+        "XElement.js",
         "Widget.js",
         "View.js",
         "treeoutline.js",