| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset=utf-8> |
| 5 <title>List Picker test</title> |
| 6 <style> |
| 7 body { |
| 8 background-color: #eeffff; |
| 9 } |
| 10 iframe { |
| 11 z-index: 2147483647; |
| 12 width: 100px; |
| 13 height: 100px; |
| 14 border: 0; |
| 15 overflow: hidden; |
| 16 } |
| 17 </style> |
| 18 </head> |
| 19 <body> |
| 20 |
| 21 <p>This is a testbed for list picker.</p> |
| 22 |
| 23 <div> |
| 24 <select id="menu"> |
| 25 <option value="0">foo</option> |
| 26 <option value="1">bar</option> |
| 27 <option value="2">bar</option> |
| 28 <optgroup label=bar> |
| 29 <option value="4">bar</option> |
| 30 <option value="5">bar</option> |
| 31 </optgroup> |
| 32 <option value="6">bar</option> |
| 33 </select> |
| 34 <iframe></iframe> |
| 35 |
| 36 <ol id="console" style="font-family:monospace;"> |
| 37 </ol> |
| 38 |
| 39 <script> |
| 40 var arguments = { |
| 41 selectedIndex: 0, |
| 42 children: [{ |
| 43 type: "option", |
| 44 label: "foo", |
| 45 title: "", |
| 46 value: 0, |
| 47 ariaLabel: "", |
| 48 disabled: false, |
| 49 style: { |
| 50 color: "black", |
| 51 backgroundColor: "transparent", |
| 52 fontSize: "11px", |
| 53 fontWeight: "400", |
| 54 fontFamily: ["sans-serif"], |
| 55 visibility: "visible", |
| 56 display: "block", |
| 57 direction: "ltr", |
| 58 unicodeBidi: "normal" |
| 59 } |
| 60 }, { |
| 61 type: "option", |
| 62 label: "bar", |
| 63 title: "", |
| 64 value: 1, |
| 65 ariaLabel: "", |
| 66 disabled: false, |
| 67 style: { |
| 68 color: "black", |
| 69 backgroundColor: "transparent", |
| 70 fontSize: "11px", |
| 71 fontWeight: "400", |
| 72 fontFamily: ["sans-serif"], |
| 73 visibility: "visible", |
| 74 display: "block", |
| 75 direction: "ltr", |
| 76 unicodeBidi: "normal" |
| 77 } |
| 78 }, { |
| 79 type: "option", |
| 80 label: "bar", |
| 81 title: "", |
| 82 value: 2, |
| 83 ariaLabel: "", |
| 84 disabled: false, |
| 85 style: { |
| 86 color: "black", |
| 87 backgroundColor: "transparent", |
| 88 fontSize: "11px", |
| 89 fontWeight: "400", |
| 90 fontFamily: ["sans-serif"], |
| 91 visibility: "visible", |
| 92 display: "block", |
| 93 direction: "ltr", |
| 94 unicodeBidi: "normal" |
| 95 } |
| 96 }, { |
| 97 type: "optgroup", |
| 98 label: "foo", |
| 99 title: "", |
| 100 ariaLabel: "", |
| 101 disabled: false, |
| 102 children: [{ |
| 103 type: "option", |
| 104 label: "bar", |
| 105 title: "", |
| 106 value: 3, |
| 107 ariaLabel: "", |
| 108 disabled: false, |
| 109 style: { |
| 110 color: "black", |
| 111 backgroundColor: "transparent", |
| 112 fontSize: "11px", |
| 113 fontWeight: "700", |
| 114 fontFamily: ["sans-serif"], |
| 115 visibility: "visible", |
| 116 display: "block", |
| 117 direction: "ltr", |
| 118 unicodeBidi: "normal" |
| 119 } |
| 120 }, |
| 121 { |
| 122 type: "option", |
| 123 label: "bar", |
| 124 title: "", |
| 125 value: 4, |
| 126 ariaLabel: "", |
| 127 disabled: false, |
| 128 style: { |
| 129 color: "black", |
| 130 backgroundColor: "transparent", |
| 131 fontSize: "11px", |
| 132 fontWeight: "400", |
| 133 fontFamily: ["sans-serif"], |
| 134 visibility: "visible", |
| 135 display: "block", |
| 136 direction: "ltr", |
| 137 unicodeBidi: "normal" |
| 138 } |
| 139 }], |
| 140 style: { |
| 141 color: "black", |
| 142 backgroundColor: "transparent", |
| 143 fontSize: "11px", |
| 144 fontWeight: "400", |
| 145 fontFamily: ["sans-serif"], |
| 146 visibility: "visible", |
| 147 display: "block", |
| 148 direction: "ltr", |
| 149 unicodeBidi: "normal" |
| 150 } |
| 151 }, { |
| 152 type: "option", |
| 153 label: "bar", |
| 154 title: "", |
| 155 value: 5, |
| 156 ariaLabel: "", |
| 157 disabled: false, |
| 158 style: { |
| 159 color: "black", |
| 160 backgroundColor: "transparent", |
| 161 fontSize: "11px", |
| 162 fontWeight: "400", |
| 163 fontFamily: ["sans-serif"], |
| 164 visibility: "visible", |
| 165 display: "block", |
| 166 direction: "ltr", |
| 167 unicodeBidi: "normal" |
| 168 } |
| 169 }], |
| 170 anchorRectInScreen: { |
| 171 x: 1332, |
| 172 y: 356, |
| 173 width: 64, |
| 174 height: 18, |
| 175 }, |
| 176 }; |
| 177 |
| 178 function openListPicker(args) { |
| 179 var frame = document.getElementsByTagName('iframe')[0]; |
| 180 var doc = frame.contentDocument; |
| 181 doc.documentElement.innerHTML = '<head></head><body><div id=main>Loading...<
/div></body>'; |
| 182 var commonCssLink = doc.createElement('link'); |
| 183 commonCssLink.rel = 'stylesheet'; |
| 184 commonCssLink.href = '../../Source/web/resources/pickerCommon.css?' + (new D
ate()).getTime(); |
| 185 doc.head.appendChild(commonCssLink); |
| 186 var listPickerCssLink = doc.createElement('link'); |
| 187 listPickerCssLink.rel = 'stylesheet'; |
| 188 listPickerCssLink.href = '../../Source/web/resources/listPicker.css?' + (new
Date()).getTime(); |
| 189 doc.head.appendChild(listPickerCssLink); |
| 190 var commonJsScript = doc.createElement('script'); |
| 191 commonJsScript.src = '../../Source/web/resources/pickerCommon.js?' + (new Da
te()).getTime(); |
| 192 doc.body.appendChild(commonJsScript); |
| 193 var listPickerJsScript = doc.createElement('script'); |
| 194 listPickerJsScript.src = '../../Source/web/resources/listPicker.js?' + (new
Date()).getTime(); |
| 195 doc.body.appendChild(listPickerJsScript); |
| 196 |
| 197 var pagePopupController = { |
| 198 setValue: function(stringValue) { |
| 199 window.log('string="' + stringValue + '"'); |
| 200 if (numValue == 0) |
| 201 window.document.getElementById('menu').value = stringValue; |
| 202 }, |
| 203 setValueAndClosePopup: function(numValue, stringValue) { |
| 204 window.log('number=' + numValue + ', string="' + stringValue + '"'); |
| 205 if (numValue == 0) |
| 206 window.document.getElementById('menu').value = stringValue; |
| 207 }, |
| 208 } |
| 209 |
| 210 setTimeout(function() { |
| 211 frame.contentWindow.postMessage(JSON.stringify(args), "*"); |
| 212 frame.contentWindow.pagePopupController = pagePopupController; |
| 213 }, 100); |
| 214 } |
| 215 |
| 216 function log(str) { |
| 217 var entry = document.createElement('li'); |
| 218 entry.innerText = str; |
| 219 document.getElementById('console').appendChild(entry); |
| 220 } |
| 221 |
| 222 openListPicker(arguments); |
| 223 </script> |
| 224 </body> |
| 225 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 736883002:
Implement <select> Popup Menu using PagePopup (Closed)
Base URL: svn://svn.chromium.org/blink/trunk