Source/WebInspectorUI/ChangeLog

55
66 Reviewed by NOBODY (OOPS!).
77
8  * UserInterface/Images/*.svg: Added id to the top level for most images. Use currentColor instead of black.
9  * UserInterface/Images/gtk/*.svg: Ditto. Filed bug 150603 to track adopting currentColor.
 8 This removes the code used to generate button image states as various canvas bitmaps.
 9 With the simplification of the UI in Yosemite, we can now just style SVG images to change
 10 the color used by the glyphs in these images. To do that we use the special "currentColor"
 11 color keyword. That keyword represents the current value of the applied CSS text color.
 12 This approach was used since it works across shadow DOM boundaries, which are there with
 13 our new use of the SVG <use> element to import glyphs. This allows us to eliminate the
 14 "stroked" and "filled" classes that were used to style some images that used the old
 15 wrappedSVGDocument image utility.
 16
 17 Some of the SVG images had to be recreated -- specifically the removal of <clipPath> and
 18 <text> elements. Those elements do not work or work well with the <use> element. We can
 19 now only use graphical elements like <path>, <rect>, <circle>, etc.
 20
 21 * UserInterface/Images/*.svg: Added id to the top level for most images. Use currentColor instead of black. Sorted attributes.
 22 * UserInterface/Images/gtk/*.svg: Added id to the top level for most images. Filed bug 150603 to track adopting currentColor.
1023
1124 * UserInterface/Base/ImageUtilities.js:
1225 (useSVGSymbol): Added.

Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js

2323 * THE POSSIBILITY OF SUCH DAMAGE.
2424 */
2525
26 function useSVGSymbol(url, className, title, callback)
 26function useSVGSymbol(url, className, title)
2727{
2828 const svgNamespace = "http://www.w3.org/2000/svg";
2929 const xlinkNamespace = "http://www.w3.org/1999/xlink";
3030
31  var svgElement = document.createElementNS(svgNamespace, "svg");
 31 let svgElement = document.createElementNS(svgNamespace, "svg");
3232 svgElement.setAttribute("width", "100%");
3333 svgElement.setAttribute("height", "100%");
3434

@@function useSVGSymbol(url, className, title, callback)
3737 if (!url.includes("#"))
3838 url += "#root";
3939
40  var useElement = document.createElementNS(svgNamespace, "use");
 40 let useElement = document.createElementNS(svgNamespace, "use");
4141 useElement.setAttributeNS(xlinkNamespace, "xlink:href", url);
4242 svgElement.appendChild(useElement);
4343
44  var wrapper = document.createElement("div");
 44 let wrapper = document.createElement("div");
4545 wrapper.appendChild(svgElement);
4646
4747 if (className)

@@function useSVGSymbol(url, className, title, callback)
4949 if (title)
5050 wrapper.setAttribute("title", title); // Can't use title property since this is the SVG DOM.
5151
52  callback(wrapper);
 52 return wrapper;
5353}

Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js

@@WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspec
9696
9797 this._image = newImage;
9898
99  useSVGSymbol(this._image, "glyph", null, (element) => {
100  this._glyphElement = element;
101  this._glyphElement.setAttribute("width", this._imageWidth + "px");
102  this._glyphElement.setAttribute("height", this._imageHeight + "px");
103  this._element.appendChild(this._glyphElement);
104  });
 99 this._glyphElement = useSVGSymbol(this._image, "glyph");
 100 this._glyphElement.setAttribute("width", this._imageWidth + "px");
 101 this._glyphElement.setAttribute("height", this._imageHeight + "px");
 102 this._element.appendChild(this._glyphElement);
105103 }
106104
107105 get enabled()

Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js

@@WebInspector.MultipleScopeBarItem = class MultipleScopeBarItem extends WebInspec
4040 this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
4141 this._element.appendChild(this._selectElement);
4242
43  useSVGSymbol("Images/UpDownArrows.svg", "arrows", null, function(element) {
44  this._element.appendChild(element);
45  }.bind(this));
 43 this._element.appendChild(useSVGSymbol("Images/UpDownArrows.svg", "arrows"));
4644
4745 this.scopeBarItems = scopeBarItems;
4846 }

Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js

