Reviewed by Maciej.
authorthatcher <thatcher@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Sep 2006 16:10:44 +0000 (16:10 +0000)
committerthatcher <thatcher@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 29 Sep 2006 16:10:44 +0000 (16:10 +0000)
        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: https://svn.webkit.org/repository/webkit/trunk@16641 268f45cc-cd09-0410-ab3c-d52691b4dbfc

18 files changed:
WebKit/ChangeLog
WebKit/WebInspector/WebInspector.m
WebKit/WebInspector/webInspector/Images/button.png [new file with mode: 0644]
WebKit/WebInspector/webInspector/Images/buttonDivider.png [new file with mode: 0644]
WebKit/WebInspector/webInspector/Images/buttonPressed.png [new file with mode: 0644]
WebKit/WebInspector/webInspector/Images/popup.png [new file with mode: 0644]
WebKit/WebInspector/webInspector/Images/popupFill.png [deleted file]
WebKit/WebInspector/webInspector/Images/popupFillPressed.png [deleted file]
WebKit/WebInspector/webInspector/Images/popupLeft.png [deleted file]
WebKit/WebInspector/webInspector/Images/popupLeftPressed.png [deleted file]
WebKit/WebInspector/webInspector/Images/popupPressed.png [new file with mode: 0644]
WebKit/WebInspector/webInspector/Images/popupRight.png [deleted file]
WebKit/WebInspector/webInspector/Images/popupRightPressed.png [deleted file]
WebKit/WebInspector/webInspector/Images/squareButtonRight.png [deleted file]
WebKit/WebInspector/webInspector/Images/squareButtonRightPressed.png [deleted file]
WebKit/WebInspector/webInspector/inspector.css
WebKit/WebInspector/webInspector/inspector.html
WebKit/WebInspector/webInspector/inspector.js

index 8034d248f1c95087b20ca2b093391269bad1108a..932feaa23157e4958c7a34395bc8cf7facd5c680 100644 (file)
@@ -1,3 +1,30 @@
+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
index b527c86a47b1cb3454d485e1b1770026225a00a6..5d1371330506a9f8d88f282dcffa49b3b17fd755 100644 (file)
@@ -188,7 +188,7 @@ static NSMapTable *lastChildIgnoringWhitespaceCache = NULL;
         [[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 @@ static NSMapTable *lastChildIgnoringWhitespaceCache = NULL;
     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];
diff --git a/WebKit/WebInspector/webInspector/Images/button.png b/WebKit/WebInspector/webInspector/Images/button.png
new file mode 100644 (file)
index 0000000..6145ed0
Binary files /dev/null and b/WebKit/WebInspector/webInspector/Images/button.png differ
diff --git a/WebKit/WebInspector/webInspector/Images/buttonDivider.png b/WebKit/WebInspector/webInspector/Images/buttonDivider.png
new file mode 100644 (file)
index 0000000..64e6d60
Binary files /dev/null and b/WebKit/WebInspector/webInspector/Images/buttonDivider.png differ
diff --git a/WebKit/WebInspector/webInspector/Images/buttonPressed.png b/WebKit/WebInspector/webInspector/Images/buttonPressed.png
new file mode 100644 (file)
index 0000000..55ab2bd
Binary files /dev/null and b/WebKit/WebInspector/webInspector/Images/buttonPressed.png differ
diff --git a/WebKit/WebInspector/webInspector/Images/popup.png b/WebKit/WebInspector/webInspector/Images/popup.png
new file mode 100644 (file)
index 0000000..391fc44
Binary files /dev/null and b/WebKit/WebInspector/webInspector/Images/popup.png differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupFill.png b/WebKit/WebInspector/webInspector/Images/popupFill.png
deleted file mode 100644 (file)
index 782af38..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupFill.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupFillPressed.png b/WebKit/WebInspector/webInspector/Images/popupFillPressed.png
deleted file mode 100644 (file)
index f0c67cf..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupFillPressed.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupLeft.png b/WebKit/WebInspector/webInspector/Images/popupLeft.png
deleted file mode 100644 (file)
index 4d1aaa3..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupLeft.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupLeftPressed.png b/WebKit/WebInspector/webInspector/Images/popupLeftPressed.png
deleted file mode 100644 (file)
index f9ffbf2..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupLeftPressed.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupPressed.png b/WebKit/WebInspector/webInspector/Images/popupPressed.png
new file mode 100644 (file)
index 0000000..bdc5d6e
Binary files /dev/null and b/WebKit/WebInspector/webInspector/Images/popupPressed.png differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupRight.png b/WebKit/WebInspector/webInspector/Images/popupRight.png
deleted file mode 100644 (file)
index e04e1ba..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupRight.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/popupRightPressed.png b/WebKit/WebInspector/webInspector/Images/popupRightPressed.png
deleted file mode 100644 (file)
index 8301a47..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/popupRightPressed.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/squareButtonRight.png b/WebKit/WebInspector/webInspector/Images/squareButtonRight.png
deleted file mode 100644 (file)
index 504104f..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/squareButtonRight.png and /dev/null differ
diff --git a/WebKit/WebInspector/webInspector/Images/squareButtonRightPressed.png b/WebKit/WebInspector/webInspector/Images/squareButtonRightPressed.png
deleted file mode 100644 (file)
index 70a6769..0000000
Binary files a/WebKit/WebInspector/webInspector/Images/squareButtonRightPressed.png and /dev/null differ
index 6710c6d4f0b9dead048592f0e4134d14ea4e7f0b..bad6f744de0dcaa41e2f6c8a083c0a0ecaf27aac 100644 (file)
@@ -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;
index 4b7d1bc23e5e90ccf9d6f902ab031a0853b2b820..7e14c1e8419e4e3276ef2653fc96171931505baf 100644 (file)
@@ -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>
index 380eb41d78c93dbabff68b559527b442121bc3a4..d51054da318ba5c2aa324e8bb073b0b281edd0b5 100644 (file)
@@ -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;
         }
     }