diff --git a/src/feature-modules/highlighter/backend/Highlighter.class.ts b/src/feature-modules/highlighter/backend/Highlighter.class.ts index 2d4141ce3..aafed0b4c 100644 --- a/src/feature-modules/highlighter/backend/Highlighter.class.ts +++ b/src/feature-modules/highlighter/backend/Highlighter.class.ts @@ -8,7 +8,7 @@ import { MutableTree, Node } from '../module-dependencies.barrel'; // ---- -const HIGHLIGHT_STYLES = require('to-string!raw!./highlightOverlayStyle.raw'); +const HIGHLIGHT_STYLES = require('to-string!css!./highlightOverlayStyle.raw'); interface Offsets { left: number; @@ -22,7 +22,6 @@ interface Offsets { // ---- export class Highlighter { - // injectables private _dom: Document; private _componentTree: MutableTree; @@ -43,7 +42,7 @@ export class Highlighter { }; }; - constructor() { } + constructor() {} // --- Injectables --- @@ -62,7 +61,9 @@ export class Highlighter { public useOnUpdateNotifier(notifier: Observable) { this._onUpdateNotifier = notifier; this._onUpdateNotifier.subscribe(() => { - if (!this.targetIsStillThere()) { return; } + if (!this.targetIsStillThere()) { + return; + } this.highlightAuguryNode(this._currentHighlight.target.auguryNode); }); } @@ -73,21 +74,29 @@ export class Highlighter { this._pipe = pipe; this._pipe.addHandler((message: Message) => { switch (message.messageType) { - case MessageType.Highlight: - if (this._componentTree == null) { return; } + if (this._componentTree == null) { + return; + } const id: string = message.content.nodes[0]; - if (!id) { return; } + if (!id) { + return; + } const node: Node = this._componentTree.lookup(id); this.highlightAuguryNode(node); break; case MessageType.FindElement: - if (this._componentTree == null) { return; } - if (message.content.start) { this.startFinding(); } - if (message.content.stop) { this.stopFinding(); } + if (this._componentTree == null) { + return; + } + if (message.content.start) { + this.startFinding(); + } + if (message.content.stop) { + this.stopFinding(); + } break; - } }); } @@ -98,11 +107,7 @@ export class Highlighter { * @returns boolean */ public isReady() { - return ( - this._dom && - this._componentTree && - this._pipe - ); + return this._dom && this._componentTree && this._pipe; } // --- Private Methods --- @@ -126,10 +131,15 @@ export class Highlighter { /** */ private clear() { - if (!this._currentHighlight) { return; } + if (!this._currentHighlight) { + return; + } const overlay = this._currentHighlight.overlay.element; - try { overlay.remove(); } - catch (e) { console.error('error removing highlight', overlay, e); } + try { + overlay.remove(); + } catch (e) { + console.error('error removing highlight', overlay, e); + } clearInterval(this._currentHighlight.watcher); this._currentHighlight = null; } @@ -137,7 +147,6 @@ export class Highlighter { /** */ private startFinding() { - const detainEvent = (e: Event) => { e.preventDefault(); e.stopPropagation(); @@ -156,42 +165,22 @@ export class Highlighter { detainEvent(event); }; - window.addEventListener( - 'mouseover', - this._onHoverListener, - false - ); - window.addEventListener( - 'mousedown', - this._onSelectListener, - false - ); - + window.addEventListener('mouseover', this._onHoverListener, false); + window.addEventListener('mousedown', this._onSelectListener, false); } /** */ private stopFinding() { - window.removeEventListener( - 'mouseover', - this._onHoverListener, - false - ); - window.removeEventListener( - 'mousedown', - this._onSelectListener, - false - ); + window.removeEventListener('mouseover', this._onHoverListener, false); + window.removeEventListener('mousedown', this._onSelectListener, false); } /** */ private selectNodeFromElement(element) { const node: Node = this.findNearestAuguryParent(element); - this._pipe.sendQueuedMessage( - this._pipe.createMessage( - MessageType.FindElement, { node, stop: true } - )); + this._pipe.sendQueuedMessage(this._pipe.createMessage(MessageType.FindElement, { node, stop: true })); } /** @@ -207,27 +196,26 @@ export class Highlighter { /** */ private findNearestAuguryParent(element): Node { - const ne = (n: Node): Element => n.nativeElement(); let nearestParentNode = null; this._componentTree.recurseAll((currentNode: Node) => { if ( ne(currentNode).contains(element) && - ( - !nearestParentNode || - ne(nearestParentNode).contains(ne(currentNode)) - ) - ) { nearestParentNode = currentNode; } + (!nearestParentNode || ne(nearestParentNode).contains(ne(currentNode))) + ) { + nearestParentNode = currentNode; + } }); return nearestParentNode; - } /** */ private targetIsStillThere() { - if (!this._currentHighlight) { return false; } + if (!this._currentHighlight) { + return false; + } if (!this._dom.contains(this._currentHighlight.target.domElement)) { this.clear(); return false; @@ -244,7 +232,9 @@ export class Highlighter { /** */ private repaintOverlay() { - if (!this.targetIsStillThere()) { return; } + if (!this.targetIsStillThere()) { + return; + } this.highlightAuguryNode(this._currentHighlight.target.auguryNode); } @@ -254,7 +244,9 @@ export class Highlighter { const overlay = this._dom.createElement('div'); overlay.setAttribute('style', HIGHLIGHT_STYLES); - if (label) { overlay.textContent = label; } + if (label) { + overlay.textContent = label; + } overlay.style.left = `${offsets.left}px`; overlay.style.top = `${offsets.top}px`; @@ -265,20 +257,20 @@ export class Highlighter { return overlay; } - } // ---- function addUpElementAndChildrenOffsets(domElement): Offsets { - let offsets = getElementOffsets(domElement); const children = Array.from(domElement.children); - if (!children.length) { return offsets; } + if (!children.length) { + return offsets; + } let child; - while (child = children.pop()) { + while ((child = children.pop())) { const childOffsets = addUpElementAndChildrenOffsets(child); // offsets.top = Math.max(offsets.top, childOffsets.top); // offsets.left = Math.max(offsets.left, childOffsets.left); @@ -287,11 +279,9 @@ function addUpElementAndChildrenOffsets(domElement): Offsets { } return offsets; - } function getElementOffsets(domElement): Offsets { - const computedStyle = getComputedStyle(domElement); let offsets = { @@ -303,11 +293,10 @@ function getElementOffsets(domElement): Offsets { marginHeight: parseInt(computedStyle.marginTop, 10) + parseInt(computedStyle.marginBottom, 10) }; - while (domElement = domElement.offsetParent) { + while ((domElement = domElement.offsetParent)) { offsets.left += domElement.offsetLeft; offsets.top += domElement.offsetTop; } return offsets; - } diff --git a/src/frontend/components/tab-menu/tab-menu.html b/src/frontend/components/tab-menu/tab-menu.html index 1b77f922f..bf91139c7 100644 --- a/src/frontend/components/tab-menu/tab-menu.html +++ b/src/frontend/components/tab-menu/tab-menu.html @@ -1,26 +1,35 @@ -
+
- -
+ +
- - + +
-
+
{{t.title}}
diff --git a/src/styles/base.css b/src/styles/base.css index 351dfdd81..c0a7f7a6a 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,10 +1,10 @@ - /* Base */ html, body { /* Override basscss default white background to prevent a white flash during load. */ background-color: inherit !important; + margin: 0px; font-size: 11px; font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;