From 84974ad057d73dbb0ed121135add715d32975483 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Sun, 31 Dec 2017 16:35:01 -0600
Subject: [PATCH] Start a convention where each view has a non-style class name

This helps with element-tree debugging and performance evaluation.
---
 packages/gallery/src/interface/allImages.js                     | 1 +
 packages/gallery/src/interface/components/albumPhotoTemplate.js | 2 +-
 packages/gallery/src/interface/components/dropzone.js           | 2 +-
 packages/gallery/src/interface/focus.js                         | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js
index d6ecbcc..76dafbe 100644
--- a/packages/gallery/src/interface/allImages.js
+++ b/packages/gallery/src/interface/allImages.js
@@ -178,6 +178,7 @@ export function AllImagesView(vm, params, key, { appbar }) {
 	return function() {
 		return scrollView(
 			{
+				class: 'allImages',
 				onclick: {
 					'.photoSelect .icon svg path': toggleSelect,
 					'.photoSelect .icon': toggleSelect,
diff --git a/packages/gallery/src/interface/components/albumPhotoTemplate.js b/packages/gallery/src/interface/components/albumPhotoTemplate.js
index e0cee7a..08ef4c6 100644
--- a/packages/gallery/src/interface/components/albumPhotoTemplate.js
+++ b/packages/gallery/src/interface/components/albumPhotoTemplate.js
@@ -26,7 +26,7 @@ export function AlbumPhotoTemplate(vm, { doc }) {
 		return photoContainer(
 			{
 				href,
-				class: 'photoContainer',
+				class: 'albumPhoto',
 				onmouseenter: [hover, true],
 				onmouseleave: [hover, false],
 				css: {
diff --git a/packages/gallery/src/interface/components/dropzone.js b/packages/gallery/src/interface/components/dropzone.js
index 8249eb2..15a607c 100644
--- a/packages/gallery/src/interface/components/dropzone.js
+++ b/packages/gallery/src/interface/components/dropzone.js
@@ -27,7 +27,7 @@ export function Dropzone(vm, params) {
 		dropEffect
 	} = params;
 
-	const baseClassName = className || injectStyle(CSS_DROPZONE);
+	const baseClassName = `dropzone ${className || injectStyle(CSS_DROPZONE)}`;
 	const activeClassName = `${baseClassName} ${hoverClassName || injectStyle(CSS_DROPZONE_ACTIVE)}`;
 
 	const enterCounter = prop(0);
diff --git a/packages/gallery/src/interface/focus.js b/packages/gallery/src/interface/focus.js
index 9ba055d..2fe7ff4 100644
--- a/packages/gallery/src/interface/focus.js
+++ b/packages/gallery/src/interface/focus.js
@@ -127,7 +127,7 @@ export function FocusView(vm, params, key, { appbar }) {
 			return Overlay('Loading...');
 		}
 
-		return focusContainer([
+		return focusContainer({ class: 'focus' }, [
 			prevLink()
 				? prevClickZone({ href: prevLink() }, [
 						Icon({