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 482299 c7754dbab0b089cc24cd61a3270c598b03d0f6e9
parent 482298 a6f7137925e1e17f2c75de62efcbdfd9f3349c75
child 482300 6eedde033c219dbd4563bc9e2a5f9902353ec2d6
push id232
push userfmarier@mozilla.com
push dateWed, 05 Sep 2018 20:45:54 +0000
reviewersthecount
bugs1487157
milestone63.0a1
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();
         }