| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <title i18n-content="title">About extensions</title> | 5 <title i18n-content="title">About extensions</title> |
| 6 <style> | 6 <style> |
| 7 body { | 7 body { |
| 8 font-size: 84%; | 8 font-size: 84%; |
| 9 font-family: Arial, Helvetica, sans-serif; | 9 font-family: Arial, Helvetica, sans-serif; |
| 10 padding: 0.75em; | 10 padding: 0.75em; |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 104 } | 104 } |
| 105 | 105 |
| 106 .extension-actions { | 106 .extension-actions { |
| 107 margin-top:0.5em; | 107 margin-top:0.5em; |
| 108 } | 108 } |
| 109 | 109 |
| 110 button { | 110 button { |
| 111 font-size:100%; | 111 font-size:100%; |
| 112 } | 112 } |
| 113 | 113 |
| 114 #dialogBackground, #dialogBackground div { |
| 115 display: -webkit-box; |
| 116 -webkit-box-align: center; |
| 117 } |
| 118 |
| 119 #dialog input[type="button"] { |
| 120 font-size: 12px; |
| 121 height: 25px; |
| 122 width: 100px; |
| 123 } |
| 124 |
| 125 #dialog input[type="text"] { |
| 126 width: 220px; |
| 127 font-size: 12px; |
| 128 font-family: Arial, Helvetica, sans-serif; |
| 129 } |
| 130 |
| 131 #dialogBackground { |
| 132 background-color: rgba(0, 0, 0, .2); |
| 133 display: none; |
| 134 height: 100%; |
| 135 left: 0; |
| 136 position: fixed; |
| 137 top: 0; |
| 138 width: 100%; |
| 139 z-index: 1; |
| 140 -webkit-box-orient: vertical; |
| 141 -webkit-user-select:none; |
| 142 } |
| 143 |
| 144 #dialogHBackground { |
| 145 height: 100%; |
| 146 -webkit-box-orient: horizontal; |
| 147 } |
| 148 |
| 149 #dialog { |
| 150 background-color: #5296DE; |
| 151 border: 1px solid #3A75BD; |
| 152 border-radius: 6px 6px; |
| 153 font-size: 12px; |
| 154 width: 500px; |
| 155 -webkit-box-orient: vertical; |
| 156 } |
| 157 |
| 158 #dialogHeader { |
| 159 background-color: rgba(0,0,0,0); |
| 160 color: white; |
| 161 margin: 4px; |
| 162 width: 100%; |
| 163 } |
| 164 |
| 165 #dialogBody { |
| 166 background-color: rgb(240, 240, 240); |
| 167 border: 1px solid #3A75BD; |
| 168 border-bottom-left-radius: 4px 4px; |
| 169 border-bottom-right-radius: 4px 4px; |
| 170 margin: 0px 2px 2px 2px; |
| 171 -webkit-box-orient: vertical; |
| 172 } |
| 173 |
| 174 #dialogContentHeader { |
| 175 margin: 16px; |
| 176 } |
| 177 |
| 178 .dialogBrowseRow { |
| 179 margin-left: -24px; |
| 180 width: 100%; |
| 181 -webkit-box-orient: horizontal; |
| 182 -webkit-box-pack: end; |
| 183 } |
| 184 |
| 185 .dialogBrowseRow>* { |
| 186 margin: 2px |
| 187 } |
| 188 |
| 189 #dialogContentFooter { |
| 190 margin-bottom: 6px; |
| 191 margin-left: -12px; |
| 192 margin-top: 20px; |
| 193 } |
| 194 |
| 114 </style> | 195 </style> |
| 115 <script> | 196 <script> |
| 116 /** | 197 /** |
| 117 * This variable structure is here to document the structure that the template | 198 * This variable structure is here to document the structure that the template |
| 118 * expects to correctly populate the page. | 199 * expects to correctly populate the page. |
| 119 */ | 200 */ |
| 120 var extensionDataFormat = { | 201 var extensionDataFormat = { |
| 121 "extensions": [ | 202 "extensions": [ |
| 122 { | 203 { |
| 123 "id": "0000000000000000000000000000000000000000", | 204 "id": "0000000000000000000000000000000000000000", |
| (...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 257 | 338 |
| 258 /** | 339 /** |
| 259 * Handles an 'uninstall' button getting clicked. | 340 * Handles an 'uninstall' button getting clicked. |
| 260 */ | 341 */ |
| 261 function handleUninstallExtension(node) { | 342 function handleUninstallExtension(node) { |
| 262 // Tell the C++ ExtensionDOMHandler to uninstall an extension. | 343 // Tell the C++ ExtensionDOMHandler to uninstall an extension. |
| 263 chrome.send('uninstall', [node.extensionId]); | 344 chrome.send('uninstall', [node.extensionId]); |
| 264 } | 345 } |
| 265 | 346 |
| 266 /** | 347 /** |
| 348 * Utility function which asks the C++ to show a platform-specific file select |
| 349 * dialog, and fire |callback| with the |filePath| that resulted. |selectType| |
| 350 * can be either 'file' or 'folder'. |operation| can be 'load', 'packRoot', |
| 351 * or 'pem' which are signals to the C++ to do some operation-specific |
| 352 * configuration. |
| 353 */ |
| 354 function showFileDialog(selectType, operation, callback) { |
| 355 handleFilePathSelected = function(filePath) { |
| 356 callback(filePath); |
| 357 handleFilePathSelected = function() {}; |
| 358 }; |
| 359 |
| 360 chrome.send('selectFilePath', [selectType, operation]); |
| 361 } |
| 362 |
| 363 /** |
| 267 * Handles the "Load extension..." button being pressed. | 364 * Handles the "Load extension..." button being pressed. |
| 268 */ | 365 */ |
| 269 function loadExtension() { | 366 function loadExtension() { |
| 270 chrome.send('load', []); | 367 showFileDialog('folder', 'load', function(filePath) { |
| 368 chrome.send('load', [String(filePath)]); |
| 369 }); |
| 271 } | 370 } |
| 272 | 371 |
| 273 /** | 372 /** |
| 274 * Handles the "Pack extension..." button being pressed. | 373 * Handles the "Pack extension..." button being pressed. |
| 275 */ | 374 */ |
| 276 function packExtension() { | 375 function packExtension() { |
| 277 chrome.send('pack', []); | 376 var extensionPath = document.getElementById('extensionPathText').value; |
| 377 var privateKeyPath = document.getElementById('privateKeyPath').value; |
| 378 chrome.send('pack', [extensionPath, privateKeyPath]); |
| 278 } | 379 } |
| 279 | 380 |
| 280 /** | 381 /** |
| 382 * Shows to modal HTML pack dialog. |
| 383 */ |
| 384 function showPackDialog() { |
| 385 document.getElementById('dialogBackground').style.display="-webkit-box"; |
| 386 } |
| 387 |
| 388 /** |
| 389 * Hides the pack dialog. |
| 390 */ |
| 391 function hidePackDialog() { |
| 392 document.getElementById('dialogBackground').style.display="none" |
| 393 } |
| 394 |
| 395 /** |
| 396 * Pop up a select dialog to capture the extension path. |
| 397 */ |
| 398 function selectExtensionPath() { |
| 399 showFileDialog('folder', 'packRoot', function(filePath) { |
| 400 document.getElementById('extensionPathText').value = filePath; |
| 401 }); |
| 402 } |
| 403 |
| 404 /** |
| 405 * Pop up a select dialog to capture the private key path. |
| 406 */ |
| 407 function selectPrivateKeyPath() { |
| 408 showFileDialog('file', 'pem', function(filePath) { |
| 409 document.getElementById('privateKeyPath').value = filePath; |
| 410 }); |
| 411 } |
| 412 |
| 413 /** |
| 281 * Handles the "Update extensions now" button being pressed. | 414 * Handles the "Update extensions now" button being pressed. |
| 282 */ | 415 */ |
| 283 function autoUpdate() { | 416 function autoUpdate() { |
| 284 chrome.send('autoupdate', []); | 417 chrome.send('autoupdate', []); |
| 285 } | 418 } |
| 286 | 419 |
| 287 </script> | 420 </script> |
| 288 </head> | 421 </head> |
| 289 <body onload="requestExtensionsData();"> | 422 <body onload="requestExtensionsData();"> |
| 423 <div id="dialogBackground"> |
| 424 <div id="dialogHBackground"> |
| 425 <div id="dialog"> |
| 426 <div id="dialogHeader"> |
| 427 Pack Extension |
| 428 </div> |
| 429 <div id="dialogBody"> |
| 430 <div id="dialogContentHeader" i18n-content="packDialogHeading"> |
| 431 HEADING |
| 432 </div> |
| 433 <div class="dialogBrowseRow"> |
| 434 <div i18n-content="rootDirectoryLabel"> |
| 435 ROOT_DIR |
| 436 </div> |
| 437 <div> |
| 438 <input type="text" id="extensionPathText"> |
| 439 </div> |
| 440 <div> |
| 441 <input type="button" value="BROWSE" |
| 442 i18n-values="value:packDialogBrowse" |
| 443 onclick="selectExtensionPath();"> |
| 444 </div> |
| 445 </div> |
| 446 <div class="dialogBrowseRow"> |
| 447 <div i18n-content="privateKeyLabel"> |
| 448 PRIVATE_KEY |
| 449 </div> |
| 450 <div> |
| 451 <input type="text" id="privateKeyPath"> |
| 452 </div> |
| 453 <div> |
| 454 <input type="button" value="BROWSE" |
| 455 i18n-values="value:packDialogBrowse" |
| 456 onclick="selectPrivateKeyPath();"> |
| 457 </div> |
| 458 </div> |
| 459 <div class="dialogBrowseRow" id="dialogContentFooter"> |
| 460 <div> |
| 461 <input type="button" value="OK" onclick="packExtension();"> |
| 462 </div> |
| 463 <div> |
| 464 <input type="button" value="Cancel" onclick="hidePackDialog();"> |
| 465 </div> |
| 466 </div> |
| 467 </div> |
| 468 </div> |
| 469 </div> |
| 470 </div> |
| 471 |
| 290 <div id="body-container" style="display:none;"> | 472 <div id="body-container" style="display:none;"> |
| 291 | 473 |
| 292 <div id="header"><h1>About extensions</h1></div> | 474 <div id="header"><h1>About extensions</h1></div> |
| 293 | 475 |
| 294 <div id="outside"> | 476 <div id="outside"> |
| 295 | 477 |
| 296 <table width="100%" cellpadding="0" cellspacing="0" border="0"> | 478 <table width="100%" cellpadding="0" cellspacing="0" border="0"> |
| 297 <tr> | 479 <tr> |
| 298 <td width="100%" valign="top" align="left"> | 480 <td width="100%" valign="top" align="left"> |
| 299 | 481 |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 </div> | 531 </div> |
| 350 </div> | 532 </div> |
| 351 | 533 |
| 352 </td> | 534 </td> |
| 353 <td style="min-width:20px"></td> | 535 <td style="min-width:20px"></td> |
| 354 <td valign="top"> | 536 <td valign="top"> |
| 355 <h2>Tools</h2> | 537 <h2>Tools</h2> |
| 356 | 538 |
| 357 <div class="sidebar-content"> | 539 <div class="sidebar-content"> |
| 358 <button onclick="loadExtension()">Load unpacked extension...</butt
on><br /> | 540 <button onclick="loadExtension()">Load unpacked extension...</butt
on><br /> |
| 359 <button onclick="packExtension()">Pack extension...</button><br /> | 541 <button onclick="showPackDialog()">Pack extension...</button><br /
> |
| 360 <button onclick="autoUpdate()">Update extensions now</button> | 542 <button onclick="autoUpdate()">Update extensions now</button> |
| 361 </div> | 543 </div> |
| 362 </td> | 544 </td> |
| 363 </tr> | 545 </tr> |
| 364 </table> | 546 </table> |
| 365 | 547 |
| 366 </div> <!-- /outside --> | 548 </div> <!-- /outside --> |
| 367 </body> | 549 </body> |
| 368 </html> | 550 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 265032:
Reland: HTML Pack Extension Dialog / Linux & Mac Packaging Support (Closed)
