New look and feel for the IDE based on firebug

css/jtalk.css

@@ -2,80 +2,132 @@ body.jtalkBody {
     margin-bottom: 350px;
 }
 
-#jtalkTabs {
-    position: fixed;
-    font-family: helvetica,arial,sans;
-    font-size: 12px;
-    line-height: 1;
-    z-index: 1001;
-    bottom: 0;
-    left: 0;
-    right: 0;
+#jtalkTabs, #jtalk .jt_tabs {
     margin: 0;
-    padding: 0 0 3px 0;
-    height: 20px;
-    background: transparent;
-}
-#jtalkTabs li {
-    list-style-type: none;
-    display: inline;
-    background: #c8c8c8;
+    padding: 0;
+    background: url("../images/sprite.png") #DBD9C9 0 -27px;
+    height: 22px;
+    width: 100%;
+    list-style: none;
     font-weight: bold;
-    color: #414141;
-    padding: 4px;
-    border: 1px solid #acacac;
+}
+
+#jtalkTabs li, #jtalk .jt_tabs li {
+    padding: 0 1px;
     cursor: pointer;
-    line-height: 14px;
-    margin: 0;
+    color: #565656;
 }
 
-#jtalkTabs li.selected {
-    background: #dbdbdb;
-    border-top: 0 none;
-    padding: 5px 4px;
-    color: #222;
+#jtalk .ltab, #jtalk .rtab, #jtalk .mtab {
+    height: 22px;
+    float: left;
 }
 
-#jtalkTabs li span.close {
-    margin-left: 3px;
-    margin-right: 5px;
+#jtalk .ltab, #jtalk .rtab {
+    width: 8px;
 }
 
-#jtalkTabs li span.close:hover {
-    color: #e72a2a;
+#jtalk .rtab {
+    margin-right: 1px;
 }
 
-#jtalkTabs li.closeAll {
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    background: #ef3b3b;
-    color: #e3e3e3;
-    font-weight: bold;
-    border: 1px solid #ac1616;
-    margin: 4px;
-    padding: 2px 6px;
-    font-size: 10px;
+#jtalk .mtab {
+    line-height: 20px;
+}
+
+#jtalkTabs li:hover .ltab,
+#jtalk .jt_tabs li:hover .ltab {
+    background: url("../images/sprite.png") -16px -96px;
 }
 
-#jtalkTabs li.closeAll:hover {		
-    background: #e72a2a;
+#jtalkTabs li:hover .mtab,
+#jtalk .jt_tabs li:hover .mtab {
+    background: url("../images/sprite.png") 0 -73px;
+}
+
+#jtalkTabs li:hover .rtab,
+#jtalk .jt_tabs li:hover .rtab {
+    background: url("../images/sprite.png") -24px -96px;
+}
+
+#jtalkTabs li.selected,
+#jtalk .jt_tabs li.selected {
+    color: #111;
+}
+
+#jtalkTabs li.selected .ltab,
+#jtalk .jt_tabs li.selected .ltab {
+    background: url("../images/sprite.png") 0px -96px;
+}
+
+#jtalkTabs li.selected .mtab,
+#jtalk .jt_tabs li.selected .mtab {
+    background: url("../images/sprite.png") 0 -50px;
+}
+
+#jtalkTabs li.selected .rtab,
+#jtalk .jt_tabs li.selected .rtab {
+    background: url("../images/sprite.png") -8px -96px;
+}
+
+#jtalkTabs li .close {
+    margin-right: 5px;
+    color: #aaa;
 }
 
 #jtalk {
        position: fixed;
-       bottom: 27px;
+       bottom: 0;
        left: 0;
        right: 0;
        height: 330px;
        z-index: 1000;
 }
 
