#11685

pending completion

Build # #11685

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #2736 from mozilla/MNTOR-1010/breach-email-filter

Mntor 1010/breach email filter

Run Details

278 of 1110 branches covered (25.05%)

Branch coverage included in aggregate %.

22 of 22 new or added lines in 3 files covered. (100.0%)

948 of 2996 relevant lines covered (31.64%)

2.54 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/client/js/components/custom-select.js

const html = `
<style>
  :host{
    contain: style paint;
    position: relative;
    display: inline-block;
    width: min(100%, var(--option-w) + 20px);
    color: var(--purple-70);
  }

  :host([hidden]) {
    display: none 
  }

  select{
    appearance: none;
    background: none;
    border: none;
    outline: none;
    width: 100%;
    margin: 0;
    padding: 0 20px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font: inherit;
    color: inherit;
 }

  select.hidden{
    position: absolute;
    visibility: hidden;
    width: auto;
    padding: 0;
    pointer-events: none;
 }

  svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    color: inherit;
    pointer-events: none;
  }
</style>

<select></select>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
  <path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
</svg>
`

customElements.define('custom-select', class extends HTMLElement {
  constructor () {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.innerHTML = html
    this.select = this.shadowRoot.querySelector('select')
    this.options = this.querySelectorAll('option')

    // move <option> elements into <select> (<slot> not permitted as <select> child)
    this.select.append(...this.options)
    this.select.addEventListener('change', this)
    this.setAttribute('value', this.select.value)
    this.matchOptionWidth()
  }

  get value () {
    return this.getAttribute('value')
  }

  handleEvent (e) {
    switch (e.type) {
      case 'change':
        this.matchOptionWidth()
        this.setAttribute('value', e.target.value)
        this.dispatchEvent(new Event('change'))
        break
    }
  }

  matchOptionWidth () {
    // update <select> width based on selected <option> (override fixed width based on largest <option>)
    const temp = document.createElement('select')
    const selectedOption = this.options[this.select.selectedIndex]

    temp.className = 'hidden'
    temp.append(selectedOption.cloneNode(true))
    this.shadowRoot.append(temp)
    temp.w = Math.ceil(temp.getBoundingClientRect().width)
    this.style.setProperty('--option-w', `${temp.w}px`)
    temp.remove()
  }
})

1	const html = `	×
2	<style>
3	:host{
4	contain: style paint;
5	position: relative;
6	display: inline-block;
7	width: min(100%, var(--option-w) + 20px);
8	color: var(--purple-70);
9	}
10
11	:host([hidden]) {
12	display: none
13	}
14
15	select{
16	appearance: none;
17	background: none;
18	border: none;
19	outline: none;
20	width: 100%;
21	margin: 0;
22	padding: 0 20px 0 0;
23	overflow: hidden;
24	text-overflow: ellipsis;
25	font: inherit;
26	color: inherit;
27	}
28
29	select.hidden{
30	position: absolute;
31	visibility: hidden;
32	width: auto;
33	padding: 0;
34	pointer-events: none;
35	}
36
37	svg {
38	position: absolute;
39	top: 0;
40	right: 0;
41	width: 16px;
42	height: 100%;
43	color: inherit;
44	pointer-events: none;
45	}
46	</style>
47
48	<select></select>
49	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
50	<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
51	</svg>
52	`
53
54	customElements.define('custom-select', class extends HTMLElement {	×
55	constructor () {
56	super()	×
57	this.attachShadow({ mode: 'open' })	×
58	this.shadowRoot.innerHTML = html	×
59	this.select = this.shadowRoot.querySelector('select')	×
60	this.options = this.querySelectorAll('option')	×
61
62	// move <option> elements into <select> (<slot> not permitted as <select> child)
63	this.select.append(...this.options)	×
64	this.select.addEventListener('change', this)	×
65	this.setAttribute('value', this.select.value)	×
66	this.matchOptionWidth()	×
67	}
68
69	get value () {
70	return this.getAttribute('value')	×
71	}
72
73	handleEvent (e) {
74	switch (e.type) {	×
75	case 'change':
76	this.matchOptionWidth()	×
77	this.setAttribute('value', e.target.value)	×
78	this.dispatchEvent(new Event('change'))	×
79	break	×
80	}
81	}
82
83	matchOptionWidth () {
84	// update <select> width based on selected <option> (override fixed width based on largest <option>)
85	const temp = document.createElement('select')	×
86	const selectedOption = this.options[this.select.selectedIndex]	×
87
88	temp.className = 'hidden'	×
89	temp.append(selectedOption.cloneNode(true))	×
90	this.shadowRoot.append(temp)	×
91	temp.w = Math.ceil(temp.getBoundingClientRect().width)	×
92	this.style.setProperty('--option-w', `${temp.w}px`)	×
93	temp.remove()	×
94	}
95	})

mozilla / blurts-server / #11685

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous