Source/WebCore/ChangeLog

 12011-11-18 bgrins <briangrinstead@gmail.com>
 2
 3 first commit for colorpicker functionality
 4
 5 Web Inspector: Add colorpicker functionality to color swatches in Styles Sidebar
 6 https://bugs.webkit.org/show_bug.cgi?id=71262
 7
 8 Reviewed by NOBODY (OOPS!).
 9
 10 No new tests. (OOPS!)
 11
 12 * inspector/front-end/Color.js:
 13 (WebInspector.Color.fromRGB):
 14 * inspector/front-end/Spectrum.js: Added.
 15 (WebInspector.Spectrum.hueDrag):
 16 (WebInspector.Spectrum.colorDrag):
 17 (WebInspector.Spectrum.alphaDrag):
 18 (WebInspector.Spectrum):
 19 (WebInspector.Spectrum.hsvToRgb):
 20 (WebInspector.Spectrum.rgbToHsv):
 21 (WebInspector.Spectrum.stopPropagation):
 22 (WebInspector.Spectrum.addEvent):
 23 (WebInspector.Spectrum.removeEvent):
 24 (WebInspector.Spectrum.getOffset):
 25 (WebInspector.Spectrum.getScrollOffset):
 26 (WebInspector.Spectrum.draggable.onstart):
 27 (WebInspector.Spectrum.draggable.onstop):
 28 (WebInspector.Spectrum.draggable.var):
 29 (WebInspector.Spectrum.draggable.prevent):
 30 (WebInspector.Spectrum.draggable.move):
 31 (WebInspector.Spectrum.draggable.start):
 32 (WebInspector.Spectrum.draggable.stop):
 33 (WebInspector.Spectrum.draggable):
 34 (WebInspector.Spectrum.prototype.set rgb):
 35 (WebInspector.Spectrum.prototype.get rgb):
 36 (WebInspector.Spectrum.prototype.get rgbNoSatVal):
 37 (WebInspector.Spectrum.prototype.onchange):
 38 (WebInspector.Spectrum.prototype._onchange):
 39 (WebInspector.Spectrum.prototype.updateHelperLocations):
 40 (WebInspector.Spectrum.prototype.updateUI):
 41 (WebInspector.Spectrum.prototype.toggle):
 42 (WebInspector.Spectrum.prototype.show):
 43 (WebInspector.Spectrum.prototype.hide):
 44 (WebInspector.Spectrum.prototype._onhide):
 45 (WebInspector.Spectrum.prototype.addChangeListener):
 46 (WebInspector.Spectrum.prototype.addHideListener):
 47 * inspector/front-end/StylesSidebarPane.js:
 48 (WebInspector.StylePropertyTreeElement.prototype.updateTitle.):
 49 * inspector/front-end/inspector.css:
 50 (.sp-container):
 51 (.sp-container.sp-flat):
 52 (.sp-container.sp-show):
 53 (.sp-top):
 54 (.sp-top-inner):
 55 (.sp-color):
 56 (.sp-hue):
 57 (.sp-fill):
 58 (.sp-sat, .sp-val):
 59 (.sp-range-container):
 60 (.sp-range-container input):
 61 (.sp-range-container div):
 62 (.swatch-inner):
 63 (.swatch, .sp-dragger, .sp-slider):
 64 (.sp-sat):
 65 (.sp-val):
 66 (.sp-dragger):
 67 (.sp-slider):
 68 * inspector/front-end/inspector.html:
 69
1702011-11-09 Simon Hausmann <simon.hausmann@nokia.com>
271
372 [Qt] Unreviewed, adding missing files to the build.

Source/WebCore/inspector/front-end/Color.js

@@WebInspector.Color.fromRGBA = function(r, g, b, a)
4343{
4444 return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
4545}
 46WebInspector.Color.fromRGB = function(r, g, b)
 47{
 48 return new WebInspector.Color("rgb(" + r + "," + g + "," + b + ")");
 49}
