| 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 892083003:
Revert Implement <select> Popup Menu using PagePopup (Closed)
Base URL: svn://svn.chromium.org/blink/trunk
