+2006-09-28 Timothy Hatcher <timothy@apple.com>
+
+ Reviewed by Maciej.
+
+ Switch the inspector over to use border-image with styled buttons and selects.
+
+ * WebInspector/WebInspector.m:
+ (-[NSWindow window]):
+ (-[NSWindow setWebFrame:]):
+ (-[WebInspector _updateRoot]):
+ * WebInspector/webInspector/Images/button.png: Added.
+ * WebInspector/webInspector/Images/buttonDivider.png: Added.
+ * WebInspector/webInspector/Images/buttonPressed.png: Added.
+ * WebInspector/webInspector/Images/popup.png: Added.
+ * WebInspector/webInspector/Images/popupFill.png: Removed.
+ * WebInspector/webInspector/Images/popupFillPressed.png: Removed.
+ * WebInspector/webInspector/Images/popupLeft.png: Removed.
+ * WebInspector/webInspector/Images/popupLeftPressed.png: Removed.
+ * WebInspector/webInspector/Images/popupPressed.png: Added.
+ * WebInspector/webInspector/Images/popupRight.png: Removed.
+ * WebInspector/webInspector/Images/popupRightPressed.png: Removed.
+ * WebInspector/webInspector/Images/squareButtonRight.png: Removed.
+ * WebInspector/webInspector/Images/squareButtonRightPressed.png: Removed.
+ * WebInspector/webInspector/inspector.css:
+ * WebInspector/webInspector/inspector.html:
+ * WebInspector/webInspector/inspector.js:
+
2006-09-28 Alice Liu <alice.liu@apple.com>
fixing the windows build
right: 106px;
}
-#treePopupButton {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
-}
-
-#realTreePopup {
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- z-index: 10;
- margin: 0;
- padding: 0;
-}
-
-#treePopupTitleArea {
- overflow: hidden;
- white-space: nowrap;
-}
-
#traverse {
position: absolute;
top: 4px;
- left: 8px;
+ left: 9px;
width: 50px;
}
-#traverseUp .middle {
- right: 0;
-}
-
-#traverseUp .middle > img {
- position: absolute;
- top: 4px;
- left: 1px;
-}
-
-#traverseDown .middle {
- left: 1px;
-}
-
-#traverseDown .middle > img {
- position: absolute;
- top: 5px;
- left: 5px;
-}
-
#traverseUp {
position: absolute;
top: 0;
left: 0;
- width: 20px;
+ width: 21px;
+ background-image: url( Images/upTriangle.png ), url( Images/buttonDivider.png );
+ background-repeat: no-repeat;
+ background-position: 2px 0px, -4px right;
}
#traverseDown {
position: absolute;
top: 0;
left: 20px;
- width: 21px;
-}
-
-#traverseDown > img {
- position: absolute;
- top: 0;
- left: 0;
+ width: 20px;
+ background-image: url( Images/downTriangle.png );
+ background-repeat: no-repeat;
+ background-position: 5px 1px;
}
#tabs {
margin-left: -130px;
}
-#tabs .middle {
- left: 0;
- right: 0;
- text-align: center;
-}
-
-#tabs button > img {
- position: absolute;
- top: 0;
- left: 0;
-}
-
#nodeButton {
position: absolute;
top: 0;
width: 60px;
}
-#nodeButton .middle {
- padding-right: 6px;
- left: 6px;
- right: 0;
-}
-
#metricsButton {
position: absolute;
top: 0;
width: 80px;
}
-#propertiesButton .middle {
- padding-left: 6px;
- left: 0;
- right: 6px;
-}
-
#title button.close {
position: absolute;
top: 4px;
background-image: url( Images/menuPressed.png );
}
-button.popup {
+button {
+ -webkit-appearance: none;
+ border-width: 4px 6px 6px 6px;
+ border-color: transparent;
+ border-style: solid;
+ -webkit-border-image: url( Images/button.png ) 4 6 6 6;
+ box-sizing: border-box;
+ line-height: 5px;
height: 20px;
- border: 0;
background-color: transparent;
color: white;
padding: 0;
margin: 0;
}
-button.popup .left {
- position: absolute;
- top: 0;
- left: 0;
- height: 20px;
- width: 6px;
- background-image: url( Images/popupLeft.png );
- background-repeat: no-repeat;
-}
-
-button.popup .middle {
- position: absolute;
- top: 0;
- left: 6px;
- right: 19px;
- height: 20px;
- line-height: 1em;
- background-image: url( Images/popupFill.png );
- background-repeat: repeat-x;
- line-height: 17px;
- text-align: left;
- padding: 0 2px;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-button.popup .right {
- position: absolute;
- top: 0;
- right: 0;
- height: 20px;
- width: 19px;
- background-image: url( Images/popupRight.png );
- background-repeat: no-repeat;
+button:active, button.selected {
+ -webkit-border-image: url( Images/buttonPressed.png ) 4 6 6 6;
+ text-shadow: black 1px -1px 3px;
}
-button.popup[disabled] {
+button[disabled] {
+ -webkit-border-image: url( Images/button.png ) 4 6 6 6;
opacity: 0.5;
}
-button.popup[disabled] .left {
- background-image: url( Images/popupLeft.png ) !important;
-}
-
-button.popup[disabled] .middle {
- background-image: url( Images/popupFill.png ) !important;
-}
-
-button.popup[disabled] .right {
- background-image: url( Images/popupRight.png ) !important;
-}
-
-button.popup:active .left {
- background-image: url( Images/popupLeftPressed.png );
+button.left {
+ border-width: 4px 0 6px 6px;
+ background-image: url( Images/buttonDivider.png );
+ background-position: -4px right;
+ background-repeat: no-repeat;
}
-button.popup:active .middle {
- background-image: url( Images/popupFillPressed.png );
- text-shadow: black 1px -1px 3px;
+button.right {
+ border-width: 4px 6px 6px 0;
}
-button.popup:active .right {
- background-image: url( Images/popupRightPressed.png );
+button.middle {
+ border-width: 4px 0 6px 0;
+ background-image: url( Images/buttonDivider.png );
+ background-position: -4px right;
+ background-repeat: no-repeat;
}
-button.square {
+select {
+ -webkit-appearance: none;
+ border-width: 4px 16px 6px 6px;
+ border-color: transparent;
+ border-style: solid;
+ -webkit-border-image: url( Images/popup.png ) 4 16 6 6;
+ box-sizing: border-box;
+ line-height: 5px;
height: 20px;
- border: 0;
background-color: transparent;
color: white;
padding: 0;
margin: 0;
+ outline: none;
}
-button.square .left {
- position: absolute;
- top: 0;
- left: 0;
- height: 20px;
- width: 6px;
- background-image: url( Images/popupLeft.png );
- background-repeat: no-repeat;
-}
-
-button.square .middle {
- position: absolute;
- top: 0;
- left: 6px;
- right: 6px;
- height: 20px;
- line-height: 1em;
- background-image: url( Images/popupFill.png );
- background-repeat: repeat-x;
- line-height: 17px;
- text-align: left;
- padding: 0 2px;
-}
-
-button.square .right {
- position: absolute;
- top: 0;
- right: 0;
- height: 20px;
- width: 6px;
- background-image: url( Images/squareButtonRight.png );
- background-repeat: no-repeat;
+select:active {
+ -webkit-border-image: url( Images/popupPressed.png ) 4 16 6 6;
}
-button.square[disabled] {
+select[disabled] {
+ -webkit-border-image: url( Images/popup.png ) 4 16 6 6;
opacity: 0.5;
}
-button.square[disabled] .left {
- background-image: url( Images/popupLeft.png ) !important;
-}
-
-button.square[disabled] .middle {
- background-image: url( Images/popupFill.png ) !important;
-}
-
-button.square[disabled] .right {
- background-image: url( Images/squareButtonRight.png ) !important;
-}
-
-button.square:active .left, button.square.selected .left {
- background-image: url( Images/popupLeftPressed.png );
-}
-
-button.square:active .middle, button.square.selected .middle {
- background-image: url( Images/popupFillPressed.png );
- text-shadow: black 1px -1px 3px;
-}
-
-button.square.selected .middle {
- font-weight: bold;
-}
-
-button.square:active .right, button.square.selected .right {
- background-image: url( Images/squareButtonRightPressed.png );
-}
-
#resize {
position: absolute;
right: 0;
<div id="title"><button class="close" onclick="window.close()"></button>Web Inspector<button class="menu" onmousedown="Inspector.showOptionsMenu()"></button></div>
<div id="top">
<div id="header">
- <div id="traverse"><button class="square" id="traverseUp" onclick="Inspector.traverseTreeBackward()"><div class="left"></div><div class="middle"><img src="Images/upTriangle.png" /></div></button><button class="square" id="traverseDown" onclick="Inspector.traverseTreeForward()"><img src="Images/popupFillPressed.png" /><div class="middle"><img src="Images/downTriangle.png" /></div><div class="right"></div></button></div>
- <div id="treePopup">
- <select size="1" id="realTreePopup" onchange="Inspector.selectNewRoot(this)"></select>
- <button id="treePopupButton" class="popup"><div class="left"></div><div id="treePopupTitleArea" class="middle"></div><div class="right"></div></button>
- </div>
+ <div id="traverse"><button class="left" id="traverseUp" onclick="Inspector.traverseTreeBackward()"></button><button class="right" id="traverseDown" onclick="Inspector.traverseTreeForward()"></button></div>
+ <select size="1" id="treePopup"> onchange="Inspector.selectNewRoot(this)"></select>
<div id="searchCount"></div>
<input id="search" type="search" autosave="nodeSearch" results="20" placeholder="Search" incremental="incremental" onsearch="performSearch(this.value)" />
</div>
<div id="splitter" onmousedown="Inspector.resizeTopArea()"><hr size="2" /></div>
<div id="bottom">
<div id="tabs">
- <button class="square selected" id="nodeButton" onclick="switchPane('node')"><div class="left"></div><div class="middle">Node</div></button>
- <button class="square" id="styleButton" onclick="switchPane('style')"><img src="Images/popupFillPressed.png" /><div class="middle">Style</div></button>
- <button class="square" id="metricsButton" onclick="switchPane('metrics')"><img src="Images/popupFillPressed.png" /><div class="middle">Metrics</div></button>
- <button class="square" id="propertiesButton" onclick="switchPane('properties')"><img src="Images/popupFillPressed.png" /><div class="middle">Properties</div><div class="right"></div></button>
+ <button class="left" id="nodeButton" onclick="switchPane('node')">Node</button>
+ <button class="middle" id="styleButton" onclick="switchPane('style')">Style</button>
+ <button class="middle" id="metricsButton" onclick="switchPane('metrics')">Metrics</button>
+ <button class="right" id="propertiesButton" onclick="switchPane('properties')">Properties</button>
</div>
- <div id="noSelection" style="display: none">No Selection</div>
- <div id="nodePane" class="pane">
+ <div id="noSelection">No Selection</div>
+ <div id="nodePane" class="pane" style="display: none">
<div class="infoRow">
<span class="label">Node Type:</span>
<span class="value" id="nodeType"></span>
}
window.addEventListener("resize", refreshScrollbars, false);
+
+ toggleNoSelection(false);
+ switchPane("node");
}
function refreshScrollbars()
{
currentPane = pane;
for (var i = 0; i < tabNames.length; i++) {
+ var paneElement = document.getElementById(tabNames[i] + "Pane");
+ var button = document.getElementById(tabNames[i] + "Button");
+ if (!button.originalClassName)
+ button.originalClassName = button.className;
if (pane == tabNames[i]) {
if (!noSelection)
- document.getElementById(tabNames[i] + "Pane").style.display = null;
- document.getElementById(tabNames[i] + "Button").className = "square selected";
+ paneElement.style.display = null;
+ button.className = button.originalClassName + " selected";
} else {
- document.getElementById(tabNames[i] + "Pane").style.display = "none";
- document.getElementById(tabNames[i] + "Button").className = "square";
+ paneElement.style.display = "none";
+ button.className = button.originalClassName;
}
}
git://git.webkit.org / WebKit-https.git / commitdiff