4650
4751WebInspector.Color.prototype = {
4852 get shorthex()

Source/WebCore/inspector/front-end/Spectrum.js

 1
 2WebInspector.Spectrum = function(swatch, rgb)
 3{
 4 this.document = swatch.ownerDocument;
 5 this.swatch = swatch;
 6 this.element = this.document.createElement('div');
 7 this.element.className = "sp-container";
 8 this.element.innerHTML = WebInspector.Spectrum.markup;
 9 this.element.addEventListener("click", WebInspector.Spectrum.stopPropagation, false);
 10
 11 this.swatchInner = this.document.createElement('span');
 12 this.swatchInner.className = 'swatch-inner';
 13 this.swatch.appendChild(this.swatchInner);
 14 this.swatch.parentNode.insertBefore( this.element, swatch.nextSibling );
 15
 16 this.slider = this.element.querySelectorAll(".sp-hue")[0];
 17 this.slideHelper = this.element.querySelectorAll(".sp-slider")[0];
 18 this.dragger = this.element.querySelectorAll(".sp-color")[0];
 19 this.dragHelper = this.element.querySelectorAll(".sp-dragger")[0];
 20 this.rangeSlider = this.element.querySelectorAll(".sp-range")[0];
 21 this.button = this.element.querySelectorAll(".sp-range-container div")[0];
 22
 23 WebInspector.Spectrum.draggable(this.slider, hueDrag.bind(this));
 24 WebInspector.Spectrum.draggable(this.dragger, colorDrag.bind(this));
 25
 26 this.rangeSlider.addEventListener("change", alphaDrag.bind(this), false);
 27 this.button.addEventListener("click", this.hide.bind(this), false);
 28
 29 if (rgb) {
 30 this.rgb = rgb;
 31 this.updateUI();
 32 }
 33
 34 function hueDrag(dragX, dragY)
 35 {
 36 this.hsv[0] = (dragY / this.slideHeight);
 37
 38 this.updateUI();
 39 this.onchange();
 40 }
 41
 42 function colorDrag(dragX, dragY)
 43 {
 44 this.hsv[1] = dragX / this.dragWidth;
 45 this.hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
 46
 47 this.updateUI();
 48 this.onchange();
 49 }
 50
 51 function alphaDrag()
 52 {
 53 this.hsv[3] = this.rangeSlider.value / 100;
 54
 55 this.updateUI();
 56 this.onchange();
 57 }
 58}
 59
 60WebInspector.Spectrum.markup = [
 61 "<div class='sp-top'>",
 62 "<div class='sp-fill'></div>",
 63 "<div class='sp-top-inner'>",
 64 "<div class='sp-color'>",
 65 "<div class='sp-sat'>",
 66 "<div class='sp-val'>",
 67 "<div class='sp-dragger'></div>",
 68 "</div>",
 69 "</div>",
 70 "</div>",
 71 "<div class='sp-hue'>",
 72 "<div class='sp-slider'></div>",
 73 "</div>",
 74 "</div>",
 75 "</div>",
 76 "<div class='sp-range-container'>",
 77 "<input type='range' class='sp-range' min='0' max='100' />",
 78 "<div></div>",
 79 "</div>"
 80].join('');
 81
 82WebInspector.Spectrum.hsvToRgb = function(h, s, v, a) {
 83
 84 var r, g, b;
 85
 86 var i = Math.floor(h * 6);
 87 var f = h * 6 - i;
 88 var p = v * (1 - s);
 89 var q = v * (1 - f * s);
 90 var t = v * (1 - (1 - f) * s);
 91
 92 switch(i % 6) {
 93 case 0:
 94 r = v, g = t, b = p;
 95 break;
 96 case 1:
 97 r = q, g = v, b = p;
 98 break;
 99 case 2:
 100 r = p, g = v, b = t;
 101 break;
 102 case 3:
 103 r = p, g = q, b = v;
 104 break;
 105 case 4:
 106 r = t, g = p, b = v;
 107 break;
 108 case 5:
 109 r = v, g = p, b = q;
 110 break;
 111 }
 112
 113 return [r * 255, g * 255, b * 255, a];
 114};
 115
 116WebInspector.Spectrum.rgbToHsv = function(r, g, b, a) {
 117
 118 r = r / 255;
 119 g = g / 255;
 120 b = b / 255;
 121
 122 var max = Math.max(r, g, b), min = Math.min(r, g, b);
 123 var h, s, v = max;
 124
 125 var d = max - min;
 126 s = max == 0 ? 0 : d / max;
 127
 128 if(max == min) {
 129 // achromatic
 130 h = 0;
 131 }
 132 else {
 133 switch(max) {
 134 case r:
 135 h = (g - b) / d + (g < b ? 6 : 0);
 136 break;
 137 case g:
 138 h = (b - r) / d + 2;
 139 break;
 140 case b:
 141 h = (r - g) / d + 4;
 142 break;
 143 }
 144 h /= 6;
 145 }
 146 return [h, s, v, a];
 147};
 148
 149WebInspector.Spectrum.stopPropagation = function(e) {
 150 e.stopPropagation();
 151};
 152
 153WebInspector.Spectrum.addEvent = function (el, name, cb) {
 154 if (typeof name === "object") {
 155 for (var i in name) {
 156 el.addEventListener(i, name[i], false);
 157 }
 158 }
 159 else {
 160 el.addEventListener(name, cb, false);
 161 }
 162};
 163
 164 WebInspector.Spectrum.removeEvent = function(el, name, cb) {
 165 if (typeof name === "object") {
 166 for (var i in name) {
 167 el.removeEventListener(i, name[i], false);
 168 }
 169 }
 170 else {
 171 el.removeEventListener(name, cb, false);
 172 }
 173};
 174
 175WebInspector.Spectrum.getOffset = function(el) {
 176 return { left: el.totalOffsetLeft(), top: el.totalOffsetTop() };
 177};
 178
 179WebInspector.Spectrum.getScrollOffset = function(el) {
 180 var curleft = curtop = 0;
 181 if (el.offsetParent) {
 182 do {
 183 curleft += el.scrollLeft;
 184 curtop += el.scrollTop;
 185 } while (el = el.offsetParent);
 186 }
 187 return { left: curleft, top: curtop };
 188};
 189
 190WebInspector.Spectrum.draggable = function(element, onmove, onstart, onstop) {
 191
 192 onmove = onmove || function() { };
 193 onstart = onstart || function() { };
 194 onstop = onstop || function() { };
 195
 196 var doc = element.ownerDocument || document;
 197 var dragging = false;
 198 var offset = { };
 199 var maxHeight = 0;
 200 var maxWidth = 0;
 201
 202 var duringDragEvents = { };
 203 duringDragEvents["selectstart"] = prevent;
 204 duringDragEvents["dragstart"] = prevent;
 205 duringDragEvents["mousemove"] = move;
 206 duringDragEvents["mouseup"] = stop;
 207
 208 function prevent(e)
 209 {
 210 if (e.stopPropagation)
 211 e.stopPropagation();
 212
 213 if (e.preventDefault)
 214 e.preventDefault();
 215
 216 e.returnValue = false;
 217 }
 218
 219 function move(e)
 220 {
 221 if (dragging) {
 222 var dragX = Math.max(0, Math.min(e.pageX - offset.left + scrollOffset.left, maxWidth));
 223 var dragY = Math.max(0, Math.min(e.pageY - offset.top + scrollOffset.top, maxHeight));
 224 onmove.apply(element, [dragX, dragY]);
 225 }
 226 }
 227
 228 function start(e)
 229 {
 230 var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
 231
 232 if (!rightclick && !dragging) {
 233 if (onstart.apply(element, arguments) !== false) {
 234 dragging = true;
 235 maxHeight = element.clientHeight;
 236 maxWidth = element.clientWidth;
 237
 238 scrollOffset = WebInspector.Spectrum.getScrollOffset(element);
 239 offset = WebInspector.Spectrum.getOffset(element);
 240
 241 WebInspector.Spectrum.addEvent(doc, duringDragEvents);
 242
 243 prevent(e);
 244 }
 245 }
 246 }
 247
 248 function stop()
 249 {
 250 if (dragging) {
 251 WebInspector.Spectrum.removeEvent(doc, duringDragEvents);
 252 onstop.apply(element, arguments);
 253 }
 254 dragging = false;
 255 }
 256
 257 WebInspector.Spectrum.addEvent(element, "mousedown", start);
 258};
 259
 260WebInspector.Spectrum.prototype = {
 261 set rgb(color)
 262 {
 263 if (color.length < 4) {
 264 color[3] = 1;
 265 }
 266 this.hsv = WebInspector.Spectrum.rgbToHsv(color[0], color[1], color[2], color[3]);
 267 },
 268
 269 get rgb()
 270 {
 271 var rgb = WebInspector.Spectrum.hsvToRgb(this.hsv[0], this.hsv[1], this.hsv[2], this.hsv[3]);
 272 return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), rgb[3]];
 273 },
 274
 275 get rgbNoSatVal()
 276 {
 277 var rgb = WebInspector.Spectrum.hsvToRgb(this.hsv[0], 1, 1);
 278 return [Math.round(rgb[0]), Math.round(rgb[1]), Math.round(rgb[2]), rgb[3]];
 279 },
 280
 281 onchange: function() {
 282 this._onchange(this.rgb);
 283 },
 284
 285 _onchange: function() {
 286
 287 },
 288
 289
 290 updateHelperLocations: function() {
 291
 292 var h = this.hsv[0];
 293 var s = this.hsv[1];
 294 var v = this.hsv[2];
 295
 296 // Where to show the little circle in that displays your current selected color
 297 var dragX = s * this.dragWidth;
 298 var dragY = this.dragHeight - (v * this.dragHeight);
 299
 300 dragX = Math.max(
 301 -this.dragHelperHeight,
 302 Math.min(this.dragWidth - this.dragHelperHeight, dragX - this.dragHelperHeight)
 303 );
 304 dragY = Math.max(
 305 -this.dragHelperHeight,
 306 Math.min(this.dragHeight - this.dragHelperHeight, dragY - this.dragHelperHeight)
 307 );
 308
 309 this.dragHelper.positionAt(dragX, dragY);
 310
 311 // Where to show the bar that displays your current selected hue
 312 var slideY = (h * this.slideHeight) - this.slideHelperHeight;
 313 this.slideHelper.style.top = slideY + "px";
 314
 315
 316 this.rangeSlider.value = this.hsv[3] * 100;
 317 },
 318
 319 updateUI: function() {
 320
 321 this.updateHelperLocations();
 322
 323 var rgb = this.rgb;
 324 var rgbNoSatVal = this.rgbNoSatVal;
 325
 326 var flatColor = "rgb(" + rgbNoSatVal[0] + ", " + rgbNoSatVal[1] + ", " + rgbNoSatVal[2] + ")";
 327 var fullColor = "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " + rgb[3] + ")";
 328
 329 this.dragger.style.backgroundColor = flatColor;
 330 this.swatchInner.style.backgroundColor = fullColor;
 331
 332 this.rangeSlider.value = this.hsv[3] * 100;
 333 },
 334
 335 toggle: function(e) {
 336 var isShown = this.element.hasStyleClass('sp-show');
 337 if (isShown)
 338 this.hide(e);
 339 else
 340 this.show(e);
 341
 342 return !isShown;
 343 },
 344
 345 show: function(e) {
 346
 347 if (e)
 348 e.stopPropagation();
 349
 350 this.element.addStyleClass('sp-show');
 351 this.swatch.addStyleClass('swatch-active');
 352
 353 var x = Math.min(
 354 this.swatch.offsetParent.clientWidth - this.element.clientWidth - 20,
 355 Math.max(0, this.swatch.offsetLeft)
 356 );
 357
 358 var y = this.swatch.offsetTop + this.swatch.clientHeight;
 359
 360 this.element.positionAt(x, y);
 361
 362 this.slideHeight = this.slider.offsetHeight;
 363 this.dragWidth = this.dragger.offsetWidth;
 364 this.dragHeight = this.dragger.offsetHeight;
 365 this.dragHelperHeight = this.dragHelper.offsetHeight / 2;
 366 this.slideHelperHeight = this.slideHelper.offsetHeight / 2;
 367
 368 this.updateUI();
 369 },
 370
 371 hide: function(e) {
 372
 373 if (e)
 374 e.stopPropagation();
 375
 376 this.element.removeStyleClass('sp-show');
 377 this.swatch.removeStyleClass('swatch-active');
 378
 379 this._onhide(this.rgb);
 380 },
 381
 382 _onhide: function() {
 383
 384 },
 385
 386 addChangeListener: function(listener) {
 387 this._onchange = listener;
 388 },
 389
 390 addHideListener: function(listener) {
 391 this._onhide = listener
 392 }
 393
 394};

Source/WebCore/inspector/front-end/StylesSidebarPane.js

@@WebInspector.StylePropertyTreeElement.prototype = {
15841584 } catch (e) {
15851585 return document.createTextNode(text);
15861586 }
1587 
 1587
15881588 var swatchElement = document.createElement("span");
1589  swatchElement.title = WebInspector.UIString("Click to change color format");
 1589 swatchElement.title = WebInspector.UIString("Click to open a colorpicker");
15901590 swatchElement.className = "swatch";
15911591 swatchElement.style.setProperty("background-color", text);
15921592
1593  swatchElement.addEventListener("click", changeColorDisplay, false);
 1593 swatchElement.addEventListener("click", swatchClick, false);
15941594 swatchElement.addEventListener("dblclick", function(event) { event.stopPropagation() }, false);
1595 
1596  var format;
1597  var formatSetting = WebInspector.settings.colorFormat.get();
1598  if (formatSetting === cf.Original)
1599  format = cf.Original;
1600  else if (Preferences.showColorNicknames && color.nickname)
1601  format = cf.Nickname;
1602  else if (formatSetting === cf.RGB)
1603  format = (color.simple ? cf.RGB : cf.RGBA);
1604  else if (formatSetting === cf.HSL)
1605  format = (color.simple ? cf.HSL : cf.HSLA);
1606  else if (color.simple)
1607  format = (color.hasShortHex() ? cf.ShortHEX : cf.HEX);
1608  else
1609  format = cf.RGBA;
1610 
 1595
 1596 var format = getFormat();
 1597
 1598 function getFormat() {
 1599 var format;
 1600 var formatSetting = WebInspector.settings.colorFormat.get();
 1601 if (formatSetting === cf.Original)
 1602 format = cf.Original;
 1603 else if (Preferences.showColorNicknames && color.nickname)
 1604 format = cf.Nickname;
 1605 else if (formatSetting === cf.RGB)
 1606 format = (color.simple ? cf.RGB : cf.RGBA);
 1607 else if (formatSetting === cf.HSL)
 1608 format = (color.simple ? cf.HSL : cf.HSLA);
 1609 else if (color.simple)
 1610 format = (color.hasShortHex() ? cf.ShortHEX : cf.HEX);
 1611 else
 1612 format = cf.RGBA;
 1613
 1614 return format;
 1615 }
 1616
