The require password checkbox doesn't have a hover effect

[SoftVision-CosminMuntean]

[Affected versions]:

• Firefox 56 and up

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Steps to reproduce]:

1. Open the browser and navigate to https://send.stage.mozaws.net.
2. Upload a file and hover the "Require a password to download this file" checkbox.
3. Observe the checkbox.

[Expected result]:

• The checkbox is highlighted with a light blue color.

[Actual result]:

• The checkbox doesn't have a hover effect

[Notes]:

• Here is a screen recording with the issue:
  

[himanish-star]

@SoftVision-CosminMuntean , working on it

[himanish-star]

@SoftVision-CosminMuntean , is there any IRC channel for mozilla/send where I can ask some doubts.

The current problem is that if I try to use onmouseover attribute to the input element it doesn't get rendered to the front end, as when I open up the browser console and see the html page code then I see that the changes made in the uploadPassword.js files don't show up here. All other changes show up except the addition of onmouseover. I guess the rendering of this attribute is restricted from some other file. Could you help me out

[SoftVision-CosminMuntean]

Unfortunately, I can't help you with this, but @dannycoates is the right person and can help you.
You can try on #testpilot channel, but all the developers are from US and probably they will be online in a few hours.

[himanish-star]

@SoftVision-CosminMuntean , thanks a lot

[dannycoates]

Hi @himanish-star, thanks for working on this. 😄

Our team is about to start our end of year holiday so we'll be offline until January, but if you could post the code you're talking about somewhere I can have a look at it.

[himanish-star]

@dannycoates , This is with respect to the file https://github.com/mozilla/send/blob/master/app/templates/uploadPassword.js

This is the code snippet from the file mentioned above

  <div id="addPasswordWrapper">

  <input id="addPassword" type="checkbox" autocomplete="off" onchange=${

    togglePasswordInput

  }/>

  <label for="addPassword">

    ${state.translate('requirePasswordCheckbox')}</label>

  </div>

What I want to do is as follows

  <div id="addPasswordWrapper">

  <input id="addPassword" type="checkbox" autocomplete="off" onchange=${

    togglePasswordInput

  } onmouseover=${

    checkInput

  } onmouseleave=${

    uncheckInput

  }/>
  <label for="addPassword">

    ${state.translate('requirePasswordCheckbox')}</label>

  </div>

and then somewhere below I have used

function checkInput (e) {

 e.target.checked=true;

}
function uncheckInput (e) {

 e.target.checked=false;

}

The Problem now is that:

When I open the developer's console in the browser tab and search the html code , then to my surprise I find that the mouseover and mouseleave attributes are not there in the code. Whereas if I write any other attribute such as style,data-group and many more...., I can see all of them in the html code of the browser but onmouseover and onmouseleave don't come up in the browser

[dannycoates]

I think all we really need is this:

#addPasswordWrapper:hover label::before {
  border: 1px solid #0297f8;
}

With regard to the mouse event handlers not showing up in devtools... This is caused by the the library we're using for html templating, bel. It actually parses the template strings and creates DOM nodes like you would if you were to use js like document.createElement('div'). Also, it sets event handlers directly on the node. They're still there, they just don't show up in the DOM Inspector like normal parsed html does. If you put a console.log(e) in those functions you'll see them fire in the console.

[himanish-star]

Oh , Thanks a lot @dannycoates . I finally understood how it works. Actually I am contributing newly to this repository so I had no idea of how things were working. Now I have a better stance, thanks again. I will soon file the PR

[Softvision-MariusComan]

The issue is no longer reproducible on https://send.dev.mozaws.net/ website.