[WIP] Display keyboard shortcuts in dropdown menu

resources/helios.css

@@ -21,7 +21,7 @@ body.navigation .CodeMirror pre {
 body[id="helios"] {
   font-size: 11px;
   font-family: "Bitstream Vera Sans", "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
-  background: #eeeeee url(squared_metal.png) repeat;
+  background: #eee url(squared_metal.png) repeat;
 }
 body[id="helios"] a {
   cursor: pointer;
@@ -547,10 +547,10 @@ body[id="helios"] .tool_container .list-label {
   border-bottom: 1px solid #999;
   border-top: 1px solid #eee;
   background-color: #eee;
-  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
-  background-image: linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -webkit-linear-gradient(top, #eee, #ddd);
+  background-image: -moz-linear-gradient(top, #eee, #ddd);
+  background-image: -o-linear-gradient(top, #eee, #ddd);
+  background-image: linear-gradient(top, #eee, #ddd);
   color: #444;
   font-weight: bold;
   text-shadow: 0 0 0;
@@ -656,14 +656,14 @@ body[id="helios"] .pane_actions.form-group .btn.btn-default {
   text-shadow: #ddd 0px 1px 0px;
   color: #222;
   background: #bbb;
-  background-image: linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
-  background-image: -webkit-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
-  background-image: -moz-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
-  background-image: -o-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+  background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+  background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+  background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
 }
 body[id="helios"] .tool_container .panes .pane .class_side .nav-pills {
   font-weight: bold;
-  background: #ffffdd;
+  background: #ffd;
 }
 body[id="helios"] .key_helper {
   z-index: 2001;
@@ -715,10 +715,10 @@ body[id="helios"] .key_helper .action {
   font-weight: bold;
 }
 body[id="helios"] .key_helper .selected {
-  background-image: linear-gradient(top, #cccccc, #bbbbbb);
-  background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb);
-  background-image: -o-linear-gradient(top, #cccccc, #bbbbbb);
-  background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: linear-gradient(top, #ccc, #bbb);
+  background-image: -moz-linear-gradient(top, #ccc, #bbb);
+  background-image: -o-linear-gradient(top, #ccc, #bbb);
+  background-image: -webkit-linear-gradient(top, #ccc, #bbb);
   height: 28px;
   padding: 0 8px;
   font-weight: bold;
@@ -782,7 +782,7 @@ body[id="helios"] #helper {
   color: #ddd;
   font-size: 18px;
   font-weight: bold;
-  text-shadow: 0 -1px 0 #111111;
+  text-shadow: 0 -1px 0 #111;
   padding: 20px;
   background: rgba(0, 0, 0, 0.6);
   border-radius: 40px;
@@ -885,10 +885,10 @@ body[id="helios"] .dialog .progress {
 body[id="helios"] .confirmation .progress .progress-bar,
 body[id="helios"] .dialog .progress .progress-bar {
   background-color: #e9eaf5;
-  background-image: -webkit-linear-gradient(top, #b1bdd5, #8999b8);
-  background-image: -moz-linear-gradient(top, #b1bdd5, #8999b8);
-  background-image: -o-linear-gradient(top, #b1bdd5, #8999b8);
-  background-image: linear-gradient(top, #b1bdd5, #8999b8);
+  background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
+  background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
+  background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
+  background-image: linear-gradient(top, #B1BDD5, #8999b8);
 }
 body[id="helios"] .confirmation span,
 body[id="helios"] .dialog span {
@@ -915,11 +915,11 @@ body[id="helios"] .button {
   text-align: center;
   margin: 0;
   margin-left: 10px;
-  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
-  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
-  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
-  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
-  background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #fff;
+  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #fff;
+  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #fff;
+  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #fff;
+  background: linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #fff;
   font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
 }
 body[id="helios"] .button.default {
@@ -1012,7 +1012,7 @@ body[id="helios"] .hl_debugger .head {
   position: absolute;
   top: 23px;
   width: 100%;
-  background: #0088cc url(debugger.png) 10px center no-repeat;
+  background: #08c url(debugger.png) 10px center no-repeat;
   border-bottom: 1px solid white;
 }
 body[id="helios"] .hl_debugger .head h2 {
@@ -1025,3 +1025,13 @@ body[id="helios"] .hl_debugger .head h2 {
 body[id="helios"] .progress {
   border-radius: 0;
 }
+body[id="helios"] .context_menu a {
+  display: flex;
+  justify-content: space-between;
+}
+body[id="helios"] .context_menu .badge {
+  margin-left: 0.5rem;
+  font-weight: normal;
+  color: inherit;
+  background-color: #ddd;
+}

resources/helios.less

@@ -239,7 +239,7 @@ body[id="helios"] {
 				text-decoration: none;
 			}
 		}
-		
+
 		.dropdown-menu {
 			left: auto;
 			float: right;
@@ -428,7 +428,7 @@ body[id="helios"] {
 
 		color: #666;
 		font-size: 14px;
-		
+
 		h2 {
 			text-align: center;
 			color: #666;
@@ -442,7 +442,7 @@ body[id="helios"] {
 			width: 150px;
 		}
 	}
-	
+
 	.sunit.status {
 		&.success {
 			background: #43d443;
@@ -1149,7 +1149,7 @@ body[id="helios"] {
 	}
 
 	.hl_debugger {
-		
+
 		.tool_container {
 			top: 53px;
 		}
@@ -1174,4 +1174,22 @@ body[id="helios"] {
         .progress {
             border-radius: 0;
         }
+
+	.context_menu {
+		 a {
+			 display: flex;
+			 justify-content: space-between;
+			 align-items: center;
+
+		 }
+
+		 .badge {
+			 margin-left: 0.5rem;
+			 font-weight: normal;
+			 color: inherit;
+			 background-color: #ddd;
+		 }
+	}
+
+
 }

src/Helios-Core.js

@@ -4528,13 +4528,13 @@ $core.addMethod(
 $core.method({
 selector: "renderMenuOn:",
 protocol: "rendering",
-fn: function (html){
+fn: function(html){
 var self=this,$self=this;
 var commands;
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx1) {
 //>>excludeEnd("ctx");
-var $1,$3,$4,$5,$7,$6,$2;
+var $1,$3,$4,$5,$7,$10,$9,$8,$6,$2;
 var $early={};
 try {
 commands=$self._menuCommands();
@@ -4543,7 +4543,7 @@ throw $early=[self];
 
 }));
 $1=$recv(html)._div();
-$recv($1)._class_("btn-group cog");
+$recv($1)._class_("btn-group cog context_menu");
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 $ctx1.sendIdx["class:"]=1;
 //>>excludeEnd("ctx");
@@ -4578,6 +4578,9 @@ $ctx2.sendIdx["with:"]=2;
 $4;
 $5=$recv(html)._ul();
 $recv($5)._class_("dropdown-menu pull-right");
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx2.sendIdx["class:"]=4;
+//>>excludeEnd("ctx");
 $6=$recv($5)._with_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx3) {
@@ -4591,14 +4594,36 @@ return $recv($recv(html)._li())._with_((function(){
 return $core.withContext(function($ctx5) {
 //>>excludeEnd("ctx");
 $7=$recv(html)._a();
-$recv($7)._with_($recv(each)._menuLabel());
+$recv($7)._with_((function(){
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx6) {
+//>>excludeEnd("ctx");
+$recv(html)._with_($recv(each)._menuLabel());
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx6.sendIdx["with:"]=6;
+//>>excludeEnd("ctx");
+$10=$recv(html)._span();
+$recv($10)._class_("badge");
+$9=$recv($10)._with_("c c");
+$8=$recv(html)._with_($9);
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx6.sendIdx["with:"]=7;
+//>>excludeEnd("ctx");
+return $8;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx6) {$ctx6.fillBlock({},$ctx5,7)});
+//>>excludeEnd("ctx");
+}));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx5.sendIdx["with:"]=5;
+//>>excludeEnd("ctx");
 return $recv($7)._onClick_((function(){
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
 return $core.withContext(function($ctx6) {
 //>>excludeEnd("ctx");
 return $self._execute_(each);
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
-}, function($ctx6) {$ctx6.fillBlock({},$ctx5,7)});
+}, function($ctx6) {$ctx6.fillBlock({},$ctx5,8)});
 //>>excludeEnd("ctx");
 }));
 //>>excludeStart("ctx", pragmas.excludeDebugContexts);
@@ -4636,10 +4661,10 @@ catch(e) {if(e===$early)return e[0]; throw e}
 },
 //>>excludeStart("ide", pragmas.excludeIdeData);
 args: ["html"],
-source: "renderMenuOn: html\x0a\x09| commands |\x0a\x09\x0a\x09commands := self menuCommands.\x0a\x09commands ifEmpty: [ ^ self ].\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'btn-group cog';\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09\x09class: 'btn btn-default dropdown-toggle';\x0a\x09\x09\x09\x09at: 'data-toggle' put: 'dropdown';\x0a\x09\x09\x09\x09with: [ (html tag: 'i') class: 'glyphicon glyphicon-chevron-down' ].\x0a\x09\x09html ul \x0a\x09\x09\x09class: 'dropdown-menu pull-right';\x0a\x09\x09\x09with: [ \x0a\x09\x09\x09\x09commands do: [ :each | \x0a\x09\x09\x09\x09\x09html li with: [ html a \x0a\x09\x09\x09\x09\x09\x09with: each menuLabel;\x0a\x09\x09\x09\x09\x09\x09onClick: [ self execute: each ] ] ] ] ]",
+source: "renderMenuOn: html\x0a\x09| commands |\x0a\x09\x0a\x09commands := self menuCommands.\x0a\x09commands ifEmpty: [ ^ self ].\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'btn-group cog context_menu';\x0a\x09\x09with: [\x0a\x09\x09\x09html a\x0a\x09\x09\x09\x09class: 'btn btn-default dropdown-toggle';\x0a\x09\x09\x09\x09at: 'data-toggle' put: 'dropdown';\x0a\x09\x09\x09\x09with: [ (html tag: 'i') class: 'glyphicon glyphicon-chevron-down' ].\x0a\x09\x09html ul \x0a\x09\x09\x09class: 'dropdown-menu pull-right';\x0a\x09\x09\x09with: [ \x0a\x09\x09\x09\x09commands do: [ :each | \x0a\x09\x09\x09\x09\x09html li with: [ html a \x0a\x09\x09\x09\x09\x09\x09with: [ html with: each menuLabel;\x0a\x09\x09\x09\x09\x09\x09\x09with: (html span class: 'badge'; with: 'c c') ];\x0a\x09\x09\x09\x09\x09\x09onClick: [ self execute: each ] ] ] ] ]",
 referencedClasses: [],
 //>>excludeEnd("ide");
-messageSends: ["menuCommands", "ifEmpty:", "class:", "div", "with:", "a", "at:put:", "tag:", "ul", "do:", "li", "menuLabel", "onClick:", "execute:"]
+messageSends: ["menuCommands", "ifEmpty:", "class:", "div", "with:", "a", "at:put:", "tag:", "ul", "do:", "li", "menuLabel", "span", "onClick:", "execute:"]
 }),
 $globals.HLToolListWidget);
 

src/Helios-Core.st

@@ -1072,7 +1072,7 @@ renderMenuOn: html
 	commands ifEmpty: [ ^ self ].
 	
 	html div 
-		class: 'btn-group cog';
+		class: 'btn-group cog context_menu';
 		with: [
 			html a
 				class: 'btn btn-default dropdown-toggle';
@@ -1083,7 +1083,8 @@ renderMenuOn: html
 			with: [ 
 				commands do: [ :each | 
 					html li with: [ html a 
-						with: each menuLabel;
+						with: [ html with: each menuLabel;
+							with: (html span class: 'badge'; with: 'c c') ];
 						onClick: [ self execute: each ] ] ] ] ]
 ! !