Calculator: Fix text selection/copy for Firefox (#4351)

* Ensure mouseup doesn't remove focus for Firefox

* Use hover and selected classes to style calc input

* Ignore meta keys to allow copying in Firefox

share/goodie/calculator/calculator.css

@@ -184,7 +184,7 @@ input:checked+.tile__ctrl__toggle-slider:before {
 .zci--calculator .tile__calc .tile__ctrl__toggle:focus,
 .zci--calculator .tile__calc .tile__ctrl__btn:active,
 .zci--calculator .tile__calc .tile__ctrl__toggle:active {
-    outline: 0;
+    outline: none;
 }
 
 .no-touch .tile__calc .tile__ctrl__btn:hover,
@@ -260,11 +260,18 @@ input:checked+.tile__ctrl__toggle-slider:before {
     white-space: nowrap;
 }
 
-.zci--calculator .tile__calc .tile__input-trap:focus+.tile__display,
-.zci--calculator .tile__calc .tile__display:focus {
+.zci--calculator .tile__calc .tile__display:hover {
+    box-shadow: inset -1px -1px 0px #999, inset 1px 1px 0px #999;
+}
+
+.zci--calculator .tile__calc .tile__display.selected {
     box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
 }
 
+.zci--calculator .tile__calc .tile__display:focus {
+    outline: none;
+}
+
 .zci--calculator .tile__calc .tile__display__aside--wrap {
     position: relative;
     overflow: hidden;

share/goodie/calculator/calculator.js

@@ -903,7 +903,8 @@ DDH.calculator = DDH.calculator || {};
             onShow: function() {
 
                 var $calc = $(".zci--calculator");
-                var $calcInputTrap = $calc.find(".tile__input-trap");
+                var inputTrapClass = ".tile__display";
+                var $calcInputTrap = $calc.find(inputTrapClass);
 
                 function setFocus() {
                     $calcInputTrap.focus();
@@ -949,12 +950,21 @@ DDH.calculator = DDH.calculator || {};
                     /**
                      * Sets focus when the calculator is clicked
                      *
-                     * Sets the focus on the calculator when the Instant answer is first opened.
                      */
-                    $.each([$calc, $calcInputTrap], function(i,v) {
-                        v.click(function(){
-                            setFocus()
-                        })
+                    $($calc).on('click mousedown', function(e) {
+                        setFocus();
+                    });
+
+                    $calcInputTrap
+                    .focus(function() {
+                        $calcInputTrap.addClass('selected');
+                    })
+                    .blur(function() {
+                        $calcInputTrap.removeClass('selected');
+                    });
+
+                    $($calc, $calcInputTrap).mouseup(function (e) {
+                        e.preventDefault();
                     });
 
                     /**
@@ -990,6 +1000,10 @@ DDH.calculator = DDH.calculator || {};
                      */
                     $calcInputTrap.keypress(function(e){
 
+                        if (e.altKey || e.metaKey || e.ctrlKey) {
+                            return;
+                        }
+
                         var key = e.keyCode || e.charCode;
                         var evt = "";
 

share/goodie/calculator/content.handlebars

@@ -1,12 +1,11 @@
 <div class="calculator--wrap tile--calculator">
     <div class="tile__calc clearfix">
         <button class="tile__skip-calc">Skip calculator</button>
-        <button class="tile__input-trap"></button>
-        <div class="tile__display">
+        <div class="tile__display" tabindex="0">
             <div class="tile__display__aside--wrap">
                 <span class="tile__display__aside" id="expression"></span>
             </div>
-            <span class="tile__display__main" id="display" tabindex="0"></span>
+            <span class="tile__display__main" id="display"></span>
 
             <ul class="tile__options">
                 <li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li>