mozilla/treeherder-ui — pull request #238 by tojonmz (2014-10-19 05:08:13+00:00)
Title: 1076980 - Provide landing text and related ui for log viewer

This work fixes Bugzilla bug [1076980](https://bugzilla.mozilla.org/show_bug.cgi?id=1076980).

The current log viewer contains no instructions for viewing the log on initial landing. This fix makes it obvious how to load the log contents. In the change we also move the new landing message slightly downwards and aligned left, so it doesn't overlay the upper elements at narrow browser widths. We also do the same for the loading and error messages.

So here is what we had before, which was nothing:

![logstepbefore](https://cloud.githubusercontent.com/assets/3660661/4692090/c1266800-574a-11e4-85c1-1176e89788bb.jpg)

Here is what we have after the fix:

![logsteplandingproposed](https://cloud.githubusercontent.com/assets/3660661/4692097/0f4fa050-574b-11e4-8d85-0d4367d89c9e.jpg)

Here is what the fix looks like at narrow browser widths:

![logsteplandingproposednarro](https://cloud.githubusercontent.com/assets/3660661/4692093/dc430058-574a-11e4-8cec-7f3b23737d60.jpg)

Similarly we now place the loading and loading error messages in the same location, so during the transition from idle to the loading state, the user sees the message clearly, and it doesn't jump to some other part of the page.

![logsteploadingproposed](https://cloud.githubusercontent.com/assets/3660661/4692100/14b5f6a2-574b-11e4-9363-4fbcbcda5db7.jpg)

I've changed the duplicated css properties (position, etc), and centralized them in `lv-log-msg`. The other classes are subsets which are shared as applicable across each of the elements.

Maybe down the road, we might consider transitioning the loading message to a spinner but for now it keeps it consistent with the error message (not pictured). That element's border is drawn red on an error.

I've tested it in a variety of workflows, loading and re-loading, turning on and off successful steps, successful step navigation, and everything seems to be working correctly. I haven't encountered a scenario where the `displayedLogLines` test accidentally draws it over stale loaded log content.

If you guys can let me know if it looks correct on OSX that would be cool, or we can check it out on dev.

Tested on Windows:
FF Release **32.0.3**
Chrome Latest Release **37.0.2062.124 m**

Adding @edmorley for feedback and @wlach for review.

Adding @jmaher for visibility.