+#jtalk, #jtalk button, #jtalk input, #jtalk select {
+       font-family: Lucida Grande, Tahoma, sans-serif;
+       font-size: 11px;
+}
+
+#jtalk #logo {
+    position: absolute;
+    top: 3px;
+    left: 8px;
+    width: 22px;
+    height: 20px;
+    background: url("../images/tinylogo.png") top left no-repeat;
+}
+
+#jtalk #jt_toolbar {
+    height: 27px;
+    background: url("../images/sprite.png") 0 0;
+}
+
+#jtalk #jt_toolbar input {
+    margin-left: 50px;
+    width: 250px;
+}
+
+#jtalk #jt_toolbar #jt_close {
+    position: absolute;
+    right: 4px;
+    top: 6px;
+    width: 16px;
+    height: 16px;
+    background: url('../images/off.png');
+    cursor: pointer;
+}
+
+#jtalk #jt_toolbar #jt_close:hover {
+    background: url('../images/offHover.png');
+}
+
+
 #jtalk .ui-resizable-handle {
-    background-color: #a8a8a8;
+    background-color: transparent;
     top: 0;
     cursor: row-resize;
-    height: 4px;
+    height: 5px;
     left: 0;
     position: absolute;
     right: 0;
@@ -83,35 +135,35 @@ body.jtalkBody {
 }
 
 .jtalkTool {
-    width: 98%;
-    background: #dbdbdb;
-    border-style: solid;
-    border-width: 1px;
-    border-color: #a8a8a8;
-    color: @dark;
-    font-family: Arial, Helvetica, sans;
-    font-size: 12px;
-    line-height: 1.5em;
-    padding: 15px 1%;
+    width: 100%;
+    color: #333;
+    line-height: 1.3em;
+    padding: 0;
+    margin: 0;
     position: absolute;
     bottom: 0;
     left: 0;
-    top: 4px;
+    top: 49px;
     z-index: 1000;
+    background: white;
 }
 
 .jtalkTool .jt_box {
-    width: 98%;
+    width: 100%;
     margin: 0;
     position: absolute;
-    top: 15px;
-    bottom: 45px;
+    top: 0;
+    bottom: 27px;
 }
 
 .jtalkTool .jt_buttons {
     position: absolute;
-    width: 98%;
-    bottom: 15px;    
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 27px;
+    line-height: 27px;
+    background: url("../images/sprite.png") 0 0 repeat;
 }
 
 .jtalkTool .jt_buttons .right {
@@ -122,36 +174,65 @@ body.jtalkBody {
     font-weight: bold;
 }
 
+
+.jtalkTool button {
+    border: 1px solid transparent;
+    background: transparent;
+    padding: 2px 4px;
+    margin-left: 4px;
+    cursor: pointer;
+}
+
+.jtalkTool button:hover {
+    border-top: 1px solid #fff;
+    border-left: 1px solid #fff;
+    border-right: 1px solid #bbb;
+    border-bottom: 1px solid #bbb;
+}
+
+.jtalkTool  button:active {
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #fff;
+    border-bottom: 1px solid #fff;
+    background: #ddd;
+}
+
+.jtalkTool select, #jtalk input {
+    border-top: 1px solid #bbb;
+    border-left: 1px solid #bbb;
+    border-right: 1px solid #fff;
+    border-bottom: 1px solid #fff;
+    background: #fff;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
 .jtalkTool li {
     margin: 0;
     padding: 0;
 }
     
-.jtalkTool .jt_buttons button,
-.jtalkTool .jt_buttons select {
-    font-size: 12px;
-}
-
 .jtalkTool .source {
     height: 100%;
 }
 
 .jtalkTool textarea,
 .jtalkTool input {
-    border: 1px solid;
-    border-color: #a8a8a8;
+    border: 0 none;
     font-family: Arial, Helvetica, sans;
-    line-height: 1.2em;
-    font-size: 13px;
+    line-height: 1.3em;
+    font-size: 12px;
     position: relative;
     padding: 0;
 }
 
 .jtalkTool .CodeMirror {
-    border: 1px solid;
-    border-color: #a8a8a8;
+    border: 0 none;
     font-family: Arial, Helvetica, sans;
-    font-size: 13px;
+    font-size: 12px;
     line-height: 1.3em;
     height: 100%;
     background: white;
@@ -177,42 +258,28 @@ body.jtalkBody {
 
 .jtalkTool .jt_commit {
     position: absolute;
-    top: 140px;
+    top: 129px;
     left: 0;
-    font-size: 12px;
+    z-index: 1;
 }
 
 .jtalkTool .jt_column {
-    width: 24%;
+    width: 25%;
     padding: 0;
     margin: 0;
     float: left;
-    border: 1px solid;
-    border-color: #a8a8a8;
+    outline: 1px solid #aaa;
+    border: 0 none;
     height: 130px;
-    overflow-y: scroll;
+    overflow-y: auto;
     background: #fff;
+    color: #111;
     position: absolute;
     top: 0;
 }
 
-.jtalkTool .jt_column.value {
-    left: 25.2%;
-    width: 74.8%;
-}
-
-.jtalkTool .jt_column.browser {
-    top: 30px;
-}
-
-.jtalkTool .jt_column.categories {
-    left: 0%;
-    height: 105px;
-}
-
 .jtalkTool .jt_column.classes {
-    height: 105px;
-    left: 25.2%
+    left: 25%
 }
 
 .jtalkTool .jt_column.classes ul {
@@ -225,18 +292,18 @@ body.jtalkBody {
 }
 
 .jtalkTool .jt_column.protocols {
-    left: 50.4%
+    left: 50%
 }
 
 .jtalkTool .jt_column.methods {
-    left: 75.6%
+    left: 75%
 }
 
 .jtalkTool .jt_column li {
     list-style-type: none;
     padding-left: 5px;
     cursor: pointer;
-    color: #333;
+    color: #111;
     font-weight: bold;
 }
 
@@ -250,46 +317,18 @@ body.jtalkBody {
     color: white;
 }
 
-.jtalkTool .jt_tabs {
-    top: 136px;
+#jtalk .jtalkTool .jt_tabs {
+    top: 130px;
     position: absolute;
-    left: 25.2%;
-    padding: 0;
-    margin: 0;
-}
-
-.jtalkTool .jt_tabs li {
-    color: #666;
-    font-weight: bold;
-    cursor: pointer;
-    list-style-type: none;
-    float: left;
-    padding: 2px 4px;
-    margin-right: 2px;
-    background: #ccc;
-    border: 1px solid #a8a8a8;
-    -moz-border-radius-bottomleft: 8px;
-    -moz-border-radius-bottomright: 8px;
-    -webkit-border-bottom-left-radius: 8px;
-    -webkit-border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    height: 20px;
-    line-height: 18px;
 }
 
-.jtalkTool .jt_tabs li.selected,
-.jtalkTool .jt_tabs li.selected:hover {
-    background: white;
-    border: 1px solid #b3b3b3;
-    border-top: 1px solid white;
-    color: #222;
+#jtalk .jtalkTool .jt_tabs.jt_browser {
+    padding-left: 25%;
 }
 
-
 .jtalkTool .jt_sourceCode {
     position: absolute;
-    top: 175px;
+    top: 152px;
     bottom: 0;
     left: 0;
     right: 0;
@@ -303,39 +342,42 @@ body.jtalkBody {
 /* Debugger & inspector */
 
 .jtalkTool .jt_box .label {
-	width: 98%;
+	width: 100%;
 	font-weight: bold;
 	text-align: center;
 	position: absolute;
-	line-height: 1.2em;
+	line-height: 1.5em;
 	font-size: 16px;
 	color: red;
+	background: url("../images/sprite.png") top left repeat;
+	height: 27px;
 }
 
 .jtalkTool .jt_box .jt_column.debugger {
-    top: 175px;
+    top: 158px;
 }
 
 .jtalkTool .jt_box .jt_column.debugger.contexts {
-    top: 30px;
+    top: 27px;
     width: 100%;
 }
 
 .jtalkTool .jt_sourceCode.debugger {
     width: 60%;
+    top: 158px;
 }
 
 .jtalkTool .jt_box .jt_column.debugger.variables {
     width: 10%;
-    left: 61%;
+    left: 60%;
     bottom: 0;
     position: absolute;
     height: auto;
 }
 
 .jtalkTool .jt_box .jt_column.debugger.inspector {
-    width: 28%;
-    left: 72%;
+    width: 30%;
+    left: 70%;
     bottom: 0;
     position: absolute;
     height: auto;
@@ -343,12 +385,17 @@ body.jtalkBody {
 
 .jtalkTool .jt_button.debugger.inspect {
     position: absolute;
-    left: 61%;
+    left: 60%;
+}
+
+.jtalkTool .jt_column.value {
+    left: 25%;
+    width: 75%;
 }
 
 .jtalkTool .jt_buttons.inspector {
     position: absolute;
-    top: 140px;
+    top: 130px;
 }
 
 
@@ -361,18 +408,18 @@ body.jtalkBody {
 .jtalkTool .jt_box .jt_column.implementors,
 .jtalkTool .jt_box .jt_column.senders,
 .jtalkTool .jt_box .jt_column.referenced_classes {
-	top: 30px;
-	height: 100%;
-	bottom: 0px;
-	width: 33%;
+	top: 20px;
+	height: auto;
+	bottom: 0;
+	width: 33.333%;
 }
 
 .jtalkTool .jt_box .jt_column.senders {
-	left: 33.6%
+	left: 33.333%
 }
 
 .jtalkTool .jt_box .jt_column.referenced_classes {
-        left: 67.3%
+        left: 66.67%
 }
 
 .jtalkTool .jt_box .jt_column.implementors .column_label, 
@@ -416,10 +463,10 @@ body.jtalkBody {
 
 .jtalkTool .sunit.status {
 	position: absolute;
-	left: 50.4%;
-	width: 49%;
+	left: 50%;
+	width: 50%;
+	outline: 1px solid #aaa;
 	background: white;
-	border: 1px solid #a8a8a8;
 	height: 40px
 }
 
@@ -440,11 +487,11 @@ body.jtalkBody {
 
 .jtalkTool .progress_bar {
 	position: absolute;
-	left: 50.4%;
-	width: 49%;
-	top: 50px;
-	border: 1px solid #a8a8a8;
+	left: 50%;
+	width: 50%;
+	top: 40px;
 	background: white;
+	outline: 1px solid #aaa;
 	min-height: 20px
 }
 
@@ -453,17 +500,17 @@ body.jtalkBody {
 	min-height: 20px;
 }
 
-.jtalkTool .jt_column.sunit.methods {
-	left: 50.4%;
+.jtalkTool .jt_column.results.sunit {
+	left: 50%;
 	height: auto;
-        width: 49%;
-        top: 80px;
+        width: 50%;
+        top: 62px;
         bottom: 0;
 }
 
-.jtalkTool .jt_column.sunit.methods .errors {
+.jtalkTool .jt_column.sunit.results .errors {
     color: red;
 }
 
-.jtalkTool .jt_column.sunit.methods ul {padding: 0; margin: 0}
+/*.jtalkTool .jt_column.sunit.results ul {padding: 0; margin: 0}*/
 

st/IDE.st

@@ -1,5 +1,5 @@
 Widget subclass: #TabManager
-	instanceVariableNames: 'selectedTab tabs opened ul'
+	instanceVariableNames: 'selectedTab tabs opened ul input'
 	category: 'IDE'!
 
 !TabManager methodsFor: 'accessing'!
@@ -20,11 +20,11 @@ labelFor: aWidget
 !TabManager methodsFor: 'actions'!
 
 updateBodyMargin
-    self setBodyMargin: '#jtalk' asJQuery height + 27
+    self setBodyMargin: '#jtalk' asJQuery height
 !
 
 updatePosition
-    <jQuery('#jtalk').css('top', '').css('bottom', '27px')>
+    <jQuery('#jtalk').css('top', '').css('bottom', '0px')>
 !
 
 removeBodyMargin
@@ -86,6 +86,14 @@ closeTab: aWidget
     self selectTab: self tabs last.
     aWidget remove.
     self update
+!
+
+search: aString
+	| searchedClass |
+	searchedClass := Smalltalk current at: aString.
+		searchedClass isClass
+			ifTrue: [Browser openOn: searchedClass]
+			ifFalse: [ReferencesBrowser search: aString]
 ! !
 
 !TabManager methodsFor: 'adding/Removing'!
@@ -107,9 +115,9 @@ initialize
     super initialize.
     opened := true.
     'body' asJQuery 
-	append: self;
 	append: [:html | html div id: 'jtalk'];
 	addClass: 'jtalkBody'.
+    '#jtalk' asJQuery append: self.
     self 
 	addTab: Transcript current;
 	addTab: Workspace new;
@@ -123,6 +131,8 @@ initialize
 !TabManager methodsFor: 'rendering'!
 
 renderOn: html
+	html div id: 'logo'.
+	self renderToolbarOn: html.
 	ul := html ul
 		id: 'jtalkTabs';
 		yourself.
@@ -135,28 +145,45 @@ renderTabFor: aWidget on: html
     selectedTab = aWidget ifTrue: [
 	li class: 'selected'].
     li with: [
-        aWidget canBeClosed ifTrue: [
-	    html span 
-		class: 'close';
-		with: 'x';
-		onClick: [self closeTab: aWidget]].
+        html span class: 'ltab'.
 	html span
-	    with: (self labelFor: aWidget);
-	    onClick: [self selectTab: aWidget]]
+     	    class: 'mtab';
+      	    with: [
+        	aWidget canBeClosed ifTrue: [
+	    		html span 
+				class: 'close';
+				with: 'x';
+			onClick: [self closeTab: aWidget]].
+	    		html span
+              			with: (self labelFor: aWidget);
+	    			onClick: [self selectTab: aWidget]].
+        html span class: 'rtab'].
 !
 
 renderTabs
 	ul contents: [:html |
-	    html li 
-		class: 'closeAll';
-		with: 'x';
-		onClick: [self close].
 	    self tabs do: [:each |
 		self renderTabFor: each on: html].
 	    html li
 		class: 'newtab';
-		with: ' + ';
+		with: [
+                	html span class: 'ltab'.
+                	html span class: 'mtab'; with: ' + '.
+                	html span class: 'rtab'];
 		onClick: [self newBrowserTab]]
+!
+
+renderToolbarOn: html
+	html div 
+		id: 'jt_toolbar';
+		with: [
+			input := html input 
+				class: 'implementors';
+				yourself.
+			input onKeyPress: [:event |
+				event keyCode = 13 ifTrue: [
+				self search: input asJQuery val]].
+                	html div id: 'jt_close'; onClick: [self close]]
 ! !
 
 !TabManager methodsFor: 'updating'!
@@ -258,7 +285,7 @@ TabWidget subclass: #Workspace
 !Workspace methodsFor: 'accessing'!
 
 label
-    ^'[Workspace]'
+    ^'Workspace'
 ! !
 
 !Workspace methodsFor: 'actions'!
@@ -311,7 +338,7 @@ TabWidget subclass: #Transcript
 !Transcript methodsFor: 'accessing'!
 
 label
-    ^'[Transcript]'
+    ^'Transcript'
 ! !
 
 !Transcript methodsFor: 'actions'!
@@ -377,7 +404,7 @@ clear
 ! !
 
 TabWidget subclass: #Browser
-	instanceVariableNames: 'selectedCategory selectedClass selectedProtocol selectedMethod commitButton categoriesList classesList protocolsList methodsList sourceArea tabsList selectedTab saveButton classButtons methodButtons unsavedChanges input'
+	instanceVariableNames: 'selectedCategory selectedClass selectedProtocol selectedMethod commitButton categoriesList classesList protocolsList methodsList sourceArea tabsList selectedTab saveButton classButtons methodButtons unsavedChanges'
 	category: 'IDE'!
 
 !Browser methodsFor: 'accessing'!
@@ -385,7 +412,7 @@ TabWidget subclass: #Browser
 label
     ^selectedClass 
 	ifNil: ['Browser (nil)']
-	ifNotNil: [selectedClass name]
+	ifNotNil: ['Browser: ', selectedClass name]
 !
 
 categories
@@ -644,7 +671,7 @@ setMethodProtocol: aString
 addNewProtocol
     | newProtocol |
     newProtocol := self prompt: 'New method protocol'.
-    newProtocol notEmpty ifTrue: [
+    (newProtocol notNil and: [newProtocol notEmpty]) ifTrue: [
 	selectedMethod category: newProtocol.
 	self setMethodProtocol: newProtocol]
 !
@@ -751,7 +778,6 @@ renderTopPanelOn: html
     html div 
 	class: 'top'; 
 	with: [
-	    self renderInputOn: html.
 	    categoriesList := html ul class: 'jt_column browser categories'.
 	    commitButton := html button 
 		class: 'jt_commit';
@@ -771,7 +797,7 @@ renderTopPanelOn: html
 !
 
 renderTabsOn: html
-    tabsList := html ul class: 'jt_tabs'.
+    tabsList := html ul class: 'jt_tabs jt_browser'.
     self updateTabsList.
 !
 
@@ -803,15 +829,6 @@ renderButtonsOn: html
 		html button with: 'InspectIt';
 			onClick: [sourceArea inspectit]]. 
     self updateSourceAndButtons
-!
-
-renderInputOn: html 
-	input := html input 
-		class: 'implementors';
-		yourself.
-	input onKeyPress: [:event |
-		event keyCode = 13 ifTrue: [
-			self search: input asJQuery val]]
 ! !
 
 !Browser methodsFor: 'testing'!
@@ -876,17 +893,26 @@ updateTabsList
 	li := html li.
 	selectedTab = #instance ifTrue: [li class: 'selected'].
 	li
-	    with: 'Instance';
+	    with: [
+              	html span class: 'ltab'.
+              	html span class: 'mtab'; with: 'Instance'.
+              	html span class: 'rtab'];
 	    onClick: [self selectTab: #instance].
 	li := html li.
 	selectedTab = #class ifTrue: [li class: 'selected'].
 	li
-	    with: 'Class';
+	    with: [
+              	html span class: 'ltab'.
+              	html span class: 'mtab'; with: 'Class'.
+              	html span class: 'rtab'];
 	    onClick: [self selectTab: #class].
 	li := html li.
 	selectedTab = #comment ifTrue: [li class: 'selected'].
 	li
-	    with: 'Comment';
+	    with: [
+              	html span class: 'ltab'.
+              	html span class: 'mtab'; with: 'Comment'.
+              	html span class: 'rtab'];
 	    onClick: [self selectTab: #comment]]
 !
 
@@ -1047,7 +1073,7 @@ renderTopPanelOn: html
 		with: [
 			variablesList := html ul class: 'jt_column variables'.
 			valueTextarea := html textarea class: 'jt_column value'; at: 'readonly' put: 'readonly'.
-                  	html div class: 'jt_buttons inspector'; with: [
+                  	html div class: 'jt_tabs inspector'; with: [
           			html button
                   			class: 'jt_button inspector refresh';
 					with: 'Refresh';
@@ -1144,7 +1170,7 @@ implementors
 !
 
 label
-	^'[ReferencesBrowser]'
+	^'[References]'
 !
 
 selector
@@ -1889,7 +1915,7 @@ TabWidget subclass: #TestRunner
 !TestRunner methodsFor: 'accessing'!
 
 label
-    ^'[SUnit]'
+    ^'SUnit'
 !
 
 categories
@@ -2046,7 +2072,7 @@ renderClassesOn: html
 renderResultsOn: html
     	statusDiv := html div.
 	html with: self progressBar.
-   	methodsList := html ul class: 'jt_column sunit methods'.
+   	methodsList := html ul class: 'jt_column sunit results'.
 	self updateMethodsList.
 	self updateStatusDiv
 !