Source/WebInspectorUI/ChangeLog

 12016-08-18 Devin Rousso <dcrousso+webkit@gmail.com>
 2
 3 Web Inspector: Visual styles sidebar should do something sane for SVG elements
 4 https://bugs.webkit.org/show_bug.cgi?id=148269
 5
 6 Reviewed by Joseph Pecoraro.
 7
 8 * Localizations/en.lproj/localizedStrings.js:
 9
 10 * UserInterface/Models/DOMNode.js:
 11 (WebInspector.DOMNode.prototype.get ownerSVGElement):
 12 (WebInspector.DOMNode.prototype.isSVGElement):
 13 Climbs ancestor tree to determine if node is an SVG node.
 14
 15 * UserInterface/Views/VisualStyleDetailsPanel.js:
 16 (WebInspector.VisualStyleDetailsPanel.prototype.initialLayout):
 17 (WebInspector.VisualStyleDetailsPanel.prototype._updateSections):
 18 (WebInspector.VisualStyleDetailsPanel.prototype._populatePositionSection):
 19 (WebInspector.VisualStyleDetailsPanel.prototype._populateDimensionsSection):
 20 (WebInspector.VisualStyleDetailsPanel.prototype._populateContentSection):
 21 (WebInspector.VisualStyleDetailsPanel.prototype._populateFillSection):
 22 (WebInspector.VisualStyleDetailsPanel.prototype._populateStrokeSection):
 23
 24 * UserInterface/Views/VisualStylePropertyEditor.css:
 25 (.visual-style-property-container.inactive):
 26 (.visual-style-property-container > *:first-child:matches(.visual-style-property-value-container)):
 27
 28 * UserInterface/Views/VisualStyleRelativeNumberSlider.css:
 29 (.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider):
 30
 31 * UserInterface/Views/VisualStyleUnitSlider.css:
 32 (.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider):
 33 (.visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider): Deleted.
 34
1352016-08-17 Matt Baker <mattbaker@apple.com>
236
337 Web Inspector: Network Tab should not layout if not visible

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

Binary file, nothing to see here

Source/WebInspectorUI/UserInterface/Models/DOMNode.js

@@WebInspector.DOMNode = class DOMNode extends WebInspector.Object
568568 return descendant !== null && descendant.isAncestor(this);
569569 }
570570
 571 get ownerSVGElement()
 572 {
 573 if (this._nodeName === "svg")
 574 return this;
 575
 576 if (!this.parentNode)
 577 return null;
 578
 579 return this.parentNode.ownerSVGElement;
 580 }
 581
 582 isSVGElement()
 583 {
 584 return !!this.ownerSVGElement;
 585 }
 586
571587 _setAttributesPayload(attrs)
572588 {
573589 this._attributes = [];

Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js

@@WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
101101 this.element.appendChild(this._sections.text.element);
102102
103103 // Background Section
 104 this._generateSection("fill", WebInspector.UIString("Fill"));
 105 this._generateSection("stroke", WebInspector.UIString("Stroke"));
104106 this._generateSection("background-style", WebInspector.UIString("Style"));
105107 this._generateSection("border", WebInspector.UIString("Border"));
106108 this._generateSection("outline", WebInspector.UIString("Outline"));
107109 this._generateSection("box-shadow", WebInspector.UIString("Box Shadow"));
108110 this._generateSection("list-style", WebInspector.UIString("List Styles"));
109111
110  this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section, this._groups.listStyle.section]);
 112 this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.fill.section, this._groups.stroke.section, this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section, this._groups.listStyle.section]);
111113 this.element.appendChild(this._sections.background.element);
112114
113115 // Effects Section

