- Revision
- 224766
- Author
- [email protected]
- Date
- 2017-11-13 11:57:16 -0800 (Mon, 13 Nov 2017)
Log Message
Web Inspector: Add CheckboxNavigationItem
https://bugs.webkit.org/show_bug.cgi?id=179584
<rdar://problem/35490085>
Reviewed by Brian Burg.
* UserInterface/Main.html:
* UserInterface/Views/ButtonNavigationItem.css:
(.navigation-bar .item.button.text-only.checkbox):
(.navigation-bar .item.button.text-only.checkbox label):
* UserInterface/Views/ButtonNavigationItem.js:
Cleanup and some tweaks to the label to make it work with subclasses
regardless of how label is represented in the DOM.
(WI.ButtonNavigationItem):
(WI.ButtonNavigationItem.prototype.get toolTip):
(WI.ButtonNavigationItem.prototype.set toolTip):
(WI.ButtonNavigationItem.prototype.get label):
(WI.ButtonNavigationItem.prototype.set label):
(WI.ButtonNavigationItem.prototype.set image):
(WI.ButtonNavigationItem.prototype.get enabled):
(WI.ButtonNavigationItem.prototype.set enabled):
(WI.ButtonNavigationItem.prototype.updateButtonText):
* UserInterface/Views/CheckboxNavigationItem.js: Added.
New button item with a checkbox and label. Dispatches a Clicked evennt
whenever the checked state changes.
(WI.CheckboxNavigationItem):
(WI.CheckboxNavigationItem.prototype.get checked):
(WI.CheckboxNavigationItem.prototype.set checked):
(WI.CheckboxNavigationItem.prototype.get additionalClassNames):
(WI.CheckboxNavigationItem.prototype.updateButtonText):
(WI.CheckboxNavigationItem.prototype._checkboxChanged):
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (224765 => 224766)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-11-13 19:55:17 UTC (rev 224765)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-11-13 19:57:16 UTC (rev 224766)
@@ -1,3 +1,41 @@
+2017-11-13 Matt Baker <[email protected]>
+
+ Web Inspector: Add CheckboxNavigationItem
+ https://bugs.webkit.org/show_bug.cgi?id=179584
+ <rdar://problem/35490085>
+
+ Reviewed by Brian Burg.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/ButtonNavigationItem.css:
+ (.navigation-bar .item.button.text-only.checkbox):
+ (.navigation-bar .item.button.text-only.checkbox label):
+
+ * UserInterface/Views/ButtonNavigationItem.js:
+ Cleanup and some tweaks to the label to make it work with subclasses
+ regardless of how label is represented in the DOM.
+
+ (WI.ButtonNavigationItem):
+ (WI.ButtonNavigationItem.prototype.get toolTip):
+ (WI.ButtonNavigationItem.prototype.set toolTip):
+ (WI.ButtonNavigationItem.prototype.get label):
+ (WI.ButtonNavigationItem.prototype.set label):
+ (WI.ButtonNavigationItem.prototype.set image):
+ (WI.ButtonNavigationItem.prototype.get enabled):
+ (WI.ButtonNavigationItem.prototype.set enabled):
+ (WI.ButtonNavigationItem.prototype.updateButtonText):
+
+ * UserInterface/Views/CheckboxNavigationItem.js: Added.
+ New button item with a checkbox and label. Dispatches a Clicked evennt
+ whenever the checked state changes.
+
+ (WI.CheckboxNavigationItem):
+ (WI.CheckboxNavigationItem.prototype.get checked):
+ (WI.CheckboxNavigationItem.prototype.set checked):
+ (WI.CheckboxNavigationItem.prototype.get additionalClassNames):
+ (WI.CheckboxNavigationItem.prototype.updateButtonText):
+ (WI.CheckboxNavigationItem.prototype._checkboxChanged):
+
2017-11-13 Joseph Pecoraro <[email protected]>
Web Inspector: Give DataGrid/Table Header ContextMenu a section header to better describe its functions
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (224765 => 224766)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-11-13 19:55:17 UTC (rev 224765)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-11-13 19:57:16 UTC (rev 224766)
@@ -551,6 +551,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (224765 => 224766)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2017-11-13 19:55:17 UTC (rev 224765)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2017-11-13 19:57:16 UTC (rev 224766)
@@ -41,6 +41,14 @@
text-align: center;
}
+.navigation-bar .item.button.text-only.checkbox {
+ padding: 1px 4px 3px;
+}
+
+.navigation-bar .item.button.text-only.checkbox label {
+ -webkit-padding-start: 2px;
+}
+
.navigation-bar .item.button > .glyph {
color: var(--glyph-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js (224765 => 224766)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js 2017-11-13 19:55:17 UTC (rev 224765)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js 2017-11-13 19:57:16 UTC (rev 224766)
@@ -32,21 +32,24 @@
console.assert(identifier);
console.assert(toolTipOrLabel);
+ this._enabled = true;
+
this.toolTip = toolTipOrLabel;
- this._element.addEventListener("click", this._mouseClicked.bind(this));
+ this.element.addEventListener("click", this._mouseClicked.bind(this));
- this._element.setAttribute("role", role || "button");
+ this.element.setAttribute("role", role || "button");
if (label)
- this._element.setAttribute("aria-label", label);
+ this.element.setAttribute("aria-label", label);
this._imageWidth = imageWidth || 16;
this._imageHeight = imageHeight || 16;
+ this._label = "";
if (image)
this.image = image;
- else
+ else if (toolTipOrLabel)
this.label = toolTipOrLabel;
}
@@ -54,7 +57,7 @@
get toolTip()
{
- return this._element.title;
+ return this.element.title;
}
set toolTip(newToolTip)
@@ -63,18 +66,24 @@
if (!newToolTip)
return;
- this._element.title = newToolTip;
+ this.element.title = newToolTip;
}
get label()
{
- return this._element.textContent;
+ return this._label;
}
set label(newLabel)
{
- this._element.classList.add(WI.ButtonNavigationItem.TextOnlyClassName);
- this._element.textContent = newLabel || "";
+ newLabel = newLabel || "";
+ if (this._label === newLabel)
+ return;
+
+ this.element.classList.add(WI.ButtonNavigationItem.TextOnlyClassName);
+ this._label = newLabel;
+
+ this.updateButtonText();
if (this.parentNavigationBar)
this.parentNavigationBar.needsLayout();
}
@@ -87,12 +96,12 @@
set image(newImage)
{
if (!newImage) {
- this._element.removeChildren();
+ this.element.removeChildren();
return;
}
- this._element.removeChildren();
- this._element.classList.remove(WI.ButtonNavigationItem.TextOnlyClassName);
+ this.element.removeChildren();
+ this.element.classList.remove(WI.ButtonNavigationItem.TextOnlyClassName);
this._image = newImage;
@@ -99,20 +108,22 @@
this._glyphElement = WI.ImageUtilities.useSVGSymbol(this._image, "glyph");
this._glyphElement.style.width = this._imageWidth + "px";
this._glyphElement.style.height = this._imageHeight + "px";
- this._element.appendChild(this._glyphElement);
+ this.element.appendChild(this._glyphElement);
}
get enabled()
{
- return !this._element.classList.contains(WI.ButtonNavigationItem.DisabledStyleClassName);
+ return this._enabled;
}
set enabled(flag)
{
- if (flag)
- this._element.classList.remove(WI.ButtonNavigationItem.DisabledStyleClassName);
- else
- this._element.classList.add(WI.ButtonNavigationItem.DisabledStyleClassName);
+ flag = !!flag;
+ if (this._enabled === flag)
+ return;
+
+ this._enabled = flag;
+ this.element.classList.toggle("disabled", !this._enabled);
}
// Protected
@@ -122,6 +133,13 @@
return ["button"];
}
+ updateButtonText()
+ {
+ // Overridden by subclasses.
+
+ this.element.textContent = this._label;
+ }
+
// Private
_mouseClicked(event)
@@ -132,7 +150,6 @@
}
};
-WI.ButtonNavigationItem.DisabledStyleClassName = "disabled";
WI.ButtonNavigationItem.TextOnlyClassName = "text-only";
WI.ButtonNavigationItem.Event = {
Added: trunk/Source/WebInspectorUI/UserInterface/Views/CheckboxNavigationItem.js (0 => 224766)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CheckboxNavigationItem.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CheckboxNavigationItem.js 2017-11-13 19:57:16 UTC (rev 224766)
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2017 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.CheckboxNavigationItem = class CheckboxNavigationItem extends WI.ButtonNavigationItem
+{
+ constructor(identifier, label, checked)
+ {
+ super(identifier, label);
+
+ this._checkboxElement = this.element.appendChild(document.createElement("input"));
+ this._checkboxElement.checked = !checked;
+ this._checkboxElement.id = "checkbox-navigation-item-" + identifier;
+ this._checkboxElement.type = "checkbox";
+
+ this._checkboxElement.addEventListener("change", this._checkboxChanged.bind(this));
+
+ this._checkboxLabel = this.element.appendChild(document.createElement("label"));
+ this._checkboxLabel.className = "toggle";
+ this._checkboxLabel.setAttribute("for", this._checkboxElement.id);
+
+ this.updateButtonText();
+ }
+
+ // Public
+
+ get checked()
+ {
+ return this._checkboxElement.checked;
+ }
+
+ set checked(flag)
+ {
+ this._checkboxElement.checked = flag;
+ }
+
+ // Protected
+
+ get additionalClassNames()
+ {
+ return ["checkbox", "button"];
+ }
+
+ updateButtonText()
+ {
+ if (this._checkboxLabel)
+ this._checkboxLabel.textContent = this.label;
+ }
+
+ // Private
+
+ _checkboxChanged(event)
+ {
+ this.dispatchEventToListeners(WI.ButtonNavigationItem.Event.Clicked);
+ }
+};
