Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag
All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.
Clicking on "Account orders history" replaces the blockchain orders with your personal orders.
Volume, high, low and change are for the current day.
Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.
Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.
For the courageous you can check it out by pulling the branch from github as always.
Nice job!
Can you include other screenshots like what it looks like when you flip the market or when you press the "Margin calls" or "Shorts" buttons.
Also, I think you should allow the left column to change width as necessary to fit the tables (so that the open margin orders table can appear under the Cover tab), and just push the other columns to the right (meaning allow for horizontal scroll on smaller screens). In that case, I think it would be better to switch the middle (price history) column with the right (market depth) column, because as Shentist said it is the more important information especially when you are ready to buy and sell. And, it would be nice if the left column could be a drawer that you could hide and pull out as desired. On smaller screens you could see the market depth and price history columns, and then when you are ready to place or cancel orders, you can pull out the drawer which might push the price history column slightly off-screen (it could be reached via horizontal scrolling though). When you are done you can again hide the drawer and see the full market depth and price history columns in the browser window. And on larger screens, the drawer could be left open and all three columns would be visible at all times.
Edit:
Also, I would really like to see the following under the "BitUSD : BTS" label:
Show quantity in [ BitUSD |v] Show price in [ BTS/BitUSD |v]
Where the [ ... |v] are drop down boxes.
The first drop down box would have two classes of items. The first class is the Base class, which in this case would include BTS as well potentially other SI variations of BTS units such as kBTS (these other options other than the base unit would have to be manually specified per asset type). The second class is the Quote class, which in this case would include BitUSD as well as its other potential (manually specified) SI variations. Changing the quantity selection would make replacements everywhere a quantity field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table, the vertical axis of the volume bar charts under the price history chart, the vertical axis of the market depth chart, and the Volume label.
Each class of items would have a default unit choice. The default selection to display the quantity fields would be the default unit choice within the Base class. So in a "BitUSD : BTS" market the default quantity display selection would be the default choice in the BTS class (perhaps kBTS would be a good default in this class). In the "BTS : BitUSD" marekt the default quantity display selection would be the default choice in the BitUSD class (perhaps just sticking with BitUSD would be a good default in this class).
The second drop down box would have various items for different units of a Base/Quote price (thus BTS/BitUSD in the "BitUSD : BTS" market). Inverting the prices would require flipping the market. However, the drop down would allow displaying the price in different units within this Base/Quote price class. There would always be the typical option (in this case BTS/BitUSD or BitUSD/BTS), but other options could be manually added for each market. For example, in the "BTS : BitUSD" market one might add BitUSD/kBTS unit as an option. And in fact, that might be chosen as the default price unit in the "BTS : BitUSD" market since the prices (currently) look nicer in BitUSD/kBTS (for example the price feed right now in the "BTS : BitUSD" market is around 8.08 BitUSD/kBTS). Changing the price selection would make replacements everywhere a price field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table, the vertical axis of the price history chart, the horizontal axis of the market depth chart, and the High, Low, Latest Price, and Call Price labels.
A few other things.
All non-editable quantity fields should show the same number of decimal places everywhere (with proper rounding) and all non-editable price fields should show the same number of decimal places everywhere (with proper rounding). Right now the prices in the tables have 3 decimal places while the prices in the labels at the top have 4 decimal places. Even worse, the volume label is displayed in BTS (and so is the market depth chart vertical axis) while all other quantity fields are in BitUSD. In my opinion these should all be the same unit (as described above) and also the number of decimal places in the Volume label at the top should be the same as the decimal places in quantity fields in the tables. However, clicking on a particular order from the Buy and Sell tables may fill in prices and quantities at a higher level of precision (perhaps in the maximum precision of the asset) in the fields of the Buy/Sell/Short box. Also the detailed information shown in the tooltip when hovering over any table item (or even the labels at the top) can show the quantities and prices with higher precision (perhaps in the maximum precision of the asset for quantity values)
I think the market label at the top ("BitUSD : BTS") should make both the Quote and Base asset hyperlinks that send the user to the page specific about the asset. This would be something like the "Asset Info" tab of the asset on bitsharesblocks.com.
Finally, you should change the color of the "Shorts" button to blue to match with color of the prices of short orders in the table below it. And you should change the color of the "Margin calls" button to something other than green, red, or blue so that it is not confused with regular buy or sell orders or with short orders. This should be the same color as the color of the prices of margin cover orders (and optionally expired cover orders) in the table below it. In fact, I would rename the "Margin calls" button to just "Calls" (and rename the "Margin Call Orders" table to "Call Orders") so that it encompasses both (potential) margin calls and (potential) expired calls. Then the "Call Orders" tables could further disambiguate between an order that is "Not Called" (a short position that has not yet been margin called and has not yet expired), "Expired Call" (a short position that has expired but not yet been margin called), or "Margin Call" (a short position that has been margin called regardless of whether it has expired yet or not).