Bug 1548933 Preview should ignore search results. r=davidwalsh
authorjanelledement <janelledement@gmail.com>
Tue, 25 Jun 2019 16:46:14 +0000
changeset 480066 dde6a8f2c41ff643dd1c0e46b35ba14501b5924c
parent 480065 691b6b08b5ac1775512886fa8335f67e024d4cf3
child 480067 a4e94105c52d02a57d8610deb29eded86bb5c145
push id36200
push useraiakab@mozilla.com
push dateTue, 25 Jun 2019 21:58:14 +0000
treeherdermozilla-central@b23bd78e4d94 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdavidwalsh
bugs1548933
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1548933 Preview should ignore search results. r=davidwalsh This patch addresses bug 1548933. It adds/removes the preview highlight to related tokens (if necessary) as well as the target token. This happens when one token is broken into pieces due to a search query that only covers part of the token. Differential Revision: https://phabricator.services.mozilla.com/D34749
devtools/client/debugger/src/components/Editor/Preview/Popup.js
--- a/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@@ -76,23 +76,25 @@ export class Popup extends Component<Pro
     }
     this.removeHighlightFromToken();
   }
 
   addHighlightToToken() {
     const target = this.props.preview.target;
     if (target) {
       target.classList.add("preview-token");
+      addHighlightToTargetSiblings(target, this.props);
     }
   }
 
   removeHighlightFromToken() {
     const target = this.props.preview.target;
     if (target) {
       target.classList.remove("preview-token");
+      removeHighlightForTargetSiblings(target);
     }
   }
 
   startTimer() {
     this.timerId = setInterval(this.onInterval, 300);
   }
 
   onInterval = () => {
@@ -248,16 +250,69 @@ export class Popup extends Component<Pro
         ref={a => (this.popover = a)}
       >
         {this.renderPreview()}
       </Popover>
     );
   }
 }
 
+function addHighlightToTargetSiblings(target: Element, props: Object) {
+  // Look at target's pervious and next token siblings.
+  // If they are the same token type, and are also found in the preview expression,
+  // add the highlight class to them as well.
+
+  const tokenType = target.classList.item(0);
+  const previewExpression = props.preview.expression;
+
+  if (
+    tokenType &&
+    previewExpression &&
+    target.innerHTML !== previewExpression
+  ) {
+    let nextSibling = target.nextElementSibling;
+    while (
+      nextSibling &&
+      nextSibling.className.includes(tokenType) &&
+      previewExpression.includes(nextSibling.innerHTML)
+    ) {
+      nextSibling.classList.add("preview-token");
+      nextSibling = nextSibling.nextElementSibling;
+    }
+    let previousSibling = target.previousElementSibling;
+    while (
+      previousSibling &&
+      previousSibling.className.includes(tokenType) &&
+      previewExpression.includes(previousSibling.innerHTML)
+    ) {
+      previousSibling.classList.add("preview-token");
+      previousSibling = previousSibling.previousElementSibling;
+    }
+  }
+}
+
+function removeHighlightForTargetSiblings(target: Element) {
+  // Look at target's previous and next token siblings.
+  // If they also have the highlight class 'preview-token',
+  // remove that class.
+  let nextSibling = target.nextElementSibling;
+  while (nextSibling && nextSibling.className.includes("preview-token")) {
+    nextSibling.classList.remove("preview-token");
+    nextSibling = nextSibling.nextElementSibling;
+  }
+  let previousSibling = target.previousElementSibling;
+  while (
+    previousSibling &&
+    previousSibling.className.includes("preview-token")
+  ) {
+    previousSibling.classList.remove("preview-token");
+    previousSibling = previousSibling.previousElementSibling;
+  }
+}
+
 const mapStateToProps = state => ({
   cx: getThreadContext(state),
   preview: getPreview(state),
 });
 
 const {
   addExpression,
   selectSourceURL,