[Frontend] Infobubble markup and CSS

WTD-1054
Markup and styling for infobubble;
Includes fake data in infobubble.html

platform/commonUI/inspect/res/infobubble.html

@@ -1,5 +1,41 @@
-<div class="t-infobubble l-infobubble-wrapper">
-    <div class="l-infobubble">
-        Info Bubble, and it works!
-    </div>
+<div ng-init="
+bubbles = [
+	{layout: 'arw-top arw-left'},
+	{layout: 'arw-top arw-right'},
+	{layout: 'arw-btm arw-left'},
+	{layout: 'arw-btm arw-right'}
+];
+
+title='Egress Scenario 1';
+
+properties=[{label:'Type', value:'Timeline', align:'left'},
+{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
+{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
+{label:'Duration', value:'09:15:37', align:'left'},
+{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'},
+{label:'Modified', value:'2015-04-26 18:38:00 UTC', align:'left'},
+{label:'Status', value:'Up to date', align:'left'},
+{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'left'},
+{label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that you’ll never be caught off guard.', align:'wrap'},
+{label:'ID', value:'WRP-T-89', align:'left'}];
+"></div>
+
+<div
+	ng-repeat="bubble in bubbles"
+	class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}"
+	ng-style="{left: $index * 250 + 'px'}"
+	>
+	<div class="l-infobubble">
+		<div
+			ng-show="title.length > 0"
+			class="title"
+			>{{title}}
+		</div>
+		<table>
+			<tr ng-repeat="property in properties">
+				<td class="label">{{property.label}}</td>
+				<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
+			</tr>
+		</table>
+	</div>
 </div>