@@WebInspector.NetworkSidebarPanel = class NetworkSidebarPanel extends WebInspecto
156156 if (treeElement.status || !treeElement.treeOutline)
157157 return;
158158
159  useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view"), function(element) {
160  var fragment = document.createDocumentFragment();
 159 var fragment = document.createDocumentFragment();
161160
162  var closeButton = new WebInspector.TreeElementStatusButton(element);
163  closeButton.element.classList.add("close");
164  closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
165  fragment.appendChild(closeButton.element);
 161 var closeButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view")));
 162 closeButton.element.classList.add("close");
 163 closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
 164 fragment.appendChild(closeButton.element);
166165
167  var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
168  goToButton.__treeElement = treeElement;
169  goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
170  fragment.appendChild(goToButton.element);
 166 var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
 167 goToButton.__treeElement = treeElement;
 168 goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
 169 fragment.appendChild(goToButton.element);
171170
172  treeElement.status = fragment;
173  }.bind(this));
 171 treeElement.status = fragment;
174172 }
175173
176174 // Private

Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js

@@WebInspector.ScopeRadioButtonNavigationItem = class ScopeRadioButtonNavigationIt
4848 this._scopeItemSelect.addEventListener("change", this._handleItemChanged.bind(this));
4949 this._element.appendChild(this._scopeItemSelect);
5050
51  useSVGSymbol("Images/UpDownArrows.svg", "arrows", null, function(element) {
52  this._element.appendChild(element);
53  }.bind(this));
 51 this._element.appendChild(useSVGSymbol("Images/UpDownArrows.svg", "arrows"));
5452 }
5553
5654 // Public

Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js

@@WebInspector.TimelineSidebarPanel = class TimelineSidebarPanel extends WebInspec
451451 if (!treeElement.treeOutline.__canShowContentViewForTreeElement(treeElement))
452452 return;
453453
454  useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view"), function(element) {
455  var fragment = document.createDocumentFragment();
 454 var fragment = document.createDocumentFragment();
456455
457  var closeButton = new WebInspector.TreeElementStatusButton(element);
458  closeButton.element.classList.add("close");
459  closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
460  fragment.appendChild(closeButton.element);
 456 var closeButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view")));
 457 closeButton.element.classList.add("close");
 458 closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
 459 fragment.appendChild(closeButton.element);
461460
462  var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
463  goToButton.__treeElement = treeElement;
464  goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
465  fragment.appendChild(goToButton.element);
 461 var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
 462 goToButton.__treeElement = treeElement;
 463 goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
 464 fragment.appendChild(goToButton.element);
466465
467  treeElement.status = fragment;
468  }.bind(this));
 466 treeElement.status = fragment;
469467 }
470468
471469 canShowDifferentContentView()

@@WebInspector.TimelineSidebarPanel = class TimelineSidebarPanel extends WebInspec
735733
736734 var timelineTreeElement = new WebInspector.GeneralTreeElement([timeline.iconClassName, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], timeline.displayName, null, timeline);
737735 var tooltip = WebInspector.UIString("Close %s timeline view").format(timeline.displayName);
738  useSVGSymbol("Images/CloseLarge.svg", WebInspector.TimelineSidebarPanel.CloseButtonStyleClass, tooltip, function(element) {
739  var button = new WebInspector.TreeElementStatusButton(element);
740  button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this.showTimelineOverview, this);
741  timelineTreeElement.status = button.element;
742  }.bind(this));
 736 var button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
 737 button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this.showTimelineOverview, this);
 738 timelineTreeElement.status = button.element;
743739
744740 this._timelinesTreeOutline.appendChild(timelineTreeElement);
745741 this._timelineTreeElementMap.set(timeline, timelineTreeElement);

@@WebInspector.TimelineSidebarPanel.TitleBarScopeBarStyleClass = "title-bar-scope-
10241020WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
10251021WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = "timeline-events";
10261022WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass = "timelines-content";
1027 WebInspector.TimelineSidebarPanel.CloseButtonStyleClass = "close-button";
10281023WebInspector.TimelineSidebarPanel.LargeIconStyleClass = "large";
10291024WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
10301025WebInspector.TimelineSidebarPanel.NetworkIconStyleClass = "network-icon";

Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js

