Add "close button"

[sh19910711]

The main changes of this pull request are the followings:

• Change styles of the resizer element
• Change the positioning of the console elements
• Add "Close button"
• Add "Minimize button"

Well, the absolute positioning is to add more elements like the resizer element. For example, I think to add "minimize button", "close button" and "setting button" to the console, and the absolute positioning is able to show multiple elements like that to the top of the console element.

The quoted text is from PR #139.

GIF

Issue #121

[sh19910711]

I have pushed commits as the first version which contains wip-commits for code reviews. Thanks.

[gsamokovarov]

Because we share the browser space with user content, I think we shouldn't waste that much real estate with the resize bar. We can keep it as is, and provide just the close button. If people want the console out of the way, they can just resize it down. Further more, we can probably drop the outline of the close button and show it only when the mouse hovers the console (so again, we save the real estate).

We also should be able to opt-out of this behaviour for the browser extensions.

[sh19910711]

@gsamokovarov Thanks for the reply.

Because we share the browser space with user content, I think we shouldn't waste that much real estate with the resize bar.

I understand that.

We can keep it as is, and provide just the close button. If people want the console out of the way, they can just resize it down.

And I also agree with that.

Further more, we can probably drop the outline of the close button and show it only when the mouse hovers the console (so again, we save the real estate).

Uhm, I'm not quite sure of that. The next link shows my interpretation: http://jsfiddle.net/bmvfLkjq/4/

Let me know if it is incorrect.

We also should be able to opt-out of this behaviour for the browser extensions.

Yeah, I think to add a config of the REPLConsole constructor.

Thank you.

[gsamokovarov]

Uhm, I'm not quite sure of that. The next link shows my interpretation: http://jsfiddle.net/bmvfLkjq/4/

My thought was to keep the resize bar transparent as before. We may not have the close button attached to it (at least visually), having the close boutton couple of pixels down to the right of it may cut it. Something like this ASCII:

+---------------------------+  <- You can assume that this line is
|                         + |     the resize bar :-)
|                           |
|                           |
|                           |
|                           |
+---------------------------+

Yeah, I think to add a config of the REPLConsole constructor.

Exactly.

[sh19910711]

@gsamokovarov Thanks for giving an example :-) OK, I will think of it.

[sh19910711]

I have pushed new version with the following changes:

• Remove the minimize button
• The shiftConsoleActions() is for the fixed positioning

@gsamokovarov Hi, could you review the code again?

And here is a gif:

Thank you.

[gsamokovarov]

Can we make the close button a bit bigger? Say font-size: 13px, width: 14px; height: 14px; line-height: 14px;, I tested on my machine and it looks reasonable.

[gsamokovarov]

Thanks @sh19910711, this looks great! Now that we have templates tests infrastructure, we can try to write a regression test for this.

[sh19910711]

Now that we have templates tests infrastructure, we can try to write a regression test for this.

OK, I will try it.

Thanks for taking time to check :)

[gsamokovarov]

Isn't there assert.nil or something in the lines of?

[sh19910711]

Yes, I found assert.isNull :)

http://chaijs.com/api/assert/#isNull-section

[gsamokovarov]

Let's use it then :)

[sh19910711]

Updated (and here is a diff). The SpecHelper.prepareStageElement() is to do as its name implies.