Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1223)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.html

Issue 12760009: Write a devtools extension to inspect chrome.storage data Base URL: https://src.chromium.org/svn/trunk/src/
Patch Set: small fixes Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.css ('k') | chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.html
===================================================================
--- chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.html (revision 0)
+++ chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.html (revision 0)
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <script type="text/javascript" src="../third_party/angular.min.js"></script>
+ <script type="text/javascript" src="../scripts/util.js"></script>
+ <script type="text/javascript" src="../scripts/messaging.js"></script>
+ <script type="text/javascript" src="panel.js"></script>
+ <link rel="stylesheet" type="text/css" href="panel.css">
+</head>
+<body data-ng-app="StorageData" data-ng-controller="StorageDataCtrl"
+ data-ng-csp>
+ <div data-ng-hide="available">
+ <div data-ng-i18n-content="panels_storage_notAvailable"></div>
+ <button data-ng-click="reinit()"
+ data-ng-i18n-content="panels_storage_reinit">
+ </button>
+ </div>
+ <div data-ng-show="available">
+ <nav>
+ <button class="storage-area-visibility-toggle"
+ data-ng-click="hideDetails = !hideDetails"
+ data-bind-chrome-storage="{area: 'sync', key: '____/hideDetails',
+ model: 'hideDetails', defaultValue: false}">
+ <span data-ng-show="hideDetails">+</span>
+ <span data-ng-hide="hideDetails">-</span>
+ </button>
+ <span data-ng-repeat="(area, properties) in storage" class="storage-area"
+ data-ng-class="{'storage-area-current': area == currentArea}">
+ <a href="" data-ng-click="switchArea(area)">
+ {{area}}
+ </a>
+ </span>
+ <select data-ng-model="currentContext"
+ data-ng-options="context.id for context in contexts"
+ data-ng-show="contexts.length > 1"
+ data-ng-change="switchContext(currentContext)">
+ </select>
+ <label data-ng-i18n-content="panels_storage_readOnly">
+ <input type="checkbox" data-ng-model="readonly"
+ data-bind-chrome-storage="{area: 'sync', key: '____/readonly',
+ model: 'readonly', defaultValue: true}"
+ data-ng-change="firstEditPrompt()">
+ </label>
+ <span class="storage-data-filter"
+ data-ng-class="{'storage-data-filter-active': query}"
+ data-ng-i18n-reorder="panels_storage_filterOrder">
+ <span data-ng-i18n-content="panels_storage_filter0"></span>
+ <select data-ng-model="filterOrHighlight">
+ <option value="filter"
+ data-ng-i18n-content="panels_storage_filter1Filter">
+ </option>
+ <option value="highlight"
+ data-ng-i18n-content="panels_storage_filter1Highlight">
+ </option>
+ </select>
+ <span data-ng-i18n-content="panels_storage_filter2"></span>
+ <select data-ng-model="filterField">
+ <option value="keyValue"
+ data-ng-i18n-content="panels_storage_filter3KeyValue">
+ </option>
+ <option value="value"
+ data-ng-i18n-content="panels_storage_filterValue">
+ </option>
+ <option value="key" data-ng-i18n-content="panels_storage_filter3Key">
+ </option>
+ </select>
+ <span data-ng-i18n-content="panels_storage_filter4"></span>
+ <input type="text" data-ng-model="query"
+ data-ng-change="filterItems(query)">
+ <span data-ng-i18n-content="panels_storage_filter6"></span>
+ </span>
+ </nav>
+ <div data-ng-repeat="(area, properties) in current">
+ <div data-ng-show="hideDetails" class="storage-area-summary">
+ </div>
+ <div data-ng-hide="hideDetails">
+ <table class="storage-data-table">
+ <tr>
+ <th style="text-align:left">
+ <button data-ng-click="clear(area)">
+ ×
+ </button>
+ </th>
+ <th data-ng-i18n-content="panels_storage_key"></th>
+ <th data-ng-i18n-content="panels_storage_value"></th>
+ <th data-ng-i18n-content="panels_storage_size"></th>
+ </tr>
+ <tr>
+ <td>
+ <button data-ng-click="addNewItem(area, properties)">+</button>
+ </td>
+ <td>
+ <input type="text" data-ng-model="properties.newItem.key"
+ data-ng-change="onEditNewItem(properties)"
+ data-ng-class="{'invalid-editing':
+ properties.newItem.keyInvalid}">
+ </td>
+ <td>
+ <textarea data-ng-model="properties.newItem.value"
+ data-ng-change="onEditNewItem(properties)"
+ data-ng-class="{'invalid-editing':
+ properties.newItem.valueInvalid}"
+ rows="1">
+ </textarea>
+ </td>
+ <td>{{properties.newItem.size}}</td>
+ </tr>
+ <tr data-ng-repeat="(key, details) in properties.items"
+ data-ng-class-even="'storage-item-row-even'"
+ data-ng-class-odd="'storage-item-row-odd'"
+ data-ng-hide="query && details.hidden"
+ data-ng-class="{'storage-item-row-highlight':
+ query && details.highlight}">
+ <td>
+ <button data-ng-click="remove(area, key)">×</button>
+ </td>
+ <td data-ng-dblclick="beforeEditKey(key, details)">
+ <span data-ng-hide="details.editingKey">
+ {{unescapeKey(key)}}
+ </span>
+ <span>
+ <input type="text" data-ng-model="details.keyString"
+ data-ng-blur="editKey(area, key, details)"
+ data-ng-focus-if="details.editingKey"
+ data-ng-show="details.editingKey">
+ </span>
+ </td>
+ <td data-ng-dblclick="beforeEditValue(details)"
+ class="storage-item-value">
+ <span data-ng-hide="details.editingValue">
+ <pre>{{dumpValue(details.value)}}</pre>
+ </span>
+ <span>
+ <textarea data-ng-model="details.valueString"
+ data-ng-change="onEditValue(details)"
+ data-ng-blur="editValue(area, key, details)"
+ data-ng-show="details.editingValue"
+ data-ng-focus-if="details.editingValue"
+ data-ng-class="{'invalid-editing': details.invalid}"
+ rows="5">
+ </textarea>
+ </span>
+ </td>
+ <td>{{details.bytesInUse}}</td>
+ </tr>
+ </table>
+ </div>
+ <div>
+ <table class="storage-quota-status">
+ <tr>
+ <th data-ng-i18n-content="panels_storage_quota"></th>
+ <th data-ng-i18n-content="panels_storage_quotaUsed"></th>
+ <th data-ng-i18n-content="panels_storage_quotaTotal"></th>
+ <th data-ng-i18n-content="panels_storage_quotaUsage"></th></tr>
+ <tr>
+ <td data-ng-i18n-content="panels_storage_totalBytes"></td>
+ <td>
+ {{properties.stat.totalBytes}}
+ </td>
+ <td>
+ <span data-ng-show="properties.limits.quotaBytes">
+ {{properties.limits.quotaBytes}}
+ </span>
+ <span data-ng-hide="properties.limits.quotaBytes"
+ data-ng-i18n-content="panels_storage_unlimited">
+ </span>
+ </td>
+ <td>
+ <meter value="{{properties.stat.totalBytes}}" min="0"
+ max="{{properties.limits.quotaBytes}}"
+ high="{{0.8 * properties.limits.quotaBytes}}">
+ {{percentage(properties.stat.totalBytes /
+ properties.limits.quotaBytes)}}
+ </meter>
+ </td>
+ </tr>
+ <tr data-ng-show="properties.limits.quotaBytesPerItem">
+ <td data-ng-i18n-content="panels_storage_bytesPerItem">
+ </td>
+ <td>
+ {{properties.stat.maxItemLength}}
+ </td>
+ <td>
+ {{properties.limits.quotaBytesPerItem}}
+ </td>
+ <td>
+ <meter value="{{properties.stat.maxItemLength}}" min="0"
+ max="{{properties.limits.quotaBytesPerItem}}"
+ high="{{0.8 * properties.limits.quotaBytesPerItem}}">
+ {{percentage(properties.stat.maxItemLength /
+ properties.limits.quotaBytesPerItem)}}
+ </meter>
+ </td>
+ </tr>
+ <tr data-ng-show="properties.limits.maxItems">
+ <td data-ng-i18n-content="panels_storage_maxItems"></td>
+ <td>
+ {{properties.stat.itemNumber}}
+ </td>
+ <td>
+ {{properties.limits.maxItems}}
+ </td>
+ <td>
+ <meter value="{{properties.stat.itemNumber}}" min="0"
+ max="{{properties.limits.maxItems}}"
+ high="{{0.8 * properties.limits.maxItems}}">
+ {{percentage(properties.stat.itemNumber /
+ properties.limits.maxItems)}}
+ </meter>
+ </td>
+ </tr>
+ <tr data-ng-show="properties.limits.maxWriteOperationsPerHour">
+ <td data-ng-i18n-content="panels_storage_maxWritePerHour"></td>
+ <td colspan="3">
+ <span data-ng-i18n-content='panels_storage_makeSureUnder1'
+ ></span>{{properties.limits.maxWriteOperationsPerHour}}<span
+ data-ng-i18n-content='panels_storage_makeSureUnder2'></span>
+ </td>
+ </tr>
+ <tr
+ data-ng-show="
+ properties.limits.maxSustainedWriteOperationsPerMinute">
+ <td data-ng-i18n-content="panels_storage_maxWritePerMinute"></td>
+ <td colspan="3">
+ <span data-ng-i18n-content='panels_storage_makeSureUnder1'
+ ></span>{{
+ properties.limits.maxSustainedWriteOperationsPerMinute}}<span
+ data-ng-i18n-content='panels_storage_makeSureUnder2'></span>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
+
Property changes on: chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.html
___________________________________________________________________
Added: svn:mime-type
+ text/html
Added: svn:eol-style
+ LF
« no previous file with comments | « chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.css ('k') | chrome/common/extensions/docs/examples/extensions/storage_api_devtools/storage/panel.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698