Updated source code for v1.0.2

src/common/common.less

@@ -14,7 +14,7 @@
 @textGreyForeground: #0C0C0C;
 
 @clearAdsButtonGreyBackground: rgba(12, 12, 13, 0.10);
-@statsBoxLightBlueBackground: rgba(10, 132, 255, 0.10);
+@statsBoxLightGreyBackground: rgba(237, 237, 240, 0.60);
 
 @shareHeaderTransparentBar: rgba(0, 0, 0, 0.15);
 @tabsContainerGreyShadow: rgba(0, 0, 0, 0.10);

src/common/data-interface.js

@@ -401,7 +401,7 @@ const [DataInterface] = (function() {
 			fetch(`tables/${key}.tsv`).then(response => {
 				return response.text();
 			}).then(text => {
-				const data = text.split("\n").map(row => row.split("\t"));
+				const data = text.split("\n").filter(row => row.length > 0).map(row => row.split("\t"));
 				this.monitor.RESULTS(data);
 				this.monitor.EXIT("computeTopAdvertisersTable");
 				resolve(data);

src/door-hanger/door-hanger.html

@@ -39,10 +39,13 @@
 						<div class="text">
 							<span class="str strAdsAnalyzedParagraph">See what Facebook knows about you and how that makes you a target for advertisers.</span>
 						</div>
+						<div class="noStats statsBox" style="display: none">
+							<span class="str strNoAdCollected">No ads detected yet</span>
+						</div>
 						<div class="noStats" style="display: none">
 							<span class="str strStartCollecting"><a href="http://www.facebook.com/" rel="noopener noreferrer" target="_blank">Visit Facebook to start collecting ads</a></span>
 						</div>
-						<div class="stats" style="display: none">
+						<div class="stats statsBox" style="display: none">
 							<span class="numDatabaseAdCount">&mdash;</span>
 							<span class="str strAdCollected">Ad Collected</span>
 							<span class="str strAdsCollected">Ads Collected</span>

src/door-hanger/door-hanger.js

@@ -77,12 +77,12 @@ const [AppDoorHanger] = (function() {
 		this.slideIndex = index;
 		d3.selectAll(".panel").style("height", 0);
 		d3.selectAll(`.panel${this.slideIndex}`).style("height", null);
+		this.resizeHeight();
 		d3.select("#Slide")
 			.transition()
 			.duration(SLIDE_TRANSITION_DURATION)
 			.style("left", (-this.slideIndex * 320) + "px");
 		this.monitor.EXIT("slidePanel");
-		this.resizeHeight();
 	};
 
 	/**
@@ -93,7 +93,7 @@ const [AppDoorHanger] = (function() {
 	 **/
 	AppDoorHanger.prototype.resizeHeightImmediately = function() {
 		this.monitor.ENTER("resizeHeight");
-		const bodyHeight = Math.floor(d3.select(`.panel${this.slideIndex}`).node().getBoundingClientRect().height);
+		const bodyHeight = Math.ceil(d3.select(`.panel${this.slideIndex}`).node().getBoundingClientRect().height);
 		d3.select("html").style("height", `${bodyHeight}px`);
 		d3.select("body").style("height", `${bodyHeight}px`);
 		this.monitor.EXIT("resizeHeight");

src/door-hanger/door-hanger.less

@@ -25,8 +25,8 @@
 	vertical-align: top;
 }
 
-@arrowIconHeight: 1.6em;
-@arrowIconOffsetY: (1.0em - @arrowIconHeight) / 2 + 0.2em;
+@arrowIconHeight: 16px;
+@arrowIconOffsetY: 5px - @arrowIconHeight / 2;
 @toggleOffsetY: 1px;
 
 @border: 1px solid #ccc;
@@ -39,12 +39,15 @@ html, body, div, table, tr, td {
 
 html {
 	height: 100%;
+	width: @panelWidth;
+	max-height: 600px;
 	overflow-x: hidden;
 	overflow-y: scroll;
 }
 
 body {
 	width: @panelWidth;
+	background-color: @white-100;
 	overflow-x: hidden;
 	overflow-y: hidden;
 	user-select: none;
@@ -52,9 +55,8 @@ body {
 }
 
 #SlideContainer {
-	position: absolute;
 	table#Slide {
-		position: absolute;
+		position: relative;
 		border-collapse: collapse;
 		border-spacing: 0;
 		tr {
@@ -140,11 +142,8 @@ body {
 			padding-bottom: @sidePadding;
 			color: @textGreyForeground;
 		}
-		.stats {
-			padding-top: @sidePadding;
-			padding-bottom: @sidePadding;
-			background: @statsBoxLightBlueBackground;
-			
+		.statsBox {
+			background: @statsBoxLightGreyBackground;
 			.numDatabaseAdCount {
 				display: block;
 				text-align: center;
@@ -153,17 +152,22 @@ body {
 				color: @textGreyForeground;
 				letter-spacing: -0.1px;
 			}
+			.strNoAdCollected,
 			.strAdCollected,
 			.strAdsCollected {
 				display: block;
 				text-align: center;
 				font-size: 12px;
-				color: @extensionLightBlue;
+				color: @textGreyForeground;
 			}
 		}
+		.stats {
+			padding-top: @sidePadding;
+			padding-bottom: @sidePadding;
+		}
 		.noStats {
 			padding-top: @sidePadding;
-			padding-bottom: @sidePadding * 2;
+			padding-bottom: @sidePadding;
 			.strStartCollecting {
 				a {
 					color: @extensionLightBlue;
@@ -238,8 +242,6 @@ body {
 		padding-top: @rowPadding;
 		padding-bottom: @rowPadding;
 		border-top: none;
-		border-bottom-right-radius: 2px;
-		border-bottom-left-radius: 2px;
 
 		background: @extensionLightBlue;
 		.text {

src/info/info.js

@@ -45,7 +45,7 @@ const [AppPage] = (function() {
 		this.monitor.KEY_ENTER("AppPage");
 		this.dataInterface = new DataInterface();
 		this.renderTopAdvertisers = debounce(this.renderTopAdvertisersImmediately, RENDER_PAGE_IMPRESSIONS_DEBOUNCE_DURATION).bind(this);
-		this.sortByKey = SORT_BY_HIGH_SPENDING;
+		this.sortByKey = SORT_BY_HIGH_IMPRESSIONS;
 		this.monitor.KEY_EXIT("AppPage");
 	};
 
@@ -231,7 +231,7 @@ const [AppPage] = (function() {
 
 	const DEFAULT_LOCALE_EN_US = "en-US";
 
-	const MAX_ADVERTISERS = 100;
+	const MAX_ADVERTISERS = 250;
 
 	const ALL = "ALL";
 
@@ -564,7 +564,7 @@ const [AppPage] = (function() {
 					.text(d => `< ${formatter(d.highImpressions)}`);
 				const spendingField = rows.append("span").attr("class", "spending");
 				spendingField.append("span")
-					.text(d => `< $${formatter(d.highSpending)}`);
+					.text(d => d.highSpending === 0 ? "-" : `< $${formatter(d.highSpending)}`);
 			};
 			const renderTopAdvertisersTable = (container) => {
 				container.append("div")

src/info/info.less

@@ -15,6 +15,7 @@ body {
 	font-family: @pageFontFamily;
 	font-weight: @fontNormalWeight;
 	font-size: 14px;
+	background-color: @white-100;
 }
 
 a {
@@ -138,7 +139,7 @@ select {
 	.control {
 		.label {
 			&.disabled {
-				opacity: 0.5;
+				opacity: 0.25;
 			}
 		}
 	}
@@ -342,7 +343,7 @@ select {
 					border-bottom: @tableGreyGridLine;
 					&:last-child {
 						border-bottom: none;
-						padding-bottom: 20px;
+						padding-bottom: 10px;
 					}
 				}
 			}