diff --git a/cmd/heapview/client/main.ts b/cmd/heapview/client/main.ts
index 146eda1b..787c569e 100644
--- a/cmd/heapview/client/main.ts
+++ b/cmd/heapview/client/main.ts
@@ -2,6 +2,49 @@
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.
+/**
+ * A hamburger menu element.
+ */
+class HamburgerElement extends HTMLElement {
+ connectedCallback() {
+ this.innerHTML = '☰'; // Unicode character for hamburger menu.
+ }
+}
+window.customElements.define('heap-hamburger', HamburgerElement);
+
+/**
+ * A heading for the page with a hamburger menu and a title.
+ */
+export class HeadingElement extends HTMLElement {
+ connectedCallback() {
+ this.style.display = 'block';
+ this.style.backgroundColor = '#2196F3';
+ this.style.webkitUserSelect = 'none';
+ this.style.cursor = 'default';
+ this.style.color = '#FFFFFF';
+ this.style.padding = '10px';
+ this.innerHTML = `
+ Go Heap Viewer
+ `;
+ }
+}
+window.customElements.define('heap-heading', HeadingElement);
+
+
+/**
+ * Reset body's margin and padding, and set font.
+ */
+function clearStyle() {
+ document.head.innerHTML += `
+
+ `;
+}
+
export function main() {
document.title = 'Go Heap Viewer';
+ clearStyle();
+ document.body.appendChild(new HeadingElement());
}
diff --git a/cmd/heapview/client/main_test.ts b/cmd/heapview/client/main_test.ts
index 1aa8807d..93da4e5c 100644
--- a/cmd/heapview/client/main_test.ts
+++ b/cmd/heapview/client/main_test.ts
@@ -4,9 +4,14 @@
import {main} from './main';
-describe("main", () => {
+describe('main', () => {
it('sets the document\'s title', () => {
main();
expect(document.title).toBe('Go Heap Viewer');
});
+
+ it('has a heading', () => {
+ main();
+ expect(document.querySelector('heap-heading')).toBeDefined();
+ });
});
\ No newline at end of file
diff --git a/cmd/heapview/client/package.json b/cmd/heapview/client/package.json
index 25b7cc7f..b2febe88 100644
--- a/cmd/heapview/client/package.json
+++ b/cmd/heapview/client/package.json
@@ -29,6 +29,7 @@
},
"scripts": {
"test": "karma start testing/karma.conf.js",
- "format": "find . | grep '\\(test_main\\.js\\|\\.ts\\)$' | xargs clang-format -i"
+ "format": "find . | grep '\\(test_main\\.js\\|\\.ts\\)$' | xargs clang-format -i",
+ "lint": "tslint --project ."
}
}
diff --git a/cmd/heapview/client/testing/karma.conf.js b/cmd/heapview/client/testing/karma.conf.js
index 545c624d..acaf9d5b 100644
--- a/cmd/heapview/client/testing/karma.conf.js
+++ b/cmd/heapview/client/testing/karma.conf.js
@@ -7,6 +7,7 @@ module.exports = config => {
frameworks: ['jasmine'],
basePath: '../../../..',
files: [
+ 'third_party/webcomponents/customelements.js',
'third_party/typescript/typescript.js',
'third_party/moduleloader/moduleloader.js',
'cmd/heapview/client/testing/test_main.js',
diff --git a/cmd/heapview/client/testing/test_main.js b/cmd/heapview/client/testing/test_main.js
index 79a49ff2..6c2afd73 100644
--- a/cmd/heapview/client/testing/test_main.js
+++ b/cmd/heapview/client/testing/test_main.js
@@ -4,6 +4,9 @@
// Configure module loader.
System.transpiler = 'typescript'
+System.typescriptOptions = {
+ target: ts.ScriptTarget.ES2015
+};
System.locate = (load) => load.name + '.ts';
// Determine set of test files.
diff --git a/cmd/heapview/main.go b/cmd/heapview/main.go
index fee5999d..8d519c2f 100644
--- a/cmd/heapview/main.go
+++ b/cmd/heapview/main.go
@@ -18,10 +18,12 @@ import (
var port = flag.Int("port", 8080, "service port")
var index = `
+