DevTools: Box-shadow editor initial implementation

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

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 1353 matching lines @@
         element.textElement.textContent = title;
         if (subtitle !== undefined) {
             element.subtitleElement = element.textElement.createChild("div", "dt-checkbox-subtitle");
             element.subtitleElement.textContent = subtitle;
         }
     }
     return element;
 }
 
 /**
+ * @return {!Element}
+ * @param {number} min
+ * @param {number} max
+ */
+function createSliderLabel(min, max)
+{
+    var element = createElement("label", "dt-slider");
+    element.sliderElement.min = min;
+    element.sliderElement.max = max;
+    element.sliderElement.step = 1;
+    return element;
+}
+
+/**
  * @param {!Node} node
  * @param {string} cssFile
  * @suppressGlobalPropertiesCheck
  */
 WebInspector.appendStyle = function(node, cssFile)
 {
     var content = Runtime.cachedResources[cssFile] || "";
     if (!content)
         console.error(cssFile + " not preloaded. Check module.json");
     var styleElement = createElement("style");
@@ skipping 129 matching lines @@
     });
 
     registerCustomElement("label", "dt-icon-label", {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/smallIcon.css");
             this._iconElement = root.createChild("div");
             root.createChild("content");

[dgozman, 2016/08/24 23:26:59]

Removed content in wrong element.

[flandy, 2016/08/25 00:17:47]

Sorry. Fixed.

         },
 
         /**
          * @param {string} type
          * @this {Element}
          */
         set type(type)
         {
             this._iconElement.className = type;
         },
 
         __proto__: HTMLLabelElement.prototype
     });
 
+    registerCustomElement("label", "dt-slider", {
+        /**
+         * @this {Element}
+         */
+        createdCallback: function()
+        {
+            var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/slider.css");
+            this.sliderElement = createElementWithClass("input", "dt-range-input");
+            this.sliderElement.type = "range";
+            root.createChild("content");

[dgozman, 2016/08/24 19:18:31]

You only need content if you append children (e.g. label) to the slider.

[flandy, 2016/08/24 22:08:41]

Removed.

+            root.appendChild(this.sliderElement);
+        },
+
+        /**
+         * @param {number} amount
+         * @this {Element}
+         */
+        set value(amount)
+        {
+            this.sliderElement.value = amount;
+        },
+
+        /**
+         * @this {Element}
+         */
+        get value()
+        {
+            return this.sliderElement.value;
+        },
+
+        __proto__: HTMLLabelElement.prototype
+    });
+
     registerCustomElement("div", "dt-close-button", {
         /**
          * @this {Element}
          */
         createdCallback: function()
         {
             var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/closeButton.css");
             this._buttonElement = root.createChild("div", "close-button");
         },
 
@@ skipping 388 matching lines @@
  * @param {string} title
  * @return {!Element}
  */
 WebInspector.linkifyDocumentationURLAsNode = function(article, title)
 {
     return WebInspector.linkifyURLAsNode("https://developers.google.com/web/tools/chrome-devtools/" + article, title, undefined, true);
 }
 
 /** @type {!WebInspector.ThemeSupport} */
 WebInspector.themeSupport;