16111617 var colorValueElement = document.createElement("span");
16121618 colorValueElement.textContent = color.toString(format);
16131619

@@WebInspector.StylePropertyTreeElement.prototype = {
16541660 return null;
16551661 }
16561662 }
 1663
16571664
16581665 function changeColorDisplay(event)
16591666 {

@@WebInspector.StylePropertyTreeElement.prototype = {
16691676 var container = document.createDocumentFragment();
16701677 container.appendChild(swatchElement);
16711678 container.appendChild(colorValueElement);
 1679
 1680 var rgba = (color.rgba || color.rgb).slice(0);
 1681 var spectrum = new WebInspector.Spectrum(swatchElement, rgba);
 1682
 1683 spectrum.addChangeListener(spectrumChange);
 1684 spectrum.addHideListener(applyMajorChange);
 1685
 1686 function spectrumChange(rgba) {
 1687 if (rgba[3] == 1) {
 1688 color = WebInspector.Color.fromRGB.apply(this, rgba);
 1689 }
 1690 else {
 1691 color = WebInspector.Color.fromRGBA.apply(this, rgba)
 1692 }
 1693
 1694 applyMinorChange();
 1695 }
 1696
 1697 function applyMinorChange() {
 1698 colorValueElement.textContent = color.toString(getFormat());
 1699 self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, false, false, false);
 1700 }
 1701 function applyMajorChange() {
 1702 colorValueElement.textContent = color.toString(getFormat());
 1703 self.applyStyleText(nameElement.textContent + ": " + valueElement.textContent, true, true, false);
 1704 }
 1705
 1706 function finishSpectrum(e) {
 1707 swatchElement.ownerDocument.removeEventListener("click", finishSpectrum, false);
 1708 spectrum.hide(e);
 1709 }
 1710
 1711 function swatchClick(e) {
 1712 if (e.altKey) {
 1713 // alt + click toggles formats
 1714 changeColorDisplay(e);
 1715 e.preventDefault();
 1716 }
 1717 else {
 1718 var isShown = spectrum.toggle(e);
 1719 if (isShown) {
 1720 swatchElement.ownerDocument.addEventListener("click", finishSpectrum, false);
 1721 }
 1722 }
 1723 }
 1724
16721725 return container;
16731726 }
16741727

