Bug 1449658 - Elements that are already showing don't need their bindings force-applied since they're already applied. This removes the flicker when backspacing in the preference searchbox. r=Gijs
authorJared Wein <jwein@mozilla.com>
Wed, 28 Mar 2018 10:41:02 -0700
changeset 411538 78f7dd029128266ba05048e87d00a9a791e670a8
parent 411537 71a2b7a1f6c32379c846f72edda499f809a4d393
child 411539 50a505b2e51fc887c7a33cbd172c2179ea7aae78
push id101686
push useraciure@mozilla.com
push dateTue, 03 Apr 2018 21:59:31 +0000
treeherdermozilla-inbound@8d846598d35d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs1449658
milestone61.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 1449658 - Elements that are already showing don't need their bindings force-applied since they're already applied. This removes the flicker when backspacing in the preference searchbox. r=Gijs MozReview-Commit-ID: 5MxhMLAHJlJ
browser/components/preferences/in-content/findInPage.js
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -237,21 +237,22 @@ var gSearchResultsPane = {
         .querySelectorAll("#mainPrefPane > *:not([data-hidden-from-search])")];
 
       if (subQuery) {
         // Since the previous query is a subset of the current query,
         // there is no need to check elements that is hidden already.
         rootPreferencesChildren = rootPreferencesChildren.filter(el => !el.hidden);
       }
 
-      // Mark all the children to check be visible to bind JS, Access Keys, etc,
-      // but don't really show them by setting their visibility to hidden in CSS.
+      // Attach the bindings for all children if they were not already visible.
       for (let child of rootPreferencesChildren) {
-        child.classList.add("visually-hidden");
-        child.hidden = false;
+        if (child.hidden) {
+          child.classList.add("visually-hidden");
+          child.hidden = false;
+        }
       }
 
       let ts = performance.now();
       let FRAME_THRESHOLD = 1000 / 60;
 
       // Showing or Hiding specific section depending on if words in query are found
       for (let child of rootPreferencesChildren) {
         if (performance.now() - ts > FRAME_THRESHOLD) {
@@ -274,17 +275,17 @@ var gSearchResultsPane = {
           // Show the preceding search-header if one exists.
           let groupbox = child.closest("groupbox");
           let groupHeader = groupbox && groupbox.querySelector(".search-header");
           if (groupHeader) {
             groupHeader.hidden = false;
           }
 
           resultsFound = true;
-        } else {
+        } else if (!child.hidden) {
           child.hidden = true;
         }
       }
 
       noResultsEl.hidden = !!resultsFound;
       noResultsEl.setAttribute("query", this.query);
       // XXX: This is potentially racy in case where Fluent retranslates the
       // message and ereases the query within.
@@ -308,17 +309,19 @@ var gSearchResultsPane = {
     } else {
       noResultsEl.hidden = true;
       document.getElementById("sorry-message-query").textContent = "";
       // Going back to General when cleared
       gotoPref("paneGeneral");
 
       // Hide some special second level headers in normal view
       for (let element of document.querySelectorAll("caption.search-header")) {
-        element.hidden = true;
+        if (!element.hidden) {
+          element.hidden = true;
+        }
       }
     }
 
     window.dispatchEvent(new CustomEvent("PreferencesSearchCompleted", { detail: query }));
   },
 
   /**
    * Finding leaf nodes and checking their content for words to search,