Pocket: Tag auto complete appears behind send to mobile section (Bug 1487157). r=thecount
authoranthony <anthony@getpocket.com>
Wed, 29 Aug 2018 19:28:57 +0000
changeset 491684 c7754dbab0b089cc24cd61a3270c598b03d0f6e9
parent 491683 a6f7137925e1e17f2c75de62efcbdfd9f3349c75
child 491685 6eedde033c219dbd4563bc9e2a5f9902353ec2d6
push id1815
push userffxbld-merge
push dateMon, 15 Oct 2018 10:40:45 +0000
treeherdermozilla-release@18d4c09e9378 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersthecount
bugs1487157
milestone63.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
Pocket: Tag auto complete appears behind send to mobile section (Bug 1487157). r=thecount In the Pocket dropdown, the Tag input field has an auto-complete. In the case that the user is enrolled in a A/B experiment, a "Send to Phone" section will be added to the panel. The tag auto-complete field, when active, appears behind the experiment section. Differential Revision: https://phabricator.services.mozilla.com/D4580
browser/extensions/pocket/content/panels/css/saved.css
browser/extensions/pocket/content/panels/js/saved.js
--- a/browser/extensions/pocket/content/panels/css/saved.css
+++ b/browser/extensions/pocket/content/panels/css/saved.css
@@ -103,17 +103,16 @@
     position: absolute;
     top: 0;
     width: 100%;
 }
 .pkt_ext_containersaved .pkt_ext_detail {
     max-height: 0;
     opacity: 0;
     position: relative;
-    z-index: 10;
 }
 .pkt_ext_container_detailactive .pkt_ext_initload {
     opacity: 0;
 }
 .pkt_ext_container_detailactive .pkt_ext_initload .pkt_ext_loadingspinner,
 .pkt_ext_container_finalstate .pkt_ext_initload .pkt_ext_loadingspinner {
     animation: none;
 }
--- a/browser/extensions/pocket/content/panels/js/saved.js
+++ b/browser/extensions/pocket/content/panels/js/saved.js
@@ -26,17 +26,17 @@ var PKT_SAVED_OVERLAY = function(options
     this.userTags = [];
     this.cxt_suggested_available = 0;
     this.cxt_entered = 0;
     this.cxt_suggested = 0;
     this.cxt_removed = 0;
     this.justaddedsuggested = false;
     this.fxasignedin = false;
     this.premiumDetailsAdded = false;
-    this.freezeHeight = false;
+    this.ho2 = false;
     this.fillTagContainer = function(tags, container, tagclass) {
         container.children().remove();
         for (var i = 0; i < tags.length; i++) {
             var newtag = $('<li><a href="#" class="token_tag"></a></li>');
             newtag.find("a").text(tags[i]);
             newtag.addClass(tagclass);
             container.append(newtag);
             this.cxt_suggested_available++;
@@ -227,22 +227,25 @@ var PKT_SAVED_OVERLAY = function(options
             },
             onDelete() {
                 myself.checkValidTagSubmit();
                 this.changestamp = Date.now();
                 myself.showActiveTags();
                 myself.checkPlaceholderStatus();
             },
             onShowDropdown() {
-                if (!myself.freezeHeight)
+                if (myself.ho2 !== "show_prompt_preview")
                     thePKT_SAVED.sendMessage("expandSavePanel");
             },
             onHideDropdown() {
-                if (!myself.freezeHeight)
+                if (!myself.ho2) {
                     thePKT_SAVED.sendMessage("collapseSavePanel");
+                } else if (myself.ho2 !== "show_prompt_preview") {
+                    thePKT_SAVED.sendMessage("resizePanel", { width: 350, height: 200 });
+                }
             }
         });
         $("body").on("keydown", function(e) {
             var key = e.keyCode || e.which;
             if (key == 8) {
                 var selected = $(".token-input-selected-token");
                 if (selected.length) {
                     e.preventDefault();
@@ -381,17 +384,17 @@ var PKT_SAVED_OVERLAY = function(options
             this.savedUrl = initobj.item.given_url;
         }
         $(".pkt_ext_containersaved").addClass("pkt_ext_container_detailactive").removeClass("pkt_ext_container_finalstate");
 
         if (initobj.ho2 && initobj.ho2 != "control"
             && !initobj.accountState.has_mobile
             && !myself.savedUrl.includes("getpocket.com")) {
             myself.createSendToMobilePanel(initobj.ho2, initobj.displayName);
-            myself.freezeHeight = true;
+            myself.ho2 = initobj.ho2;
         }
 
         myself.fillUserTags();
         if (myself.suggestedTagsLoaded) {
             myself.startCloseTimer();
         } else {
             myself.fillSuggestedTags();
         }