@@WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
187189 section.collapsed = false;
188190 }
189191 }
 192
 193 let node = this._nodeStyles.node;
 194 let isSVGElement = node.isSVGElement();
 195
 196 this._groups.float.section.element.classList.toggle("inactive", isSVGElement);
 197 this._groups.content.section.element.classList.toggle("inactive", isSVGElement);
 198 this._groups.fill.section.element.classList.toggle("inactive", !isSVGElement);
 199 this._groups.stroke.section.element.classList.toggle("inactive", !isSVGElement);
 200 this._groups.border.section.element.classList.toggle("inactive", isSVGElement);
 201 this._groups.boxShadow.section.element.classList.toggle("inactive", isSVGElement);
 202 this._groups.listStyle.section.element.classList.toggle("inactive", isSVGElement);
 203
 204 let isSVGCircle = node.nodeName() === "circle";
 205 let isSVGEllipse = node.nodeName() === "ellipse";
 206 let isSVGRadialGradient = node.nodeName() === "radialGradient";
 207 let isSVGRect = node.nodeName() === "rect";
 208 let isSVGLine = node.nodeName() === "line";
 209 let isSVGLinearGradient = node.nodeName() === "linearGradient";
 210
 211 // Only show the dimensions section if the current element is not an SVG element or is <ellipse>, <rect>, <circle>, or <radialGradient>.
 212 this._groups.dimensions.section.element.classList.toggle("inactive", !(!isSVGElement || isSVGEllipse || isSVGRect || isSVGCircle || isSVGRadialGradient));
 213
 214 // Only show the non-SVG dimensions group if the current element is not an SVG element or is <rect>.
 215 this._groups.dimensions.defaultGroup.element.classList.toggle("inactive", !(!isSVGElement || isSVGRect));
 216
 217 // Only show the SVG dimensions group if the current element is an SVG element, <rect>, <circle>, or <radialGradient>.
 218 this._groups.dimensions.svgGroup.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect || isSVGCircle || isSVGRadialGradient));
 219
 220 // Only show editor for "r" if the current element is <circle> or <radialGradient>.
 221 this._groups.dimensions.properties.r.element.classList.toggle("inactive", !(isSVGCircle || isSVGRadialGradient));
 222
 223 // Only show editors for "rx" and "ry" if the current element is <ellipse> or <rect>.
 224 this._groups.dimensions.properties.rx.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect));
 225 this._groups.dimensions.properties.ry.element.classList.toggle("inactive", !(isSVGEllipse || isSVGRect));
 226
 227 // Only show the SVG position group if the current element is <rect>, <circle>, <ellipse>, <line>, <radialGradient>, or <linearGradient>.
 228 this._groups.position.svgGroup.element.classList.toggle("inactive", !(isSVGRect || isSVGCircle || isSVGEllipse || isSVGLine || isSVGRadialGradient || isSVGLinearGradient));
 229
 230 // Only show editors for "x" and "y" if the current element is <rect>.
 231 this._groups.position.properties.x.element.classList.toggle("inactive", !isSVGRect);
 232 this._groups.position.properties.y.element.classList.toggle("inactive", !isSVGRect);
 233
 234 // Only show editors for "x1", "y1", "x2", and "y2" if the current element is <line> or <linearGradient>.
 235 this._groups.position.properties.x1.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
 236 this._groups.position.properties.y1.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
 237 this._groups.position.properties.x2.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
 238 this._groups.position.properties.y2.element.classList.toggle("inactive", !(isSVGLine || isSVGLinearGradient));
 239
 240 // Only show editors for "cx" and "cy" if the current element is <circle>, <ellipse>, or <radialGradient>.
 241 this._groups.position.properties.cx.element.classList.toggle("inactive", !(isSVGCircle || isSVGEllipse || isSVGRadialGradient));
 242 this._groups.position.properties.cy.element.classList.toggle("inactive", !(isSVGCircle || isSVGEllipse || isSVGRadialGradient));
190243 }
191244
192245 _updateProperties(group, forceStyleUpdate)

@@WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
454507 positionType.element.appendChild(properties.zIndex.element);
455508 positionType.element.classList.add("visual-style-separated-row");
456509
457  rows.unshift(positionType)
 510 rows.unshift(positionType);
 511
 512 group.defaultGroup = new WebInspector.DetailsSectionGroup(rows);
 513
 514 let xyRow = new WebInspector.DetailsSectionRow;
 515
 516 properties.x = new WebInspector.VisualStyleNumberInputBox("x", WebInspector.UIString("X"), this._keywords.boxModel, this._units.defaults, true);
 517 properties.y = new WebInspector.VisualStyleNumberInputBox("y", WebInspector.UIString("Y"), this._keywords.boxModel, this._units.defaults, true);
 518
 519 xyRow.element.appendChild(properties.x.element);
 520 xyRow.element.appendChild(properties.y.element);
 521
 522 let x1y1Row = new WebInspector.DetailsSectionRow;
 523
 524 properties.x1 = new WebInspector.VisualStyleNumberInputBox("x1", WebInspector.UIString("X1"), this._keywords.boxModel, this._units.defaults, true);
 525 properties.y1 = new WebInspector.VisualStyleNumberInputBox("y1", WebInspector.UIString("Y1"), this._keywords.boxModel, this._units.defaults, true);
458526
459  let positionGroup = new WebInspector.DetailsSectionGroup(rows);
460  this._populateSection(group, [positionGroup]);
 527 x1y1Row.element.appendChild(properties.x1.element);
 528 x1y1Row.element.appendChild(properties.y1.element);
 529
 530 let x2y2Row = new WebInspector.DetailsSectionRow;
 531
 532 properties.x2 = new WebInspector.VisualStyleNumberInputBox("x2", WebInspector.UIString("X2"), this._keywords.boxModel, this._units.defaults, true);
 533 properties.y2 = new WebInspector.VisualStyleNumberInputBox("y2", WebInspector.UIString("Y2"), this._keywords.boxModel, this._units.defaults, true);
 534
 535 x2y2Row.element.appendChild(properties.x2.element);
 536 x2y2Row.element.appendChild(properties.y2.element);
 537
 538 let cxcyRow = new WebInspector.DetailsSectionRow;
 539
 540 properties.cx = new WebInspector.VisualStyleNumberInputBox("cx", WebInspector.UIString("Center X"), this._keywords.boxModel, this._units.defaults, true);
 541 properties.cy = new WebInspector.VisualStyleNumberInputBox("cy", WebInspector.UIString("Center Y"), this._keywords.boxModel, this._units.defaults, true);
 542
 543 cxcyRow.element.appendChild(properties.cx.element);
 544 cxcyRow.element.appendChild(properties.cy.element);
 545
 546 group.svgGroup = new WebInspector.DetailsSectionGroup([xyRow, x1y1Row, x2y2Row, cxcyRow]);
 547
 548 this._populateSection(group, [group.defaultGroup, group.svgGroup]);
461549
462550 let allowedPositionValues = ["relative", "absolute", "fixed", "-webkit-sticky"];
463551 properties.zIndex.addDependency("position", allowedPositionValues);

@@WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
551639 this._addMetricsMouseListeners(group.properties.maxWidth, highlightMode);
552640 this._addMetricsMouseListeners(group.properties.maxHeight, highlightMode);
553641
554  let dimensionsGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
555  this._populateSection(group, [dimensionsGroup]);
 642 group.defaultGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
 643
 644 let rRow = new WebInspector.DetailsSectionRow;
 645
 646 properties.r = new WebInspector.VisualStyleRelativeNumberSlider("r", WebInspector.UIString("Radius"), this._keywords.boxModel, this._units.defaults);
 647
 648 rRow.element.appendChild(properties.r.element);
 649
 650 let rxRow = new WebInspector.DetailsSectionRow;
 651
 652 properties.rx = new WebInspector.VisualStyleRelativeNumberSlider("rx", WebInspector.UIString("Radius X"), this._keywords.boxModel, this._units.defaults);
 653
 654 rxRow.element.appendChild(properties.rx.element);
 655
 656 let ryRow = new WebInspector.DetailsSectionRow;
 657
 658 properties.ry = new WebInspector.VisualStyleRelativeNumberSlider("ry", WebInspector.UIString("Radius Y"), this._keywords.boxModel, this._units.defaults);
 659
 660 ryRow.element.appendChild(properties.ry.element);
 661
 662 group.svgGroup = new WebInspector.DetailsSectionGroup([rRow, rxRow, ryRow]);
 663
 664 this._populateSection(group, [group.defaultGroup, group.svgGroup]);
556665 }
557666
558667 _populateMarginSection()