@@WebInspector.VisualStyleCommaSeparatedKeywordEditor = class VisualStyleCommaSepa
4444 controlContainer.classList.add("visual-style-comma-separated-keyword-controls");
4545 this.contentElement.appendChild(controlContainer);
4646
47  useSVGSymbol("Images/Plus13.svg", "visual-style-add-comma-separated-keyword", WebInspector.UIString("Click to add a new item."), function(wrapper) {
48  wrapper.addEventListener("click", this._addEmptyCommaSeparatedKeyword.bind(this));
49  controlContainer.appendChild(wrapper);
50  }.bind(this));
51 
52  useSVGSymbol("Images/Minus.svg", "visual-style-remove-comma-separated-keyword", WebInspector.UIString("Click to remove the selected item."), function(wrapper) {
53  wrapper.addEventListener("click", this._removeSelectedCommaSeparatedKeyword.bind(this));
54  controlContainer.appendChild(wrapper);
55  }.bind(this));
 47 let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-add-comma-separated-keyword");
 48 addGlyphElement.addEventListener("click", this._addEmptyCommaSeparatedKeyword.bind(this));
 49 controlContainer.appendChild(addGlyphElement);
 50
 51 let removeGlyphElement = useSVGSymbol("Images/Minus.svg", "visual-style-remove-comma-separated-keyword", WebInspector.UIString("Click to remove the selected item."));
 52 removeGlyphElement.addEventListener("click", this._removeSelectedCommaSeparatedKeyword.bind(this));
 53 controlContainer.appendChild(removeGlyphElement);
5654 }
5755
5856 // Public

Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js

@@WebInspector.VisualStyleKeywordIconList = class VisualStyleKeywordIconList exten
5050 iconButtonElement.addEventListener("click", this._handleKeywordChanged.bind(this));
5151
5252 let imageName = value === "none" ? "VisualStyleNone" : prettyPropertyReferenceName + title.replace(/\s/g, "");
53  useSVGSymbol("Images/" + imageName + ".svg", null, null, function(wrapper) {
54  iconButtonElement.appendChild(wrapper);
55  }.bind(this));
 53 iconButtonElement.appendChild(useSVGSymbol("Images/" + imageName + ".svg"));
5654
5755 return iconButtonElement;
5856 }

Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js

@@WebInspector.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink
5050 this._iconElement.addEventListener("mouseout", this._iconMouseout.bind(this));
5151 this._iconElement.addEventListener("click", this._iconClicked.bind(this));
5252
53  useSVGSymbol("Images/VisualStylePropertyUnlinked.svg", "unlinked-icon", null, function(wrapper) {
54  this._iconElement.appendChild(wrapper);
55  this._unlinkedIcon = wrapper;
56  }.bind(this));
57 
58  useSVGSymbol("Images/VisualStylePropertyLinked.svg", "linked-icon", null, function(wrapper) {
59  this._iconElement.appendChild(wrapper);
60  this._linkedIcon = wrapper;
61  this._linkedIcon.hidden = true;
62  }.bind(this));
 53 this._unlinkedIcon = useSVGSymbol("Images/VisualStylePropertyUnlinked.svg", "unlinked-icon");
 54 this._iconElement.appendChild(this._unlinkedIcon);
 55
 56 this._linkedIcon = useSVGSymbol("Images/VisualStylePropertyLinked.svg", "linked-icon");
 57 this._linkedIcon.hidden = true;
 58 this._iconElement.appendChild(this._linkedIcon);
6359
6460 this._element.appendChild(this._iconElement);
6561

Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js

@@WebInspector.VisualStyleSelectorSection = class VisualStyleSelectorSection exten
5858 this._selectors.onselect = this._selectorChanged.bind(this);
5959 this._focusNextNewInspectorRule = false;
6060
61  useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Click to add a new rule."), function(wrapper) {
62  wrapper.addEventListener("click", this._addNewRule.bind(this));
63  controlElement.appendChild(wrapper);
64  }.bind(this));
 61 let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Click to add a new rule."));
 62 addGlyphElement.addEventListener("click", this._addNewRule.bind(this));
 63 controlElement.appendChild(addGlyphElement);
6564
6665 this._headerElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
6766 this._headerElement.addEventListener("mouseout", this._handleMouseOut.bind(this));