Bug 914180 - Backout moving findbar to the top. r=dao, a=akeybl
authorMike de Boer <mdeboer@mozilla.com>
Fri, 13 Sep 2013 11:01:40 +0200
changeset 154050 9bbb8bade260ef5b96b876d9d4f994756ba496b5
parent 154049 9256e4aef3c8e4df65218c437c2b584f5620547e
child 154051 f7712c6e4a670faf95e5942af16adf0fd7245486
push id2859
push userakeybl@mozilla.com
push dateMon, 16 Sep 2013 19:14:59 +0000
treeherdermozilla-beta@87d3c51cd2bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, akeybl
bugs914180, 893446, 893011, 869543
milestone25.0a2
Bug 914180 - Backout moving findbar to the top. r=dao, a=akeybl Backs out changeset 452ca8b779f3 (bug 893446), changeset e1bf70be67ec (bug 893011), and changeset 60865db5f5dc (bug 869543).
browser/base/content/tabbrowser.xml
browser/themes/osx/browser.css
toolkit/components/viewsource/content/viewSource.xul
toolkit/content/jar.mn
toolkit/content/widgets/findbar.css
toolkit/content/widgets/findbar.xml
toolkit/themes/linux/global/findBar.css
toolkit/themes/osx/global/findBar.css
toolkit/themes/windows/global/findBar.css
--- a/browser/base/content/tabbrowser.xml
+++ b/browser/base/content/tabbrowser.xml
@@ -158,18 +158,17 @@
             aTab = this.selectedTab;
 
           if (aTab._findBar)
             return aTab._findBar;
 
           let findBar = document.createElementNS(this.namespaceURI, "findbar");
           let browser = this.getBrowserForTab(aTab);
           let browserContainer = this.getBrowserContainer(browser);
-          findBar.setAttribute("position", "top");
-          browserContainer.insertBefore(findBar, browserContainer.firstChild);
+          browserContainer.appendChild(findBar);
 
           // Force a style flush to ensure that our binding is attached.
           findBar.clientTop;
 
           findBar.browser = browser;
           findBar._findField.value = this._lastFindValue;
 
           aTab._findBar = findBar;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2145,17 +2145,17 @@ sidebarheader {
 sidebarheader > .tabs-closebutton > .toolbarbutton-text {
   display: none;
 }
 
 /* ----- CONTENT ----- */
 
 .browserContainer > findbar {
   background: @scopeBarBackground@;
-  border-bottom: @scopeBarSeparatorBorder@;
+  border-top: @scopeBarSeparatorBorder@;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
 /* ----- THROBBER ----- */
 
 #navigator-throbber {
   width: 17px;
--- a/toolkit/components/viewsource/content/viewSource.xul
+++ b/toolkit/components/viewsource/content/viewSource.xul
@@ -202,18 +202,19 @@
           <menuitem type="checkbox" id="menu_highlightSyntax" command="cmd_highlightSyntax"
                     label="&menu_highlightSyntax.label;" accesskey="&menu_highlightSyntax.accesskey;"/>
         </menupopup>
       </menu>
     </menubar>  
   </toolbox>
 
   <vbox id="appcontent" flex="1">
-    <findbar id="FindToolbar" browserid="content" position="top"/>
+
     <browser id="content" type="content-primary" name="content" src="about:blank" flex="1"
              context="viewSourceContextMenu" showcaret="true" tooltip="aHTMLTooltip"/>
+    <findbar id="FindToolbar" browserid="content"/>
   </vbox> 
 
   <statusbar id="status-bar" class="chromeclass-status">
     <statusbarpanel id="statusbar-line-col" label="" flex="1"/>
   </statusbar>
 
 </window>
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -54,17 +54,16 @@ toolkit.jar:
    content/global/bindings/checkbox.xml        (widgets/checkbox.xml)
    content/global/bindings/colorpicker.xml     (widgets/colorpicker.xml)
    content/global/bindings/datetimepicker.xml  (widgets/datetimepicker.xml)
 *+ content/global/bindings/dialog.xml          (widgets/dialog.xml)
    content/global/bindings/editor.xml          (widgets/editor.xml)
    content/global/bindings/expander.xml        (widgets/expander.xml)
 *  content/global/bindings/filefield.xml       (widgets/filefield.xml)
 *+ content/global/bindings/findbar.xml         (widgets/findbar.xml)
-   content/global/bindings/findbar.css         (widgets/findbar.css)
    content/global/bindings/general.xml         (widgets/general.xml)
    content/global/bindings/groupbox.xml        (widgets/groupbox.xml)
 *+ content/global/bindings/listbox.xml         (widgets/listbox.xml)
    content/global/bindings/menu.xml            (widgets/menu.xml)
    content/global/bindings/menulist.xml        (widgets/menulist.xml)
    content/global/bindings/notification.xml    (widgets/notification.xml)
    content/global/bindings/numberbox.xml       (widgets/numberbox.xml)
    content/global/bindings/popup.xml           (widgets/popup.xml)
deleted file mode 100644
--- a/toolkit/content/widgets/findbar.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-findbar {
-  transition-property: transform, opacity, visibility;
-  transition-duration: 120ms, 120ms, 0s;
-  transition-timing-function: ease-in-out, ease-in-out, linear;
-
-  /* The following positioning properties only take an effect during findbar
-   * transitions. The findbar binding sets position:absolute during that time
-   * on the findbar.
-   */
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-findbar[position="top"] {
-  top: 0;
-  bottom: auto;
-}
-
-findbar > hbox {
-  width: 100%;
-}
-
-findbar[hidden] {
-  /* Override display:none to make the transition work. */
-  display: -moz-box;
-  visibility: collapse;
-  opacity: 0;
-  transition-delay: 0s, 0s, 120ms;
-  transform: translateY(2em);
-}
-
-findbar[position="top"][hidden] {
-  transform: translateY(-2em);
-}
--- a/toolkit/content/widgets/findbar.xml
+++ b/toolkit/content/widgets/findbar.xml
@@ -168,17 +168,16 @@
         event.preventDefault();
       ]]></handler>
     </handlers>
   </binding>
 
   <binding id="findbar"
            extends="chrome://global/content/bindings/toolbar.xml#toolbar">
     <resources>
-      <stylesheet src="chrome://global/content/bindings/findbar.css"/>
       <stylesheet src="chrome://global/skin/findBar.css"/>
     </resources>
 
     <content hidden="true">
     <xul:hbox anonid="findbar-container" class="findbar-container" flex="1" align="center">
       <xul:hbox anonid="findbar-textbox-wrapper" align="stretch">
         <xul:textbox anonid="findbar-textbox"
                      class="findbar-textbox findbar-find-fast"
@@ -237,18 +236,16 @@
       <field name="_tmpOutlineOffset">"0"</field>
       <field name="_drawOutline">false</field>
       <field name="_editors">null</field>
       <field name="_stateListeners">null</field>
 
       <field name="_flashFindBar">0</field>
       <field name="_initialFlashFindBarCount">6</field>
 
-      <field name="_contentScrollOffset">0</field>
-
       <property name="_foundLink"
                 onget="return this._foundLinkRef.get();"
                 onset="this._foundLinkRef = Components.utils.getWeakReference(val); return val;"/>
       <property name="_foundEditable"
                 onget="return this._foundEditableRef.get();"
                 onset="this._foundEditableRef = Components.utils.getWeakReference(val); return val;"/>
       <property name="_currentWindow"
                 onget="return this._currentWindowRef.get();"
@@ -1156,40 +1153,18 @@
             this._caseSensitiveStr =
               stringsBundle.GetStringFromName("CaseSensitive");
           }
 
           this._findFailedString = null;
 
           this._updateFindUI();
           if (this.hidden) {
-            // Use position:absolute during the transition.
-            this.style.position = "absolute";
-            this.parentNode.style.position = "relative";
-
-            // Apparently a flush is necessary after setting position:relative
-            // on our parentNode, otherwise setting hidden to false won't
-            // animate the transform change.
-            this.getBoundingClientRect();
-
             this.hidden = false;
 
-            // Set a height on the findbar that's at least as much as the
-            // current height, but guaranteed to be an integer number of
-            // screen pixels.
-            // This way, reapplying position:static on the findbar after the
-            // fade in animation won't cause the browser contents to wiggle.
-            let [chromeOffset, contentScrollOffset] = this._findOffsets();
-            this.style.height = chromeOffset + "px";
-            this._contentScrollOffset = contentScrollOffset;
-
-            // Wait for the findbar appearance animation to end before
-            // changing the browser size.
-            this.addEventListener("transitionend", this);
-
             this._updateStatusUI(this.nsITypeAheadFind.FIND_FOUND);
 
             let event = document.createEvent("Events");
             event.initEvent("findbaropen", true, false);
             this.dispatchEvent(event);
 
             return true;
           }
@@ -1222,26 +1197,16 @@
                     this._currentWindow.focus();
                 else
                   this.browser.contentWindow.focus();
               }
             }
           }
 
           this.hidden = true;
-
-          this.addEventListener("transitionend", this);
-
-          // Revert browser scroll shift + findbar static positioning.
-          if (this.getAttribute("position") == "top" &&
-              this.style.position != "absolute") {
-            this._browser.contentWindow.scrollBy(0, -this._contentScrollOffset);
-          }
-          this.style.position = "absolute";
-
           var fastFind = this.browser.fastFind;
           fastFind.setSelectionModeAndRepaint
             (this.nsISelectionController.SELECTION_ON);
           this._setFoundLink(null);
           this._cancelTimers();
           this._foundEditable = null;
           this._currentWindow = null;
 
@@ -1530,68 +1495,20 @@
             case "mouseup":
               if (!this.hidden && this._findMode != this.FIND_NORMAL)
                 this.close();
 
               break;
             case "keypress":
               this._onBrowserKeypress(aEvent);
               break;
-            case "transitionend":
-              if (aEvent.target == this &&
-                  aEvent.propertyName == "transform") {
-                this.removeEventListener("transitionend", this);
-
-                // Change the browser size in such a way that the region that's
-                // overlapped by the findbar can be scrolled to, but try to
-                // avoid a visual shift of the browser contents.
-                this.style.removeProperty("position");
-                if (this.getAttribute("position") == "top" &&
-                    !this.hidden) {
-                  this._browser.contentWindow.scrollBy(0, this._contentScrollOffset);
-                }
-
-                // We'd like to remove position:relative from this.parentNode,
-                // but that unfortunately causes unnecessary repainting.
-              }
-              break;
           }
         ]]></body>
       </method>
 
-      <method name="_screenPixelsPerCSSPixel">
-        <parameter name="aWindow"/>
-        <body><![CDATA[
-          return aWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                        .getInterface(Components.interfaces.nsIDOMWindowUtils)
-                        .screenPixelsPerCSSPixel;
-        ]]></body>
-      </method>
-
-      <!--
-        - Find two numbers, one in chrome CSS pixels and one in integer
-        - content CSS pixels, that are about the same as (but not less than)
-        - the height of the findbar. These two numbers hopefully map to the
-        - same number of integer screen pixels.
-        - We want to avoid shifting of the page even when chrome and content
-        - have different zoom factors, and scrollBy() only accepts integers.
-        -->
-      <method name="_findOffsets">
-        <body><![CDATA[
-          let chromeFactor = this._screenPixelsPerCSSPixel(window);
-          let contentFactor = this._screenPixelsPerCSSPixel(this._browser.contentWindow);
-
-          let findbarHeightScreen = this.getBoundingClientRect().height * chromeFactor;
-          let contentScrollOffset = Math.ceil(findbarHeightScreen / contentFactor);
-          let estimatedScrollOffsetInScreenPixels = Math.round(contentScrollOffset * contentFactor);
-          let chromeOffset = estimatedScrollOffsetInScreenPixels / chromeFactor;
-          return [chromeOffset, contentScrollOffset];
-        ]]></body>
-      </method>
-
       <method name="_enableFindButtons">
         <parameter name="aEnable"/>
         <body><![CDATA[
           this.getElement("find-next").disabled =
             this.getElement("find-previous").disabled = !aEnable;
         ]]></body>
       </method>
 
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -4,21 +4,28 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 findbar {
   padding: 4px 8px;
   border-top: 2px solid;
   -moz-border-top-colors: ThreeDShadow ThreeDHighlight;
   min-width: 1px;
+  transition-property: margin-bottom, opacity, visibility;
+  transition-duration: 150ms, 150ms, 0s;
+  transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
-findbar[position="top"] {
-  border-top-style: none;
-  border-bottom: 1px solid ThreeDShadow;
+findbar[hidden] {
+  /* Override display:none to make the transition work. */
+  display: -moz-box;
+  visibility: collapse;
+  margin-bottom: -1em;
+  opacity: 0;
+  transition-delay: 0s, 0s, 150ms;
 }
 
 .findbar-closebutton {
   -moz-margin-start: 4px;
   list-style-image: url("moz-icon://stock/gtk-close?size=menu");
 }
 
 /* Search field */
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -5,21 +5,28 @@
 %include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
   min-width: 1px;
   padding: 4px 2px;
+  transition-property: margin-bottom, opacity, visibility;
+  transition-duration: 150ms, 150ms, 0s;
+  transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
-findbar[position="top"] {
-  border-top: none;
-  border-bottom: @scopeBarSeparatorBorder@;
+findbar[hidden] {
+  /* Override display:none to make the transition work. */
+  display: -moz-box;
+  visibility: collapse;
+  margin-bottom: -1em;
+  opacity: 0;
+  transition-delay: 0s, 0s, 150ms;
 }
 
 findbar:-moz-lwtheme {
   -moz-appearance: none;
   background: none;
   border-style: none;
 }
 
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -6,21 +6,28 @@
 
 findbar {
   padding: 4px 8px;
   box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
   background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
   background-size: 100% 2px;
   background-repeat: no-repeat;
   min-width: 1px;
+  transition-property: margin-bottom, opacity, visibility;
+  transition-duration: 150ms, 150ms, 0s;
+  transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
-findbar[position="top"] {
-  background-image: none;
-  box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
+findbar[hidden] {
+  /* Override display:none to make the transition work. */
+  display: -moz-box;
+  visibility: collapse;
+  margin-bottom: -1em;
+  opacity: 0;
+  transition-delay: 0s, 0s, 150ms;
 }
 
 .findbar-closebutton {
   -moz-margin-start: 4px;
   border: none;
   padding: 0;
   list-style-image: url("chrome://global/skin/icons/close.png");
   -moz-appearance: none;