• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mozilla / blurts-server / #13066

pending completion
#13066

push

circleci

Vinnl
<a href="https://github.com/mozilla/blurts-server/commit/<a class=hub.com/mozilla/blurts-server/commit/<a class="double-link" href="https://git"><a class=hub.com/mozilla/blurts-server/commit/<a class="double-link" href="https://git"><a class=hub.com/mozilla/blurts-server/commit/<a class="double-link" href="https://git"><a class=hub.com/mozilla/blurts-server/commit/<a class="double-link" href="https://git"><a class=hub.com/mozilla/blurts-server/commit/<a class="double-link" href="https://git"><a class=hub.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d">7a9d21547">&lt;a href=&quot;https://github.com/mozilla/blurts-server/commit/</a><a class="double-link" href="https://github.com/mozilla/blurts-server/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/mozilla/blurts-server/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/mozilla/blurts-server/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/mozilla/blurts-server/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d">7a9d21547</a><a href="https://github.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d">&lt;a href=&quot;https://github.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/mozilla/blurts-server/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/mozilla/blurts-server/commit/&amp;amp;lt;a class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;https://git&amp;quot;&amp;gt;&amp;amp;lt;a class=&amp;lt;/a&amp;gt;hub.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d&amp;quot;&amp;gt;7a9d21547&amp;lt;/a&amp;gt;&amp;lt;a href=&amp;quot;https://github.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/mozilla/blurts-server/commit/7a9d215474a0334e43c421e3b8b509052c80054d&amp;amp;quot;&amp;amp;gt;&amp;amp;amp;quot;&amp;amp;amp;gt;Revert &amp;amp;amp;amp;quot;fixup! Add a bunch of initial type annotatio&amp;lt;/a&amp;</a>gt;ns&amp;amp;quot;

This reverts commit &amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;qu... (continued)

282 of 1621 branches covered (17.4%)

Branch coverage included in aggregate %.

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

959 of 4334 relevant lines covered (22.13%)

1.84 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
1
/* This Source Code Form is subject to the terms of the Mozilla Public
2
 * License, v. 2.0. If a copy of the MPL was not distributed with this
3
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4

5
const html = `
×
6
<style>
7
  :host{
8
    contain: style paint;
9
    position: relative;
10
    display: inline-block;
11
    width: min(100%, var(--option-w) + 20px);
12
    color: var(--purple-70);
13
  }
14

15
  :host([hidden]) {
16
    display: none 
17
  }
18

19
  select{
20
    appearance: none;
21
    background: none;
22
    border: none;
23
    outline: none;
24
    width: 100%;
25
    margin: 0;
26
    padding: 0 20px 0 0;
27
    overflow: hidden;
28
    text-overflow: ellipsis;
29
    font: inherit;
30
    color: inherit;
31
 }
32

33
  select.hidden{
34
    position: absolute;
35
    visibility: hidden;
36
    width: auto;
37
    padding: 0;
38
    pointer-events: none;
39
 }
40

41
  svg {
42
    position: absolute;
43
    top: 0;
44
    right: 0;
45
    width: 16px;
46
    height: 100%;
47
    color: inherit;
48
    pointer-events: none;
49
  }
50
</style>
51

52
<select></select>
53
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
54
  <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"/>
55
</svg>
56
`
57

58
customElements.define('custom-select', class extends HTMLElement {
×
59
  /** @type {HTMLSelectElement} */
60
  select
61

62
  constructor () {
63
    super()
×
64
    this.attachShadow({ mode: 'open' })
×
65
    // @ts-ignore: this.shadowRoot exists, as per this.attachShadow above
66
    this.shadowRoot.innerHTML = html
×
67
    // @ts-ignore: We know that this will not return null
68
    this.select = this.shadowRoot.querySelector('select')
×
69
    this.options = this.querySelectorAll('option')
×
70

71
    // move <option> elements into <select> (<slot> not permitted as <select> child)
72
    if (this.select) {
×
73
      this.select.append(...this.options)
×
74
      this.setAttribute('value', this.select.value)
×
75
      this.setAttribute('selected-index', this.select.selectedIndex.toString())
×
76
    }
77
  }
78

79
  get value () {
80
    return this.getAttribute('value')
×
81
  }
82

83
  get selectedIndex () {
84
    return this.getAttribute('selected-index')
×
85
  }
86

87
  connectedCallback () {
88
    this.matchOptionWidth()
×
89
    this.select?.addEventListener('change', this)
×
90
  }
91

92
  /**
93
   * @param {InputEvent & { target: HTMLSelectElement }} e
94
   */
95
  handleEvent (e) {
96
    switch (e.type) {
×
97
      case 'change':
98
        this.matchOptionWidth()
×
99
        this.setAttribute('value', e.target.value)
×
100
        this.setAttribute('selected-index', e.target.selectedIndex.toString())
×
101
        this.dispatchEvent(new Event('change'))
×
102
        break
×
103
    }
104
  }
105

106
  matchOptionWidth () {
107
    // update <select> width based on selected <option> (override fixed width based on largest <option>)
108
    /** @type {HTMLSelectElement & { w?: number }} */
109
    const temp = document.createElement('select')
×
110
    const selectedOption = this.options[this.select.selectedIndex]
×
111

112
    temp.className = 'hidden'
×
113
    temp.append(selectedOption.cloneNode(true))
×
114
    // @ts-ignore: this.shadowRoot exists, as per this.attachShadow above
115
    this.shadowRoot.append(temp)
×
116

117
    // let’s wait for the next tick to make sure that the dimensions of temp are available
118
    window.requestAnimationFrame(() => {
×
119
      temp.w = Math.ceil(temp.getBoundingClientRect().width) + 5 // adds 5px safety for font load delay or other quirks
×
120
      this.style.setProperty('--option-w', `${temp.w}px`)
×
121
      temp.remove()
×
122
    })
123
  }
124

125
  disconnectedCallback () {
126
    this.select.removeEventListener('change', this)
×
127
  }
128
})
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc