ui redone

danfragoso · Mar 1, 2020 · e42382f · e42382f
1 parent 92281ad
commit e42382f
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 This is the hotdog web browser, it's a web browser written from scratch entirely in golang.
 
 <p align="center">
-  <img src="thdwb_screenshot.mpng?raw=true"></img>
+  <img src="thdwb_screenshot.png?raw=true"></img>
 </p>
 
 ### Components

diff --git a/assets/icons.go b/assets/icons.go
@@ -0,0 +1,13 @@
+package assets
+
+func ArrowRight() []byte {
+	return []byte{137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 24, 0, 0, 0, 24, 8, 6, 0, 0, 0, 224, 119, 61, 248, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 32, 99, 72, 82, 77, 0, 0, 122, 38, 0, 0, 128, 132, 0, 0, 250, 0, 0, 0, 128, 232, 0, 0, 117, 48, 0, 0, 234, 96, 0, 0, 58, 152, 0, 0, 23, 112, 156, 186, 81, 60, 0, 0, 0, 6, 98, 75, 71, 68, 0, 0, 0, 0, 0, 0, 249, 67, 187, 127, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 0, 72, 0, 0, 0, 72, 0, 70, 201, 107, 62, 0, 0, 0, 221, 73, 68, 65, 84, 72, 199, 237, 146, 177, 13, 194, 48, 16, 69, 255, 193, 26, 236, 145, 184, 75, 69, 9, 3, 80, 0, 19, 220, 77, 16, 24, 33, 201, 4, 72, 132, 57, 168, 144, 236, 22, 106, 4, 99, 208, 68, 71, 3, 18, 2, 4, 182, 21, 68, 147, 87, 158, 206, 255, 249, 206, 6, 58, 254, 77, 63, 164, 153, 153, 115, 99, 204, 192, 90, 123, 104, 93, 32, 34, 25, 128, 21, 128, 177, 49, 230, 232, 43, 241, 22, 88, 107, 207, 105, 154, 94, 0, 12, 1, 140, 147, 36, 57, 57, 231, 246, 173, 174, 200, 57, 183, 187, 75, 136, 104, 228, 35, 9, 18, 196, 72, 130, 5, 161, 146, 40, 65, 136, 132, 158, 11, 204, 172, 145, 206, 70, 85, 231, 85, 85, 173, 31, 139, 189, 216, 9, 222, 65, 68, 47, 151, 163, 152, 160, 59, 34, 178, 84, 213, 5, 128, 6, 192, 172, 44, 203, 186, 53, 129, 79, 120, 180, 192, 55, 28, 136, 248, 69, 143, 225, 183, 71, 173, 63, 245, 7, 77, 240, 38, 124, 253, 237, 140, 183, 64, 68, 50, 85, 221, 2, 104, 136, 104, 90, 20, 197, 38, 120, 183, 223, 96, 230, 92, 68, 38, 173, 7, 119, 252, 148, 43, 115, 92, 136, 199, 204, 16, 78, 190, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 99, 114, 101, 97, 116, 101, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 49, 54, 58, 52, 57, 43, 48, 48, 58, 48, 48, 129, 86, 30, 132, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 109, 111, 100, 105, 102, 121, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 49, 54, 58, 52, 57, 43, 48, 48, 58, 48, 48, 240, 11, 166, 56, 0, 0, 0, 40, 116, 69, 88, 116, 115, 118, 103, 58, 98, 97, 115, 101, 45, 117, 114, 105, 0, 102, 105, 108, 101, 58, 47, 47, 47, 116, 109, 112, 47, 109, 97, 103, 105, 99, 107, 45, 79, 102, 108, 120, 56, 55, 77, 73, 217, 118, 33, 25, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130}
+}
+
+func Tools() []byte {
+	return []byte{137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 24, 0, 0, 0, 24, 8, 6, 0, 0, 0, 224, 119, 61, 248, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 32, 99, 72, 82, 77, 0, 0, 122, 38, 0, 0, 128, 132, 0, 0, 250, 0, 0, 0, 128, 232, 0, 0, 117, 48, 0, 0, 234, 96, 0, 0, 58, 152, 0, 0, 23, 112, 156, 186, 81, 60, 0, 0, 0, 6, 98, 75, 71, 68, 0, 0, 0, 0, 0, 0, 249, 67, 187, 127, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 0, 72, 0, 0, 0, 72, 0, 70, 201, 107, 62, 0, 0, 1, 200, 73, 68, 65, 84, 72, 199, 237, 147, 177, 139, 19, 65, 20, 198, 191, 111, 246, 136, 119, 139, 130, 229, 21, 194, 29, 168, 248, 39, 76, 58, 43, 15, 65, 69, 115, 7, 87, 89, 88, 5, 12, 236, 76, 210, 217, 197, 210, 50, 187, 155, 96, 43, 168, 105, 37, 32, 98, 113, 88, 217, 76, 44, 20, 15, 241, 206, 78, 16, 76, 161, 96, 58, 77, 226, 140, 205, 46, 174, 75, 46, 38, 155, 235, 244, 171, 102, 190, 153, 121, 191, 55, 111, 222, 0, 255, 245, 23, 113, 214, 98, 181, 90, 245, 125, 223, 95, 31, 143, 199, 195, 78, 167, 243, 245, 88, 1, 74, 169, 243, 36, 251, 0, 78, 3, 176, 0, 94, 90, 107, 235, 113, 28, 191, 62, 182, 27, 40, 165, 46, 147, 124, 2, 96, 53, 177, 126, 144, 188, 218, 106, 181, 246, 230, 5, 136, 188, 161, 181, 190, 144, 142, 163, 40, 122, 238, 156, 171, 0, 248, 158, 88, 39, 156, 115, 15, 27, 141, 198, 90, 33, 64, 16, 4, 103, 0, 188, 10, 130, 224, 98, 14, 114, 47, 179, 109, 221, 57, 119, 165, 16, 192, 243, 188, 13, 0, 167, 132, 16, 207, 180, 214, 151, 18, 232, 22, 201, 59, 217, 125, 214, 218, 115, 133, 0, 147, 201, 36, 237, 20, 31, 64, 79, 41, 213, 20, 66, 244, 50, 111, 144, 234, 91, 33, 64, 187, 221, 62, 0, 240, 62, 153, 174, 145, 188, 59, 37, 56, 132, 16, 163, 66, 128, 228, 250, 183, 1, 252, 156, 117, 200, 57, 119, 95, 41, 117, 125, 30, 128, 151, 55, 250, 253, 254, 71, 41, 229, 62, 201, 45, 0, 71, 117, 139, 71, 114, 187, 92, 46, 191, 49, 198, 124, 152, 5, 56, 242, 31, 212, 106, 181, 147, 165, 82, 233, 154, 181, 118, 67, 8, 241, 197, 57, 183, 10, 160, 149, 75, 106, 4, 96, 39, 12, 195, 167, 11, 3, 166, 73, 41, 181, 75, 242, 49, 128, 149, 44, 196, 57, 183, 27, 69, 81, 111, 174, 18, 205, 146, 49, 230, 157, 148, 242, 144, 100, 5, 191, 223, 207, 35, 185, 45, 165, 220, 55, 198, 28, 46, 5, 40, 2, 89, 168, 68, 89, 105, 173, 111, 2, 120, 144, 75, 114, 100, 173, 61, 27, 199, 241, 167, 212, 16, 139, 6, 78, 21, 134, 225, 35, 0, 183, 240, 103, 75, 191, 24, 12, 6, 159, 151, 42, 81, 174, 92, 111, 165, 148, 7, 36, 43, 36, 247, 134, 195, 225, 141, 110, 183, 59, 94, 38, 230, 84, 213, 235, 245, 205, 102, 179, 185, 178, 124, 164, 127, 82, 191, 0, 89, 59, 164, 137, 15, 99, 10, 63, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 99, 114, 101, 97, 116, 101, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 50, 49, 58, 53, 54, 43, 48, 48, 58, 48, 48, 192, 138, 19, 139, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 109, 111, 100, 105, 102, 121, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 50, 49, 58, 53, 54, 43, 48, 48, 58, 48, 48, 177, 215, 171, 55, 0, 0, 0, 40, 116, 69, 88, 116, 115, 118, 103, 58, 98, 97, 115, 101, 45, 117, 114, 105, 0, 102, 105, 108, 101, 58, 47, 47, 47, 116, 109, 112, 47, 109, 97, 103, 105, 99, 107, 45, 78, 97, 67, 110, 50, 73, 109, 72, 26, 112, 123, 194, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130}
+}
+
+func Menu() []byte {
+	return []byte{137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 24, 0, 0, 0, 24, 8, 6, 0, 0, 0, 224, 119, 61, 248, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 32, 99, 72, 82, 77, 0, 0, 122, 38, 0, 0, 128, 132, 0, 0, 250, 0, 0, 0, 128, 232, 0, 0, 117, 48, 0, 0, 234, 96, 0, 0, 58, 152, 0, 0, 23, 112, 156, 186, 81, 60, 0, 0, 0, 6, 98, 75, 71, 68, 0, 0, 0, 0, 0, 0, 249, 67, 187, 127, 0, 0, 0, 9, 112, 72, 89, 115, 0, 0, 0, 72, 0, 0, 0, 72, 0, 70, 201, 107, 62, 0, 0, 0, 48, 73, 68, 65, 84, 72, 199, 99, 96, 24, 5, 163, 128, 82, 192, 136, 204, 201, 207, 207, 255, 79, 13, 67, 39, 78, 156, 8, 55, 151, 105, 160, 125, 56, 10, 70, 35, 121, 36, 128, 209, 72, 30, 5, 163, 128, 129, 1, 0, 52, 158, 12, 10, 246, 91, 13, 156, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 99, 114, 101, 97, 116, 101, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 50, 57, 58, 48, 48, 43, 48, 48, 58, 48, 48, 248, 109, 104, 33, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 109, 111, 100, 105, 102, 121, 0, 50, 48, 50, 48, 45, 48, 51, 45, 48, 49, 84, 49, 52, 58, 50, 57, 58, 48, 48, 43, 48, 48, 58, 48, 48, 137, 48, 208, 157, 0, 0, 0, 40, 116, 69, 88, 116, 115, 118, 103, 58, 98, 97, 115, 101, 45, 117, 114, 105, 0, 102, 105, 108, 101, 58, 47, 47, 47, 116, 109, 112, 47, 109, 97, 103, 105, 99, 107, 45, 73, 45, 101, 75, 75, 119, 73, 76, 133, 141, 41, 186, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130}
+}
diff --git a/assets/logo.go b/assets/logo.go
@@ -0,0 +1,5 @@
+package assets
+
+func Logo() []byte {
+	return []byte{137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 0, 20, 0, 0, 0, 20, 8, 6, 0, 0, 0, 141, 137, 29, 13, 0, 0, 0, 4, 103, 65, 77, 65, 0, 0, 177, 143, 11, 252, 97, 5, 0, 0, 0, 32, 99, 72, 82, 77, 0, 0, 122, 38, 0, 0, 128, 132, 0, 0, 250, 0, 0, 0, 128, 232, 0, 0, 117, 48, 0, 0, 234, 96, 0, 0, 58, 152, 0, 0, 23, 112, 156, 186, 81, 60, 0, 0, 0, 6, 98, 75, 71, 68, 0, 255, 0, 255, 0, 255, 160, 189, 167, 147, 0, 0, 0, 7, 116, 73, 77, 69, 7, 228, 2, 2, 18, 9, 8, 81, 115, 44, 186, 0, 0, 4, 109, 73, 68, 65, 84, 56, 203, 149, 148, 91, 108, 20, 117, 20, 198, 191, 255, 92, 118, 103, 183, 123, 191, 150, 22, 10, 165, 114, 41, 80, 42, 151, 160, 145, 160, 64, 34, 74, 64, 131, 77, 140, 194, 3, 70, 131, 138, 138, 188, 24, 196, 168, 17, 47, 65, 35, 160, 49, 49, 38, 144, 104, 8, 106, 34, 146, 40, 138, 40, 42, 242, 162, 136, 54, 24, 32, 5, 145, 21, 90, 182, 23, 218, 157, 189, 206, 236, 220, 231, 63, 59, 227, 131, 17, 53, 177, 6, 206, 251, 249, 229, 59, 231, 251, 206, 33, 0, 224, 121, 30, 206, 188, 182, 5, 241, 174, 249, 62, 99, 180, 192, 52, 178, 115, 76, 150, 163, 232, 92, 189, 10, 215, 91, 76, 173, 255, 52, 118, 38, 8, 202, 170, 188, 96, 224, 179, 15, 223, 37, 197, 115, 7, 210, 56, 177, 106, 230, 42, 143, 245, 204, 29, 196, 147, 223, 190, 46, 32, 201, 125, 245, 1, 132, 120, 44, 118, 124, 247, 158, 131, 100, 56, 191, 116, 225, 93, 51, 144, 234, 78, 140, 86, 250, 234, 189, 66, 92, 255, 209, 31, 13, 191, 231, 185, 174, 148, 237, 217, 127, 109, 10, 5, 174, 14, 222, 26, 77, 133, 91, 34, 237, 86, 56, 132, 193, 11, 57, 120, 142, 218, 98, 105, 225, 123, 170, 99, 250, 235, 14, 165, 47, 179, 145, 72, 64, 60, 252, 192, 181, 1, 205, 242, 153, 9, 164, 244, 237, 182, 101, 43, 227, 45, 43, 159, 238, 1, 226, 29, 16, 11, 163, 72, 79, 23, 64, 141, 56, 171, 148, 212, 13, 132, 113, 215, 241, 13, 9, 226, 215, 27, 174, 1, 88, 29, 121, 84, 41, 138, 107, 61, 121, 144, 79, 70, 100, 220, 216, 179, 28, 185, 222, 6, 134, 196, 94, 100, 230, 121, 48, 116, 4, 212, 130, 244, 60, 73, 180, 222, 236, 11, 241, 24, 222, 191, 254, 127, 129, 236, 35, 75, 210, 207, 53, 168, 121, 3, 207, 120, 240, 49, 22, 130, 233, 4, 56, 161, 5, 231, 63, 205, 193, 39, 80, 36, 103, 5, 80, 237, 183, 98, 66, 144, 155, 198, 7, 3, 199, 248, 16, 87, 95, 237, 217, 216, 123, 70, 252, 111, 133, 140, 109, 53, 108, 85, 131, 161, 90, 48, 171, 85, 184, 229, 139, 152, 60, 55, 133, 246, 165, 11, 33, 158, 114, 64, 76, 5, 129, 166, 56, 196, 92, 229, 54, 91, 209, 183, 19, 142, 139, 205, 122, 112, 241, 248, 35, 243, 92, 240, 164, 171, 155, 158, 94, 215, 97, 40, 38, 236, 74, 1, 76, 189, 31, 179, 87, 204, 134, 111, 82, 51, 10, 131, 85, 164, 38, 198, 225, 170, 73, 20, 115, 165, 117, 84, 53, 95, 225, 252, 254, 72, 237, 135, 77, 227, 184, 28, 109, 254, 156, 103, 252, 35, 70, 85, 130, 174, 24, 48, 100, 13, 180, 52, 4, 31, 189, 130, 121, 247, 222, 2, 5, 205, 112, 163, 34, 90, 187, 210, 104, 232, 33, 182, 248, 155, 184, 209, 146, 181, 55, 24, 150, 205, 202, 199, 55, 225, 210, 129, 205, 255, 6, 78, 125, 98, 239, 41, 33, 156, 254, 8, 86, 3, 74, 169, 6, 93, 49, 97, 72, 50, 156, 98, 63, 98, 65, 9, 211, 110, 90, 142, 83, 39, 43, 200, 143, 126, 143, 88, 103, 13, 32, 28, 55, 214, 55, 250, 144, 81, 145, 222, 119, 29, 103, 126, 121, 40, 143, 226, 55, 15, 255, 109, 202, 250, 196, 5, 207, 31, 207, 94, 114, 84, 249, 86, 75, 169, 77, 240, 8, 192, 242, 60, 136, 235, 128, 241, 12, 68, 147, 49, 248, 67, 29, 56, 127, 120, 8, 242, 64, 17, 147, 23, 5, 160, 141, 164, 136, 92, 20, 59, 88, 134, 222, 158, 105, 105, 210, 92, 213, 204, 109, 185, 191, 139, 238, 58, 112, 14, 236, 182, 173, 143, 99, 228, 139, 119, 164, 112, 219, 236, 162, 163, 41, 119, 88, 106, 61, 64, 24, 22, 12, 199, 129, 52, 40, 152, 134, 134, 88, 115, 20, 169, 206, 25, 200, 247, 21, 225, 143, 87, 144, 78, 77, 133, 37, 69, 80, 19, 43, 113, 215, 170, 175, 224, 89, 47, 203, 82, 156, 120, 234, 238, 25, 38, 187, 99, 223, 17, 188, 184, 245, 49, 100, 23, 175, 185, 168, 229, 127, 245, 81, 77, 89, 98, 27, 42, 67, 88, 22, 132, 101, 1, 199, 6, 227, 168, 8, 39, 131, 200, 118, 207, 65, 177, 106, 32, 24, 27, 67, 36, 45, 32, 144, 22, 160, 91, 22, 167, 151, 234, 243, 57, 198, 19, 117, 241, 247, 159, 89, 0, 120, 243, 147, 94, 108, 232, 242, 121, 129, 76, 219, 105, 215, 80, 91, 169, 170, 116, 219, 134, 70, 192, 48, 0, 195, 194, 165, 54, 136, 173, 160, 41, 68, 144, 108, 155, 137, 90, 157, 67, 254, 244, 89, 208, 170, 134, 84, 71, 16, 240, 135, 136, 36, 178, 249, 185, 47, 252, 244, 37, 251, 215, 50, 223, 58, 220, 135, 210, 177, 61, 150, 144, 154, 216, 11, 219, 158, 226, 232, 90, 167, 165, 169, 196, 253, 51, 173, 104, 80, 7, 158, 165, 194, 199, 88, 72, 76, 104, 3, 195, 183, 226, 252, 209, 1, 24, 87, 40, 64, 108, 232, 181, 204, 216, 179, 219, 119, 28, 226, 174, 190, 29, 66, 224, 121, 117, 244, 239, 186, 175, 16, 110, 159, 179, 153, 225, 121, 67, 175, 12, 175, 213, 196, 42, 231, 88, 20, 193, 100, 12, 148, 186, 160, 150, 131, 128, 101, 163, 185, 109, 10, 18, 221, 147, 144, 59, 122, 14, 56, 75, 33, 52, 187, 237, 129, 225, 203, 81, 238, 159, 25, 34, 36, 2, 207, 243, 48, 180, 123, 221, 88, 108, 250, 130, 39, 185, 65, 225, 146, 81, 25, 217, 108, 74, 181, 164, 108, 81, 248, 227, 49, 88, 86, 3, 154, 238, 128, 151, 116, 52, 197, 66, 22, 151, 205, 248, 100, 73, 129, 144, 206, 124, 183, 104, 253, 198, 34, 25, 239, 132, 74, 7, 159, 129, 63, 59, 133, 171, 254, 114, 100, 153, 81, 30, 217, 98, 42, 229, 37, 20, 84, 32, 77, 33, 64, 8, 194, 245, 133, 10, 129, 76, 247, 75, 170, 28, 141, 24, 54, 213, 194, 173, 147, 63, 54, 235, 114, 121, 92, 32, 0, 56, 213, 203, 24, 216, 121, 39, 162, 221, 43, 146, 70, 161, 127, 141, 109, 72, 61, 13, 226, 117, 52, 124, 254, 161, 70, 48, 185, 219, 223, 177, 244, 144, 167, 140, 57, 157, 61, 175, 94, 237, 249, 3, 53, 107, 35, 14, 242, 244, 214, 138, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 99, 114, 101, 97, 116, 101, 0, 50, 48, 50, 48, 45, 48, 50, 45, 48, 50, 84, 49, 56, 58, 48, 57, 58, 48, 56, 45, 48, 53, 58, 48, 48, 22, 249, 1, 249, 0, 0, 0, 37, 116, 69, 88, 116, 100, 97, 116, 101, 58, 109, 111, 100, 105, 102, 121, 0, 50, 48, 50, 48, 45, 48, 50, 45, 48, 50, 84, 49, 56, 58, 48, 57, 58, 48, 56, 45, 48, 53, 58, 48, 48, 103, 164, 185, 69, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130}
+}
diff --git a/gg/util.go b/gg/util.go
@@ -1,6 +1,7 @@
 package gg
 
 import (
+	"bytes"
 	"fmt"
 	"image"
 	"image/draw"
@@ -36,6 +37,11 @@ func LoadImage(path string) (image.Image, error) {
 	return im, err
 }
 
+func LoadAsset(asset []byte) (image.Image, error) {
+	im, _, err := image.Decode(bytes.NewReader(asset))
+	return im, err
+}
+
 func LoadPNG(path string) (image.Image, error) {
 	file, err := os.Open(path)
 	if err != nil {

diff --git a/main.go b/main.go
@@ -36,39 +36,39 @@ func main() {
 	window := mustard.CreateNewWindow("THDWB", 600, 600)
 	rootFrame := mustard.CreateFrame(mustard.HorizontalFrame)
 
-	appBar := createMainBar(window, browser)
+	appBar, statusLabel, menuButton, goButton := createMainBar(window, browser)
+	debugFrame := createDebugFrame(window, browser)
+	fmt.Println(statusLabel, goButton, menuButton)
 	rootFrame.AttachWidget(appBar)
 
-	viewPort := createViewport(window, browser)
-	rootFrame.AttachWidget(viewPort)
+	// window.RegisterButton(menuButton, func() {
+	// 	if debugFrame.GetHeight() != 300 {
+	// 		debugFrame.SetHeight(300)
+	// 	} else {
+	// 		debugFrame.SetHeight(0)
+	// 	}
+	// })
 
-	debugFrame := createDebugFrame(window, browser)
-	rootFrame.AttachWidget(debugFrame)
+	viewPort := mustard.CreateContextWidget(func(ctx *gg.Context) {
+		perf.Start("parse")
+		parsedDoc := ketchup.ParseDocument(browser.Document.RawDocument)
+		perf.Stop("parse")
+
+		perf.Start("render")
+		bun.RenderDocument(ctx, parsedDoc)
+		perf.Stop("render")
+
+		statusLabel.SetContent("Loaded; " +
+			"Render: " + perf.GetProfile("render").GetElapsedTime().String() + "; " +
+			"Parsing: " + perf.GetProfile("parse").GetElapsedTime().String() + "; ")
+	})
 
+	rootFrame.AttachWidget(viewPort)
+	rootFrame.AttachWidget(debugFrame)
 	window.SetRootFrame(rootFrame)
 	app.AddWindow(window)
 	window.Show()
 	perf.Stop("ui-creation")
 
 	app.Run(func() {})
 }
-
-func createViewport(window *mustard.Window, browser *structs.WebBrowser) *mustard.ContextWidget {
-	return mustard.CreateContextWidget(func(ctx *gg.Context) {
-		/*
-			Parsing the document again is a very hacky solution to solve
-			layout problems, the solution to those problems is to never modify
-			the DOM Tree itself, it should be deep cloned as the render tree
-			which will be modified inside this callback.
-		*/
-		perf.Start("render")
-		bun.RenderDocument(ctx, ketchup.ParseDocument(browser.Document.RawDocument))
-		perf.Stop("render")
-
-		profiles := perf.GetAllProfiles()
-		fmt.Println("-----------------")
-		for _, profile := range profiles {
-			fmt.Println(profile.GetName(), "took", profile.GetElapsedTime())
-		}
-	})
-}
diff --git a/mayo/tables.go b/mayo/tables.go
@@ -27,6 +27,8 @@ var colorTable = map[string]*structs.ColorRGBA{
 	"gray":    &structs.ColorRGBA{R: 0.5, G: 0.5, B: 0.5, A: 1.0},
 	"silver":  &structs.ColorRGBA{R: 0.7, G: 0.7, B: 0.7, A: 1.0},
 	"white":   &structs.ColorRGBA{R: 1.0, G: 1.0, B: 1.0, A: 1.0},
+	"tomato":  &structs.ColorRGBA{R: 1.0, G: 0.38, B: 0.27, A: 1.0},
+	"crimson": &structs.ColorRGBA{R: 0.8, G: 0.07, B: 0.2, A: 1.0},
 }
 
 var elementFontTable = map[string]float64{

diff --git a/mustard/button.go b/mustard/button.go
@@ -6,9 +6,10 @@ import (
 )
 
 //CreateButtonWidget - Creates and returns a new Button Widget
-func CreateButtonWidget(content string) *ButtonWidget {
+func CreateButtonWidget(asset []byte) *ButtonWidget {
 	var widgets []interface{}
 
+	icon, _ := gg.LoadAsset(asset)
 	return &ButtonWidget{
 		widget: widget{
 			top:  0,
@@ -26,8 +27,8 @@ func CreateButtonWidget(content string) *ButtonWidget {
 
 			backgroundColor: "#fff",
 		},
-		content: content,
 
+		icon:      icon,
 		fontSize:  20,
 		padding:   0,
 		fontColor: "#000",
@@ -110,12 +111,13 @@ func drawButtonWidget(context *gg.Context, widget *ButtonWidget, top, left, widt
 	context.SetHexColor(widget.fontColor)
 	context.LoadFontFace("roboto.ttf", widget.fontSize)
 
-	cW, cH := context.MeasureString(widget.content)
-	context.DrawString(
-		widget.content,
-		float64(left+width/2)-cW/2,
-		float64(top+height/2)+cH/2,
-	)
+	// cW, cH := context.MeasureString(widget.content)
+	context.DrawImage(widget.icon, left+4, top+2)
+	// context.DrawString(
+	// 	widget.content,
+	// 	float64(left+width/2)-cW/2,
+	// 	float64(top+height/2)+cH/2,
+	// )
 
 	context.Fill()
 }
diff --git a/mustard/image.go b/mustard/image.go
@@ -8,10 +8,10 @@ import (
 )
 
 //CreateImageWidget - Creates and returns a new Image Widget
-func CreateImageWidget(path string) *ImageWidget {
+func CreateImageWidget(path []byte) *ImageWidget {
 	var widgets []interface{}
 
-	img, err := gg.LoadImage(path)
+	img, err := gg.LoadAsset(path)
 	if err != nil {
 		log.Fatal(err)
 	}
@@ -34,8 +34,8 @@ func CreateImageWidget(path string) *ImageWidget {
 			backgroundColor: "#fff",
 		},
 
-		path: path,
-		img:  img,
+		//path: path,
+		img: img,
 	}
 }
 

diff --git a/mustard/input.go b/mustard/input.go
@@ -111,6 +111,7 @@ func drawInputWidget(context *gg.Context, widget *InputWidget, top, left, width,
 		float64(height)-2-(widget.padding*2),
 	)
 
+	context.SetLineJoinRound()
 	context.Stroke()
 
 	context.SetHexColor("#2f2f2f")

diff --git a/mustard/types.go b/mustard/types.go
@@ -117,6 +117,7 @@ type ButtonWidget struct {
 	widget
 	content string
 
+	icon      image.Image
 	fontSize  float64
 	fontColor string
 	selected  bool

diff --git a/screenshot.png b/screenshot.png