@@WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
827936 this._populateSection(group, [textShadowGroup]);
828937 }
829938
 939 _populateFillSection()
 940 {
 941 let group = this._groups.fill;
 942 let properties = group.properties;
 943
 944 let fillRow = new WebInspector.DetailsSectionRow;
 945
 946 properties.fill = new WebInspector.VisualStyleColorPicker("fill", WebInspector.UIString("Color"));
 947 properties.fillRule = new WebInspector.VisualStyleKeywordPicker("fill-rule", WebInspector.UIString("Rule"), this._keywords.defaults.concat(["Nonzero", "Evenodd"]));
 948
 949 fillRow.element.appendChild(properties.fill.element);
 950 fillRow.element.appendChild(properties.fillRule.element);
 951
 952 let fillOpacityRow = new WebInspector.DetailsSectionRow;
 953
 954 properties.fillOpacity = new WebInspector.VisualStyleUnitSlider("fill-opacity", WebInspector.UIString("Opacity"));
 955
 956 fillOpacityRow.element.appendChild(properties.fillOpacity.element);
 957
 958 group.specifiedWidthProperties = [properties.fillOpacity];
 959
 960 let fillGroup = new WebInspector.DetailsSectionGroup([fillRow, fillOpacityRow]);
 961 this._populateSection(group, [fillGroup]);
 962 }
 963
 964 _populateStrokeSection()
 965 {
 966 let group = this._groups.stroke;
 967 let properties = group.properties;
 968
 969 let strokeRow = new WebInspector.DetailsSectionRow;
 970
 971 properties.stroke = new WebInspector.VisualStyleColorPicker("stroke", WebInspector.UIString("Color"));
 972 properties.strokeWidth = new WebInspector.VisualStyleNumberInputBox("stroke-width", WebInspector.UIString("Width"), this._keywords.defaults, this._units.defaults);
 973
 974 strokeRow.element.appendChild(properties.stroke.element);
 975 strokeRow.element.appendChild(properties.strokeWidth.element);
 976
 977 let strokeOpacity = new WebInspector.DetailsSectionRow;
 978
 979 properties.strokeOpacity = new WebInspector.VisualStyleUnitSlider("stroke-opacity", WebInspector.UIString("Opacity"));
 980
 981 strokeOpacity.element.appendChild(properties.strokeOpacity.element);
 982
 983 let strokeDasharrayRow = new WebInspector.DetailsSectionRow;
 984
 985 properties.strokeDasharray = new WebInspector.VisualStyleBasicInput("stroke-dasharray", WebInspector.UIString("Dash Array"), WebInspector.UIString("Enter an array value"));
 986
 987 strokeDasharrayRow.element.appendChild(properties.strokeDasharray.element);
 988
 989 let strokeDasharrayOptionsRow = new WebInspector.DetailsSectionRow;
 990
 991 properties.strokeDashoffset = new WebInspector.VisualStyleNumberInputBox("stroke-dashoffset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults);
 992 properties.strokeMiterlimit = new WebInspector.VisualStyleNumberInputBox("stroke-miterlimit", WebInspector.UIString("Miter"), this._keywords.defaults);
 993
 994 strokeDasharrayOptionsRow.element.appendChild(properties.strokeDashoffset.element);
 995 strokeDasharrayOptionsRow.element.appendChild(properties.strokeMiterlimit.element);
 996
 997 let strokeLineOptionsRow = new WebInspector.DetailsSectionRow;
 998
 999 properties.strokeLinecap = new WebInspector.VisualStyleKeywordPicker("stroke-linecap", WebInspector.UIString("Cap"), this._keywords.defaults.concat(["Butt", "Round", "Square"]));
 1000 properties.strokeLinejoin = new WebInspector.VisualStyleKeywordPicker("stroke-linejoin", WebInspector.UIString("Join"), this._keywords.defaults.concat(["Miter", "Round", "Bevel"]));
 1001
 1002 strokeLineOptionsRow.element.appendChild(properties.strokeLinecap.element);
 1003 strokeLineOptionsRow.element.appendChild(properties.strokeLinejoin.element);
 1004
 1005 group.specifiedWidthProperties = [properties.strokeOpacity];
 1006
 1007 let strokeGroup = new WebInspector.DetailsSectionGroup([strokeRow, strokeOpacity, strokeDasharrayRow, strokeDasharrayOptionsRow, strokeLineOptionsRow]);
 1008 this._populateSection(group, [strokeGroup]);
 1009 }
 1010
8301011 _populateBackgroundStyleSection()
8311012 {
8321013 let group = this._groups.backgroundStyle;

Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css

3232 flex-grow: 1;
3333}
3434
 35.visual-style-property-container.inactive {
 36 display: none;
 37}
 38
3539.visual-style-property-container > .visual-style-property-title {
3640 margin: 4px;
3741 text-align: right;

Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css

4343
4444.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider {
4545 width: 47%;
 46 margin-top: 0;
4647 margin-right: 7px;
4748}

Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css

2626.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider {
2727 position: relative;
2828 margin: 5px 1px 0;
 29 background-image: linear-gradient(90deg, hsla(0, 0%, 0%, 0), #000), url(../Images/Checkers.svg);
2930}
3031
3132.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img {
3233 top: -1px;
3334}
34 
35 .visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider {
36  background-image: linear-gradient(90deg, hsla(0, 0%, 0%, 0), #000), url(../Images/Checkers.svg);
37 }