Source/WebCore/inspector/front-end/inspector.css

@@body.platform-mac #drawer-status-bar .search-status-bar-progress {
26362636 border-color: transparent;
26372637 border-width: 0 0 11px 0;
26382638}
 2639
 2640
 2641/*
 2642https://github.com/bgrins/spectrum
 2643*/
 2644.sp-container {
 2645 position:absolute;
 2646 top:0;
 2647 left:0;
 2648 display:none;
 2649 background: rgba(230, 230, 230, 1) !important;
 2650 border:1px solid #646464;
 2651 border-radius:0;
 2652 padding: 10px;
 2653 width: 200px;
 2654 z-index: 10;
 2655}
 2656.sp-container.sp-flat {
 2657 position: relative;
 2658}
 2659.sp-container.sp-show {
 2660 display:inline-block;
 2661}
 2662.sp-top {
 2663 position:relative;
 2664 width: 100%;
 2665 display:inline-block;
 2666}
 2667.sp-top-inner {
 2668 position:absolute; top:0; left:0; bottom:0; right:0;
 2669}
 2670.sp-color {
 2671 position: absolute;
 2672 top:0;left:0;bottom:0;right:20%;
 2673}
 2674.sp-hue {
 2675 position: absolute;
 2676 top:0;right:0;bottom:0;left:83%;
 2677}
 2678.sp-fill {
 2679 margin-top: 80%; /* Same as sp-color width */
 2680}
 2681.sp-sat, .sp-val {
 2682 position: absolute;
 2683 top:0;
 2684 left:0;
 2685 right:0;
 2686 bottom:0;
 2687}
 2688
 2689.sp-range-container {
 2690 position:relative;
 2691 padding-top:10px;
 2692}
 2693.sp-range-container input {
 2694 width: 75%;
 2695}
 2696.sp-range-container div {
 2697 position:absolute;
 2698 right:0;
 2699 top: 10px;
 2700 margin:0;
 2701 height: 12px;
 2702 width: 12px;
 2703 background: url(Images/goArrow.png);
 2704}
 2705.swatch-inner {
 2706 width:100%; height:100%; display:block;
 2707}
 2708.swatch, .sp-dragger, .sp-slider {
 2709 -webkit-user-select:none; user-select: none;
 2710}
 2711
 2712/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
 2713.sp-sat {
 2714 background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
 2715 background-image: linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
 2716}
 2717.sp-val {
 2718 background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
 2719 background-image: linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
 2720}
 2721
 2722.sp-hue {
 2723 background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
 2724 background: linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
 2725}
 2726
 2727.sp-dragger {
 2728 border-radius: 5px;
 2729 height:5px;
 2730 width: 5px;
 2731 border: solid black 3px;
 2732 cursor: pointer;
 2733 position:absolute;
 2734 top:0;
 2735 left: 0;
 2736}
 2737.sp-slider {
 2738 position: absolute;
 2739 top:0;
 2740 cursor:pointer;
 2741 height: 5px;
 2742 width: 110%;
 2743 margin-left: -5%;
 2744 background: white;
 2745 opacity: .8;
 2746}

Source/WebCore/inspector/front-end/inspector.html

@@THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8181 <script type="text/javascript" src="ApplicationCacheModel.js"></script>
8282 <script type="text/javascript" src="ApplicationCacheItemsView.js"></script>
8383 <script type="text/javascript" src="Script.js"></script>
 84 <script type="text/javascript" src="Spectrum.js"></script>
8485 <script type="text/javascript" src="SidebarPane.js"></script>
8586 <script type="text/javascript" src="ElementsTreeOutline.js"></script>
8687 <script type="text/javascript" src="DOMPresentationUtils.js"></script>