Commit ba8aa975 authored by thatcher's avatar thatcher

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:



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@16641 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 040adbfb
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
......
......@@ -188,7 +188,7 @@ - (void)setWebFrame:(WebFrame *)webFrame
[[NSNotificationCenter defaultCenter] removeObserver:self name:WebViewProgressFinishedNotification object:[_private->webFrame webView]];
[_private->webFrame _removeInspector:self];
}
[webFrame retain];
[_private->webFrame release];
_private->webFrame = webFrame;
......@@ -738,10 +738,7 @@ - (void)_updateRoot
if (!_private->webViewLoaded || _private->searchResultsVisible)
return;
DOMHTMLElement *titleArea = (DOMHTMLElement *)[_private->domDocument getElementById:@"treePopupTitleArea"];
[titleArea setTextContent:[[self rootDOMNode] _displayName]];
DOMHTMLElement *popup = (DOMHTMLElement *)[_private->domDocument getElementById:@"realTreePopup"];
DOMHTMLElement *popup = (DOMHTMLElement *)[_private->domDocument getElementById:@"treePopup"];
[popup setInnerHTML:@""]; // reset the list
DOMNode *currentNode = [self rootDOMNode];
......
......@@ -113,74 +113,31 @@ button {
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 {
......@@ -190,18 +147,6 @@ button {
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;
......@@ -209,12 +154,6 @@ button {
width: 60px;
}
#nodeButton .middle {
padding-right: 6px;
left: 6px;
right: 0;
}
#metricsButton {
position: absolute;
top: 0;
......@@ -236,12 +175,6 @@ button {
width: 80px;
}
#propertiesButton .middle {
padding-left: 6px;
left: 0;
right: 6px;
}
#title button.close {
position: absolute;
top: 4px;
......@@ -282,156 +215,74 @@ button {
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;
......
......@@ -42,11 +42,8 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<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>
......@@ -58,13 +55,13 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<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>
......
......@@ -266,6 +266,9 @@ function loaded()
}
window.addEventListener("resize", refreshScrollbars, false);
toggleNoSelection(false);
switchPane("node");
}
function refreshScrollbars()
......@@ -334,13 +337,17 @@ function switchPane(pane)
{
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;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment