Bug 1381427 - [photon] Result width should always be constrained by the width of the location bar. draft
authorDrew Willcoxon <adw@mozilla.com>
Fri, 06 Oct 2017 14:19:07 -0700
changeset 676236 62f7c9f6b7d6205bc2bf5cc2e52214ad3f6bc3b2
parent 675689 19b32a138d08f73961df878a29de6f0aad441683
child 734891 43a58728c084b9387497ef9de514897feb82aa81
push id83442
push userdwillcoxon@mozilla.com
push dateFri, 06 Oct 2017 21:28:17 +0000
bugs1381427
milestone58.0a1
Bug 1381427 - [photon] Result width should always be constrained by the width of the location bar. MozReview-Commit-ID: 88qthVOGAsS
toolkit/content/widgets/autocomplete.xml
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -2075,16 +2075,18 @@ extends="chrome://global/content/binding
           return this._textToSubURI.unEscapeURIForUI("UTF-8", url);
           ]]>
         </body>
       </method>
 
       <method name="_reuseAcItem">
         <body>
           <![CDATA[
+            //return false;
+
             let action = this._parseActionUrl(this.getAttribute("url"));
             let popup = this.parentNode.parentNode;
 
             // If the item is a searchengine action, then it should
             // only be reused if the engine name is the same as the
             // popup's override engine name, if any.
             if (!action ||
                 action.type != "searchengine" ||
@@ -2092,20 +2094,20 @@ extends="chrome://global/content/binding
                 action.params.engineName == popup.overrideSearchEngineName) {
 
               this.collapsed = false;
 
               // The popup may have changed size between now and the last
               // time the item was shown, so always handle over/underflow.
               let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
               let popupWidth = dwu.getBoundsWithoutFlushing(this.parentNode).width;
-              if (!this._previousPopupWidth || this._previousPopupWidth != popupWidth) {
+              //if (!this._previousPopupWidth || this._previousPopupWidth != popupWidth) {
                 this._previousPopupWidth = popupWidth;
                 this.handleOverUnderflow();
-              }
+              //}
 
               return true;
             }
 
             return false;
           ]]>
         </body>
       </method>
@@ -2333,20 +2335,20 @@ extends="chrome://global/content/binding
 
           // Removing the max-width may be jarring when the item is visible, but
           // we have no other choice to properly crop the text.
           // Removing max-widths may cause overflow or underflow events, that
           // will set the _inOverflow property. In case both the old and the new
           // text are overflowing, the overflow event won't happen, and we must
           // enforce an _handleOverflow() call to update the max-widths.
           let wasInOverflow = this._inOverflow;
-          this._removeMaxWidths();
-          if (wasInOverflow && this._inOverflow) {
+          //this._removeMaxWidths();
+          //if (wasInOverflow && this._inOverflow) {
             this._handleOverflow();
-          }
+          //}
           ]]>
         </body>
       </method>
 
       <method name="_removeMaxWidths">
         <body>
           <![CDATA[
           if (this._hasMaxWidths) {
@@ -2358,35 +2360,95 @@ extends="chrome://global/content/binding
           }
           ]]>
         </body>
       </method>
 
       <!-- This method truncates the displayed strings as necessary. -->
       <method name="_handleOverflow">
         <body><![CDATA[
-          let itemRect = this.parentNode.getBoundingClientRect();
+
+//BrowserUtils.promiseLayoutFlushed
+
+          //let itemRect = this.parentNode.getBoundingClientRect();
           let titleRect = this._titleText.getBoundingClientRect();
           let tagsRect = this._tagsText.getBoundingClientRect();
           let separatorRect = this._separator.getBoundingClientRect();
           let urlRect = this._urlText.getBoundingClientRect();
           let actionRect = this._actionText.getBoundingClientRect();
+
+          let dwu = window.getInterface(Ci.nsIDOMWindowUtils);
+          let itemRect = dwu.getBoundsWithoutFlushing(this.parentNode);
+/*
+          let titleRect = dwu.getBoundsWithoutFlushing(this._titleText);
+          let tagsRect = dwu.getBoundsWithoutFlushing(this._tagsText);
+          let separatorRect = dwu.getBoundsWithoutFlushing(this._separator);
+          let urlRect = dwu.getBoundsWithoutFlushing(this._urlText);
+          let actionRect = dwu.getBoundsWithoutFlushing(this._actionText);
+*/
           let separatorURLActionWidth =
             separatorRect.width + Math.max(urlRect.width, actionRect.width);
 
           // Total width for the title and URL/action is the width of the item
           // minus the start of the title text minus a little optional extra padding.
           // This extra padding amount is basically arbitrary but keeps the text
           // from getting too close to the popup's edge.
           let dir = this.getAttribute("dir");
           let titleStart = dir == "rtl" ? itemRect.right - titleRect.right
                                         : titleRect.left - itemRect.left;
 
           let popup = this.parentNode.parentNode;
-          let itemWidth = itemRect.width - titleStart - popup.overflowPadding;
+          //let itemWidth = itemRect.width - titleStart - popup.overflowPadding;
+
+          let maxItemWidth = itemRect.width - titleStart - popup.overflowPadding;
+
+          //let itemRect = this.parentNode.getBoundingClientRect();
+          //dump("*****XXXadw " + this.parentNode.parentNode.localName + " " + this.parentNode.parentNode.parentNode.localName + " " + this.parentNode.parentNode.parentNode.parentNode.localName + "\n");
+          //dump("*****XXXadw " + this.parentNode.parentNode.input + "\n");
+
+          //let itemWidth = this.parentNode.parentNode.input.getBoundingClientRect().width;
+          //itemWidth = 600;
+
+/*
+          let paddingInCSS =
+              3   // .autocomplete-richlistbox padding-left/right
+            + 6   // .ac-site-icon margin-inline-start
+            + 16  // .ac-site-icon width
+            + 6;  // .ac-site-icon margin-inline-end
+*/
+          //let paddingInCSS = 6 + 16 + 9;
+          //let itemWidth = Math.round(itemRect.width - (2*this.parentNode.parentNode.siteIconStart) - paddingInCSS);
+          //let itemWidth = Math.round(itemRect.width - this.parentNode.parentNode.siteIconStart - (itemRect.width - this.parentNode.parentNode.siteIconStart - inputWidth));
+          //let itemWidth = Math.round(this.parentNode.parentNode.input.getBoundingClientRect().width - paddingInCSS);
+
+          let itemWidth;
+          if (!popup.siteIconStart || popup.siteIconStart <= popup.overflowPadding || !popup.input) {
+            itemWidth = maxItemWidth;
+          } else {
+          let offsetInCSS =
+              6   // .ac-type-icon margin-inline-end
+            + 16  // .ac-site-icon width
+            + 9;  // .ac-site-icon margin-inline-end
+          let inputWidth = dwu.getBoundsWithoutFlushing(popup.input).width;
+          itemWidth = inputWidth - offsetInCSS - popup.overflowPadding;
+          }
+
+          dump("*****XXXadw " + itemWidth + " " + itemRect.width + " " + this.parentNode.parentNode.siteIconStart + "\n");
+
+/*
+            this._siteIconStart = val;
+            let varName = "--item-padding-start";
+            if (typeof(val) == "number") {
+              let paddingInCSS =
+                  3   // .autocomplete-richlistbox padding-left/right
+                + 6   // .ac-site-icon margin-inline-start
+                + 16  // .ac-site-icon width
+                + 6;  // .ac-site-icon margin-inline-end
+              let actualVal = Math.round(val) - paddingInCSS;
+*/
 
           if (this._tags.hasAttribute("empty")) {
             // The tags box is not displayed in this case.
             tagsRect.width = 0;
           }
 
           let titleTagsWidth = titleRect.width + tagsRect.width;
           if (titleTagsWidth + separatorURLActionWidth > itemWidth) {