esp32tool 1.4.1 → 1.6.0

package/css/style.css

@@ -539,12 +539,15 @@ div.clear {
   padding-top: 20px;
   border-top: 2px solid #ccc;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
+  gap: 10px;
 }
 
 #commands .partition-table button {
-  margin: 0 0 10px 0;
+  margin: 0;
   border-width: 2px;
   border-style: solid;
   padding: 2px 30px;
@@ -565,6 +568,12 @@ div.clear {
 #commands .partition-table .progress-bar {
   width: 400px;
   margin-bottom: 10px;
+  flex-basis: 100%;
+}
+
+#commands .partition-table #partitionList {
+  flex-basis: 100%;
+  width: 100%;
 }
 
 .partition-table-display {
@@ -2269,3 +2278,843 @@ body.console-active .main {
   padding-top: 0 !important;
   overflow: hidden !important;
 }
+
+/* ========== Hex Editor Container ========== */
+.hexeditor-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  background-color: #1c1c1c;
+  display: flex;
+  flex-direction: column;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: #ddd;
+}
+
+.hexeditor-container.hidden {
+  display: none;
+}
+
+/* Hide header and commands when hex editor is active */
+body.hexeditor-active .header {
+  display: none !important;
+}
+body.hexeditor-active #commands {
+  display: none !important;
+}
+body.hexeditor-active #notSupported {
+  display: none !important;
+}
+body.hexeditor-active .main {
+  padding-top: 0 !important;
+  overflow: hidden !important;
+}
+
+/* Hex Editor Header / Toolbar */
+.hexeditor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background-color: #2a2a2a;
+  border-bottom: 1px solid #444;
+  flex-wrap: wrap;
+  min-height: 40px;
+}
+
+.hexeditor-toolbar h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.hexeditor-toolbar .spacer {
+  flex: 1;
+}
+
+.hexeditor-toolbar button {
+  padding: 4px 14px;
+  font-size: 12px;
+  background-color: #444;
+  color: #ddd;
+  border: 1px solid #555;
+  border-radius: 3px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.hexeditor-toolbar button:hover {
+  background-color: #555;
+}
+
+.hexeditor-toolbar button.primary {
+  background-color: #2e7d32;
+  border-color: #388e3c;
+}
+
+.hexeditor-toolbar button.primary:hover {
+  background-color: #388e3c;
+}
+
+.hexeditor-toolbar button.danger {
+  background-color: #c62828;
+  border-color: #d32f2f;
+}
+
+.hexeditor-toolbar button.danger:hover {
+  background-color: #d32f2f;
+}
+
+.hexeditor-toolbar button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Search bar */
+.hexeditor-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background-color: #252525;
+  border-bottom: 1px solid #333;
+}
+
+.hexeditor-search label {
+  font-size: 12px;
+  color: #aaa;
+  white-space: nowrap;
+}
+
+.hexeditor-search input[type="text"] {
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  background-color: #333;
+  color: #ddd;
+  border: 1px solid #555;
+  border-radius: 3px;
+  outline: none;
+  width: 200px;
+}
+
+.hexeditor-search input[type="text"]:focus {
+  border-color: #71ae1e;
+}
+
+.hexeditor-search select {
+  padding: 3px 6px;
+  font-size: 12px;
+  font-family: inherit;
+  background-color: #333;
+  color: #ddd;
+  border: 1px solid #555;
+  border-radius: 3px;
+  outline: none;
+}
+
+.hexeditor-search button {
+  padding: 3px 10px;
+  font-size: 12px;
+  background-color: #444;
+  color: #ddd;
+  border: 1px solid #555;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.hexeditor-search button:hover {
+  background-color: #555;
+}
+
+.hexeditor-search .search-info {
+  font-size: 11px;
+  color: #888;
+  margin-left: 4px;
+}
+
+/* Status bar */
+.hexeditor-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 12px;
+  background-color: #1a3a1a;
+  border-top: 1px solid #444;
+  font-size: 11px;
+  color: #aaa;
+}
+
+.hexeditor-statusbar .status-item {
+  white-space: nowrap;
+}
+
+.hexeditor-statusbar .status-modified {
+  color: #ffab40;
+  font-weight: 600;
+}
+
+/* Main hex content area */
+.hexeditor-body {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.hexeditor-viewport {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+  position: relative;
+}
+
+/* Row layout */
+.hexeditor-row {
+  display: flex;
+  line-height: 20px;
+  height: 20px;
+  white-space: nowrap;
+}
+
+.hexeditor-row:hover {
+  background-color: #2a2a2a;
+}
+
+.hexeditor-row.highlight-row {
+  background-color: #3a3a1a !important;
+}
+
+/* Address gutter */
+.hexeditor-addr {
+  width: 80px;
+  min-width: 80px;
+  text-align: right;
+  padding-right: 12px;
+  color: #6a9955;
+  font-size: 12px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Hex cells area */
+.hexeditor-hex {
+  display: flex;
+  gap: 0;
+  padding-right: 16px;
+}
+
+.hexeditor-hex .hex-cell {
+  width: 26px;
+  text-align: center;
+  font-size: 12px;
+  cursor: text;
+  color: #ddd;
+  border: 1px solid transparent;
+  padding: 0 1px;
+  box-sizing: border-box;
+}
+
+.hexeditor-hex .hex-cell:nth-child(8n) {
+  margin-right: 6px;
+}
+
+.hexeditor-hex .hex-cell.modified {
+  color: #ff6b6b;
+  font-weight: bold;
+}
+
+.hexeditor-hex .hex-cell.selected {
+  background-color: #264f78;
+  border-color: #3a7cbf;
+}
+
+.hexeditor-hex .hex-cell.search-match {
+  background-color: #5a5a00;
+  border-color: #8a8a00;
+}
+
+.hexeditor-hex .hex-cell.search-current {
+  background-color: #8a6a00;
+  border-color: #bb9b00;
+}
+
+.hexeditor-hex .hex-cell.editing {
+  background-color: #1e3a5f;
+  border-color: #4a90d9;
+  outline: none;
+}
+
+.hexeditor-hex .hex-cell.zero {
+  color: #555;
+}
+
+.hexeditor-hex .hex-cell.ff {
+  color: #666;
+}
+
+/* Separator between hex and ASCII */
+.hexeditor-sep {
+  width: 2px;
+  min-width: 2px;
+  background-color: #444;
+  margin: 0 4px;
+}
+
+/* ASCII area */
+.hexeditor-ascii {
+  display: flex;
+  gap: 0;
+}
+
+.hexeditor-ascii .ascii-cell {
+  width: 9px;
+  text-align: center;
+  font-size: 12px;
+  cursor: text;
+  color: #b5cea8;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+
+.hexeditor-ascii .ascii-cell.non-printable {
+  color: #555;
+}
+
+.hexeditor-ascii .ascii-cell.modified {
+  color: #ff6b6b;
+  font-weight: bold;
+}
+
+.hexeditor-ascii .ascii-cell.selected {
+  background-color: #264f78;
+  border-color: #3a7cbf;
+}
+
+.hexeditor-ascii .ascii-cell.search-match {
+  background-color: #5a5a00;
+  border-color: #8a8a00;
+}
+
+.hexeditor-ascii .ascii-cell.search-current {
+  background-color: #8a6a00;
+  border-color: #bb9b00;
+}
+
+.hexeditor-ascii .ascii-cell.editing {
+  background-color: #1e3a5f;
+  border-color: #4a90d9;
+  outline: none;
+}
+
+/* Progress overlay for loading */
+.hexeditor-progress-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0,0,0,0.85);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.hexeditor-progress-overlay.hidden {
+  display: none;
+}
+
+.hexeditor-progress-overlay .progress-text {
+  font-size: 16px;
+  color: #ddd;
+  margin-bottom: 16px;
+}
+
+.hexeditor-progress-overlay .progress-bar-outer {
+  width: 400px;
+  max-width: 80%;
+  height: 20px;
+  background-color: #333;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.hexeditor-progress-overlay .progress-bar-inner {
+  height: 100%;
+  background-color: #71ae1e;
+  width: 0%;
+  transition: width 0.15s linear;
+  border-radius: 10px;
+}
+
+/* Goto address input */
+.hexeditor-goto {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.hexeditor-goto input {
+  width: 100px;
+  padding: 3px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  background-color: #333;
+  color: #ddd;
+  border: 1px solid #555;
+  border-radius: 3px;
+  outline: none;
+}
+
+.hexeditor-goto input:focus {
+  border-color: #71ae1e;
+}
+
+/* Responsive hex editor for narrow viewports */
+@media (max-width: 768px) {
+  .hexeditor-container {
+    font-size: 11px;
+  }
+
+  .hexeditor-toolbar {
+    padding: 4px 8px;
+    gap: 4px;
+  }
+
+  .hexeditor-toolbar h3 {
+    font-size: 12px;
+  }
+
+  .hexeditor-toolbar button {
+    padding: 3px 8px;
+    font-size: 11px;
+  }
+
+  .hexeditor-search {
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 4px 8px;
+  }
+
+  .hexeditor-search input[type="text"] {
+    width: 140px;
+    font-size: 11px;
+  }
+
+  .hexeditor-addr {
+    width: 64px;
+    min-width: 64px;
+    padding-right: 6px;
+    font-size: 11px;
+  }
+
+  .hexeditor-hex .hex-cell {
+    width: 20px;
+    font-size: 11px;
+  }
+
+  .hexeditor-hex .hex-cell:nth-child(8n) {
+    margin-right: 3px;
+  }
+
+  .hexeditor-ascii .ascii-cell {
+    width: 7px;
+    font-size: 11px;
+  }
+
+  .hexeditor-sep {
+    margin: 0 2px;
+  }
+
+  .hexeditor-statusbar {
+    gap: 8px;
+    padding: 3px 8px;
+    font-size: 10px;
+    flex-wrap: wrap;
+  }
+
+  .hexeditor-goto input {
+    width: 70px;
+  }
+}
+
+/* ========== NVS Editor Container ========== */
+.nvseditor-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  background-color: #1c1c1c;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  color: #ddd;
+}
+
+.nvseditor-container.hidden {
+  display: none;
+}
+
+/* Hide header and commands when NVS editor is active */
+body.nvseditor-active .header {
+  display: none !important;
+}
+body.nvseditor-active #commands {
+  display: none !important;
+}
+body.nvseditor-active #notSupported {
+  display: none !important;
+}
+body.nvseditor-active .main {
+  padding-top: 0 !important;
+  overflow: hidden !important;
+}
+
+/* NVS Editor Toolbar */
+.nvseditor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #252525;
+  border-bottom: 1px solid #444;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.nvseditor-toolbar h3 {
+  margin: 0;
+  font-size: 15px;
+  color: #eee;
+  white-space: nowrap;
+}
+
+.nvseditor-toolbar .nvs-info {
+  font-size: 11px;
+  color: #888;
+  white-space: nowrap;
+}
+
+.nvseditor-toolbar .spacer {
+  flex: 1;
+}
+
+.nvseditor-toolbar button {
+  padding: 4px 12px;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: #333;
+  color: #ddd;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.nvseditor-toolbar button:hover {
+  background: #444;
+}
+
+.nvseditor-toolbar button.primary {
+  background: #1565c0;
+  border-color: #1976d2;
+  color: #fff;
+}
+
+.nvseditor-toolbar button.primary:hover {
+  background: #1976d2;
+}
+
+.nvseditor-toolbar button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.nvseditor-filter input {
+  padding: 3px 8px;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: #2a2a2a;
+  color: #ddd;
+  font-size: 12px;
+  width: 200px;
+}
+
+.nvseditor-filter input:focus {
+  border-color: #1976d2;
+  outline: none;
+}
+
+/* NVS Editor Body */
+.nvseditor-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  position: relative;
+}
+
+/* Progress overlay */
+.nvseditor-progress-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(28, 28, 28, 0.92);
+  z-index: 10;
+}
+
+.nvseditor-progress-overlay.hidden {
+  display: none;
+}
+
+.nvseditor-progress-overlay .progress-text {
+  color: #ccc;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.nvseditor-progress-overlay .progress-bar-outer {
+  width: 300px;
+  height: 8px;
+  background: #333;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.nvseditor-progress-overlay .progress-bar-inner {
+  height: 100%;
+  background: #1976d2;
+  transition: width 0.15s;
+  border-radius: 4px;
+}
+
+/* Status bar */
+.nvseditor-statusbar {
+  display: flex;
+  gap: 16px;
+  padding: 4px 12px;
+  background: #252525;
+  border-top: 1px solid #444;
+  font-size: 11px;
+  color: #888;
+  flex-shrink: 0;
+}
+
+/* NVS Page */
+.nvs-page {
+  margin-bottom: 16px;
+  border: 1px solid #3a3a3a;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.nvs-page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 12px;
+  background: #2a2a2a;
+  font-size: 12px;
+  color: #bbb;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+.nvs-page-header.state-active { border-left: 4px solid #43a047; }
+.nvs-page-header.state-full { border-left: 4px solid #ffa726; }
+.nvs-page-header.state-freeing { border-left: 4px solid #ef5350; }
+.nvs-page-header.state-other { border-left: 4px solid #666; }
+
+.nvs-page-state {
+  font-weight: bold;
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.state-active .nvs-page-state { background: #1b5e20; color: #a5d6a7; }
+.state-full .nvs-page-state { background: #e65100; color: #ffcc80; }
+.state-freeing .nvs-page-state { background: #b71c1c; color: #ef9a9a; }
+.state-other .nvs-page-state { background: #424242; color: #999; }
+
+/* NVS Namespace */
+.nvs-namespace {
+  margin: 0;
+}
+
+.nvs-namespace-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: #262626;
+  border-bottom: 1px solid #333;
+  font-size: 13px;
+}
+
+.nvs-ns-icon {
+  font-size: 14px;
+}
+
+.nvs-ns-name {
+  font-weight: 600;
+  color: #90caf9;
+}
+
+.nvs-ns-count {
+  color: #777;
+  font-size: 11px;
+}
+
+/* NVS Table */
+.nvs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.nvs-table thead th {
+  background: #222;
+  color: #999;
+  padding: 5px 8px;
+  text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid #3a3a3a;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.nvs-table tbody tr {
+  border-bottom: 1px solid #2a2a2a;
+}
+
+.nvs-table tbody tr:hover {
+  background: #2a2a2a;
+}
+
+.nvs-table td {
+  padding: 4px 8px;
+  vertical-align: middle;
+}
+
+.nvs-key {
+  font-weight: 500;
+  color: #e0e0e0;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nvs-type {
+  color: #a5d6a7;
+  white-space: nowrap;
+  width: 80px;
+}
+
+.nvs-value {
+  color: #fff;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+}
+
+.nvs-crc {
+  width: 30px;
+  text-align: center;
+}
+
+.nvs-crc.crc-ok {
+  color: #66bb6a;
+}
+
+.nvs-crc.crc-bad {
+  color: #ef5350;
+  font-weight: bold;
+}
+
+.nvs-offset {
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  color: #888;
+  white-space: nowrap;
+}
+
+.nvs-actions {
+  white-space: nowrap;
+  width: 70px;
+}
+
+.nvs-actions button {
+  padding: 2px 6px;
+  margin-right: 2px;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: #333;
+  color: #ddd;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.nvs-actions button:hover {
+  background: #444;
+}
+
+.nvs-btn-delete:hover {
+  background: #c62828 !important;
+  border-color: #e53935 !important;
+  color: #fff !important;
+}
+
+.nvs-btn-edit:hover {
+  background: #1565c0 !important;
+  border-color: #1976d2 !important;
+  color: #fff !important;
+}
+
+/* Empty state */
+.nvs-empty {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  font-size: 16px;
+}
+
+/* NVS content area */
+.nvseditor-content {
+  min-height: 100%;
+}
+
+/* ─── Responsive NVS Editor ─── */
+@media (max-width: 700px) {
+  .nvseditor-toolbar {
+    padding: 6px 8px;
+    gap: 6px;
+  }
+
+  .nvseditor-filter input {
+    width: 140px;
+  }
+
+  .nvs-value {
+    max-width: 150px;
+  }
+
+  .nvs-offset {
+    display: none;
+  }
+}