Index: chrome/browser/resources/extensions_ui.html |
diff --git a/chrome/browser/resources/extensions_ui.html b/chrome/browser/resources/extensions_ui.html |
index 0c9273b1b8c6f678d1036a927e2e7b497a04b690..99076f83732f74a5070aeee35adf99bbf0bbb369 100644 |
--- a/chrome/browser/resources/extensions_ui.html |
+++ b/chrome/browser/resources/extensions_ui.html |
@@ -111,6 +111,87 @@ button { |
font-size:100%; |
} |
+#dialogBackground, #dialogBackground div { |
+ display: -webkit-box; |
+ -webkit-box-align: center; |
+} |
+ |
+#dialog input[type="button"] { |
+ font-size: 12px; |
+ height: 25px; |
+ width: 100px; |
+} |
+ |
+#dialog input[type="text"] { |
+ width: 220px; |
+ font-size: 12px; |
+ font-family: Arial, Helvetica, sans-serif; |
+} |
+ |
+#dialogBackground { |
+ background-color: rgba(0, 0, 0, .2); |
+ display: none; |
+ height: 100%; |
+ left: 0; |
+ position: fixed; |
+ top: 0; |
+ width: 100%; |
+ z-index: 1; |
+ -webkit-box-orient: vertical; |
+ -webkit-user-select:none; |
+} |
+ |
+#dialogHBackground { |
+ height: 100%; |
+ -webkit-box-orient: horizontal; |
+} |
+ |
+#dialog { |
+ background-color: #5296DE; |
+ border: 1px solid #3A75BD; |
+ border-radius: 6px 6px; |
+ font-size: 12px; |
+ width: 500px; |
+ -webkit-box-orient: vertical; |
+} |
+ |
+#dialogHeader { |
+ background-color: rgba(0,0,0,0); |
+ color: white; |
+ margin: 4px; |
+ width: 100%; |
+} |
+ |
+#dialogBody { |
+ background-color: rgb(240, 240, 240); |
+ border: 1px solid #3A75BD; |
+ border-bottom-left-radius: 4px 4px; |
+ border-bottom-right-radius: 4px 4px; |
+ margin: 0px 2px 2px 2px; |
+ -webkit-box-orient: vertical; |
+} |
+ |
+#dialogContentHeader { |
+ margin: 16px; |
+} |
+ |
+.dialogBrowseRow { |
+ margin-left: -24px; |
+ width: 100%; |
+ -webkit-box-orient: horizontal; |
+ -webkit-box-pack: end; |
+} |
+ |
+.dialogBrowseRow>* { |
+ margin: 2px |
+} |
+ |
+#dialogContentFooter { |
+ margin-bottom: 6px; |
+ margin-left: -12px; |
+ margin-top: 20px; |
+} |
+ |
</style> |
<script> |
/** |
@@ -264,17 +345,69 @@ function handleUninstallExtension(node) { |
} |
/** |
+ * Utility function which asks the C++ to show a platform-specific file select |
+ * dialog, and fire |callback| with the |filePath| that resulted. |selectType| |
+ * can be either 'file' or 'folder'. |operation| can be 'load', 'packRoot', |
+ * or 'pem' which are signals to the C++ to do some operation-specific |
+ * configuration. |
+ */ |
+function showFileDialog(selectType, operation, callback) { |
+ handleFilePathSelected = function(filePath) { |
+ callback(filePath); |
+ handleFilePathSelected = function() {}; |
+ }; |
+ |
+ chrome.send('selectFilePath', [selectType, operation]); |
+} |
+ |
+/** |
* Handles the "Load extension..." button being pressed. |
*/ |
function loadExtension() { |
- chrome.send('load', []); |
+ showFileDialog('folder', 'load', function(filePath) { |
+ chrome.send('load', [String(filePath)]); |
+ }); |
} |
/** |
* Handles the "Pack extension..." button being pressed. |
*/ |
function packExtension() { |
- chrome.send('pack', []); |
+ var extensionPath = document.getElementById('extensionPathText').value; |
+ var privateKeyPath = document.getElementById('privateKeyPath').value; |
+ chrome.send('pack', [extensionPath, privateKeyPath]); |
+} |
+ |
+/** |
+ * Shows to modal HTML pack dialog. |
+ */ |
+function showPackDialog() { |
+ document.getElementById('dialogBackground').style.display="-webkit-box"; |
+} |
+ |
+/** |
+ * Hides the pack dialog. |
+ */ |
+function hidePackDialog() { |
+ document.getElementById('dialogBackground').style.display="none" |
+} |
+ |
+/** |
+ * Pop up a select dialog to capture the extension path. |
+ */ |
+function selectExtensionPath() { |
+ showFileDialog('folder', 'packRoot', function(filePath) { |
+ document.getElementById('extensionPathText').value = filePath; |
+ }); |
+} |
+ |
+/** |
+ * Pop up a select dialog to capture the private key path. |
+ */ |
+function selectPrivateKeyPath() { |
+ showFileDialog('file', 'pem', function(filePath) { |
+ document.getElementById('privateKeyPath').value = filePath; |
+ }); |
} |
/** |
@@ -287,6 +420,55 @@ function autoUpdate() { |
</script> |
</head> |
<body onload="requestExtensionsData();"> |
+ <div id="dialogBackground"> |
+ <div id="dialogHBackground"> |
+ <div id="dialog"> |
+ <div id="dialogHeader"> |
+ Pack Extension |
+ </div> |
+ <div id="dialogBody"> |
+ <div id="dialogContentHeader" i18n-content="packDialogHeading"> |
+ HEADING |
+ </div> |
+ <div class="dialogBrowseRow"> |
+ <div i18n-content="rootDirectoryLabel"> |
+ ROOT_DIR |
+ </div> |
+ <div> |
+ <input type="text" id="extensionPathText"> |
+ </div> |
+ <div> |
+ <input type="button" value="BROWSE" |
+ i18n-values="value:packDialogBrowse" |
+ onclick="selectExtensionPath();"> |
+ </div> |
+ </div> |
+ <div class="dialogBrowseRow"> |
+ <div i18n-content="privateKeyLabel"> |
+ PRIVATE_KEY |
+ </div> |
+ <div> |
+ <input type="text" id="privateKeyPath"> |
+ </div> |
+ <div> |
+ <input type="button" value="BROWSE" |
+ i18n-values="value:packDialogBrowse" |
+ onclick="selectPrivateKeyPath();"> |
+ </div> |
+ </div> |
+ <div class="dialogBrowseRow" id="dialogContentFooter"> |
+ <div> |
+ <input type="button" value="OK" onclick="packExtension();"> |
+ </div> |
+ <div> |
+ <input type="button" value="Cancel" onclick="hidePackDialog();"> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+ |
<div id="body-container" style="display:none;"> |
<div id="header"><h1>About extensions</h1></div> |
@@ -356,7 +538,7 @@ function autoUpdate() { |
<div class="sidebar-content"> |
<button onclick="loadExtension()">Load unpacked extension...</button><br /> |
- <button onclick="packExtension()">Pack extension...</button><br /> |
+ <button onclick="showPackDialog()">Pack extension...</button><br /> |
<button onclick="autoUpdate()">Update extensions now</button> |
</div> |
</td> |