Bug 1076980 - Provide landing text and related ui for log viewer

ui/css/logviewer.css

@@ -105,24 +105,28 @@ body {
     margin: 0em 0.6em 0em 0em;
 }
 
-.lv-log-loading {
+.lv-log-msg {
     position: fixed;
-    top: 284px;
-    left: 50%;
-    background: #FFF;
-    color: #585858;
-    width: 150px;
-    margin-left: -75px;
-    font-size: 2em;
+    top: 530px;
+    left: 3%;
+    font-weight: bold;
+}
+
+.lv-log-msg-step {
+    padding: 2px 5px;
+    background: #fff;
+    border: solid #f0ad4e;
+    border-width: 4px 2px 2px;
+    border-radius: 2px;
+}
+
+.lv-log-overlay {
+    padding: 6px;
+    border: 2px solid #4cae4c;
+    border-radius: 3px;
+    background: #fff;
 }
 
 .lv-log-error {
-    position: fixed;
-    top: 284px;
-    left: 50%;
-    background: #FFF;
-    color: #585858;
-    width: 293px;
-    margin-left: -75px;
-    font-size: 2em;
+    border: 2px solid #ff0000;
 }

ui/partials/logviewer/lvLogLines.html

@@ -1,7 +1,12 @@
-<div class="lv-log-loading"
+<div class="lv-log-msg"
+     ng-if="!loading && !logError && displayedLogLines.length == 0">
+     Click a <span class="lv-log-msg-step">log step</span> above to view
+</div>
+
+<div class="lv-log-msg lv-log-overlay"
      ng-if="loading"> Loading... </div>
 
-<div class="lv-log-error"
+<div class="lv-log-msg lv-log-overlay lv-log-error"
       ng-if="logError"> Log could not be found </div>
 
 <div ng-repeat="lv_line in displayedLogLines"
@@ -11,4 +16,4 @@
      line="{{ lv_line.index }}">
 
      <span class="lv-line-text">{{ lv_line.text }}</span>
-</div>
+</div>