<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[211196] trunk/Websites/perf.webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/211196">211196</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2017-01-25 20:00:41 -0800 (Wed, 25 Jan 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Modernize editable-text component and add tests
https://bugs.webkit.org/show_bug.cgi?id=167398
Reviewed by Yusuke Suzuki.
Modernized EditableText component to use the action feature added in <a href="http://trac.webkit.org/projects/webkit/changeset/210938">r210938</a>.
* browser-tests/editable-text-tests.js: Added. Added tests for EditableText component.
(.waitToRender):
* browser-tests/index.html:
* public/v3/components/base.js:
(ComponentBase.prototype.dispatchAction): Return the result from the callback.
* public/v3/components/editable-text.js:
(EditableText): Removed a bunch of instance variables that are no longer needed.
(EditableText.prototype.didConstructShadowTree): Added. Add event listeners on the Edit/Save button and the host.
(EditableText.prototype.editedText): Return the text field's value directly.
(EditableText.prototype.text): Added.
(EditableText.prototype.setText): Call enqueueToRender automatically instead of relying on the parent component
to do so in _startedEditingCallback, which has been removed.
(EditableText.prototype.render): Modernized the code.
(EditableText.prototype._didClick): No longer prevents the default action manually since that's automatically done
in createEventHandler. Handle the case where the update action is not handled.
(EditableText.prototype._endEditingMode): Renamed from _didUpdate.
(EditableText.htmlTemplate): Added ids on various elements in the shadow tree.
(EditableText.cssTemplate): Updated the CSS selectors per above change.
* public/v3/main.js:
(main): Fixed a typo.
* public/v3/pages/analysis-task-page.js:
(AnalysisTaskPage): Use the action listener instead of manually setting callbacks.
(AnalysisTaskPage.prototype._createTestGroupListItem): Ditto.
(AnalysisTaskPage.prototype._didStartEditingTaskName): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgbrowsertestsindexhtml">trunk/Websites/perf.webkit.org/browser-tests/index.html</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentsbasejs">trunk/Websites/perf.webkit.org/public/v3/components/base.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentseditabletextjs">trunk/Websites/perf.webkit.org/public/v3/components/editable-text.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3mainjs">trunk/Websites/perf.webkit.org/public/v3/main.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs">trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgbrowsertestseditabletexttestsjs">trunk/Websites/perf.webkit.org/browser-tests/editable-text-tests.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -1,3 +1,37 @@
</span><ins>+2017-01-24 Ryosuke Niwa <rniwa@webkit.org>
+
+ Modernize editable-text component and add tests
+ https://bugs.webkit.org/show_bug.cgi?id=167398
+
+ Reviewed by Yusuke Suzuki.
+
+ Modernized EditableText component to use the action feature added in r210938.
+
+ * browser-tests/editable-text-tests.js: Added. Added tests for EditableText component.
+ (.waitToRender):
+ * browser-tests/index.html:
+ * public/v3/components/base.js:
+ (ComponentBase.prototype.dispatchAction): Return the result from the callback.
+ * public/v3/components/editable-text.js:
+ (EditableText): Removed a bunch of instance variables that are no longer needed.
+ (EditableText.prototype.didConstructShadowTree): Added. Add event listeners on the Edit/Save button and the host.
+ (EditableText.prototype.editedText): Return the text field's value directly.
+ (EditableText.prototype.text): Added.
+ (EditableText.prototype.setText): Call enqueueToRender automatically instead of relying on the parent component
+ to do so in _startedEditingCallback, which has been removed.
+ (EditableText.prototype.render): Modernized the code.
+ (EditableText.prototype._didClick): No longer prevents the default action manually since that's automatically done
+ in createEventHandler. Handle the case where the update action is not handled.
+ (EditableText.prototype._endEditingMode): Renamed from _didUpdate.
+ (EditableText.htmlTemplate): Added ids on various elements in the shadow tree.
+ (EditableText.cssTemplate): Updated the CSS selectors per above change.
+ * public/v3/main.js:
+ (main): Fixed a typo.
+ * public/v3/pages/analysis-task-page.js:
+ (AnalysisTaskPage): Use the action listener instead of manually setting callbacks.
+ (AnalysisTaskPage.prototype._createTestGroupListItem): Ditto.
+ (AnalysisTaskPage.prototype._didStartEditingTaskName): Deleted.
+
</ins><span class="cx"> 2017-01-20 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Build fix after r210783. Didn't mean to require custom elements API.
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgbrowsertestseditabletexttestsjs"></a>
<div class="addfile"><h4>Added: trunk/Websites/perf.webkit.org/browser-tests/editable-text-tests.js (0 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/browser-tests/editable-text-tests.js (rev 0)
+++ trunk/Websites/perf.webkit.org/browser-tests/editable-text-tests.js 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -0,0 +1,200 @@
</span><ins>+
+describe('EditableText', () => {
+ const scripts = ['instrumentation.js', 'components/base.js', 'components/editable-text.js'];
+
+ function waitToRender(context)
+ {
+ if (!context._dummyComponent) {
+ const ComponentBase = context.symbols.ComponentBase;
+ context._dummyComponent = class SomeComponent extends ComponentBase {
+ constructor(resolve)
+ {
+ super();
+ this._resolve = resolve;
+ }
+ render() { setTimeout(this._resolve, 0); }
+ }
+ ComponentBase.defineElement('dummy-component', context._dummyComponent);
+ }
+ return new Promise((resolve) => {
+ const instance = new context._dummyComponent(resolve);
+ context.document.body.appendChild(instance.element());
+ instance.enqueueToRender();
+ });
+ }
+
+ it('show the set text', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.enqueueToRender();
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().textContent).toNotInclude('hello');
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().textContent).toInclude('hello');
+ });
+ });
+
+ it('go to the editing mode', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().querySelector('input').offsetHeight).toBe(0);
+ expect(editableText.content().textContent).toInclude('hello');
+ expect(editableText.content().querySelector('a').textContent).toInclude('Edit');
+ expect(editableText.content().querySelector('a').textContent).toNotInclude('Save');
+ editableText.content().querySelector('a').click();
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().querySelector('input').offsetHeight).toNotBe(0);
+ expect(editableText.content().querySelector('a').textContent).toNotInclude('Edit');
+ expect(editableText.content().querySelector('a').textContent).toInclude('Save');
+ });
+ });
+
+ it('should dispatch "update" action', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ let updateCount = 0;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ editableText.listenToAction('update', () => updateCount++);
+ return waitToRender(context);
+ }).then(() => {
+ editableText.content().querySelector('a').click();
+ return waitToRender(context);
+ }).then(() => {
+ const input = editableText.content().querySelector('input');
+ expect(input.offsetHeight).toNotBe(0);
+ expect(editableText.editedText()).toBe('hello');
+ input.value = 'world';
+ expect(editableText.editedText()).toBe('world');
+ expect(updateCount).toBe(0);
+ editableText.content().querySelector('a').click();
+ expect(updateCount).toBe(1);
+ expect(editableText.editedText()).toBe('world');
+ expect(editableText.text()).toBe('hello');
+ });
+ });
+
+ it('should end the editing mode when it loses the focus', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ let updateCount = 0;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ editableText.listenToAction('update', () => updateCount++);
+ return waitToRender(context);
+ }).then(() => {
+ editableText.content().querySelector('a').click();
+ return waitToRender(context);
+ }).then(() => {
+ const input = editableText.content().querySelector('input');
+ expect(input.offsetHeight).toNotBe(0);
+ expect(editableText.editedText()).toBe('hello');
+ input.value = 'world';
+ expect(updateCount).toBe(0);
+
+ const focusableElement = document.createElement('div');
+ focusableElement.setAttribute('tabindex', 0);
+ document.body.appendChild(focusableElement);
+ focusableElement.focus();
+
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().querySelector('input').offsetHeight).toBe(0);
+ expect(editableText.text()).toBe('hello');
+ expect(updateCount).toBe(0);
+ });
+ });
+
+ it('should not end the editing mode when the "Save" button is focused', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ let updateCount = 0;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ editableText.listenToAction('update', () => updateCount++);
+ return waitToRender(context);
+ }).then(() => {
+ editableText.content().querySelector('a').click();
+ return waitToRender(context);
+ }).then(() => {
+ const input = editableText.content().querySelector('input');
+ expect(input.offsetHeight).toNotBe(0);
+ expect(editableText.editedText()).toBe('hello');
+ input.value = 'world';
+ expect(updateCount).toBe(0);
+ editableText.content().querySelector('a').focus();
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content().querySelector('input').offsetHeight).toNotBe(0);
+ editableText.content().querySelector('a').click();
+ expect(editableText.editedText()).toBe('world');
+ expect(updateCount).toBe(1);
+ });
+ });
+
+ it('should dipsatch "update" action when the "Save" button is clicked in Safari', () => {
+ const context = new BrowsingContext();
+ let editableText;
+ let updateCount = 0;
+ return context.importScripts(scripts, 'EditableText', 'ComponentBase').then((symbols) => {
+ const [EditableText] = symbols;
+ editableText = new EditableText;
+ context.document.body.appendChild(editableText.element());
+ editableText.setText('hello');
+ editableText.enqueueToRender();
+ editableText.listenToAction('update', () => updateCount++);
+ return waitToRender(context);
+ }).then(() => {
+ editableText.content('action-button').click();
+ return waitToRender(context);
+ }).then(() => {
+ const input = editableText.content('text-field');
+ expect(input.offsetHeight).toNotBe(0);
+ expect(editableText.editedText()).toBe('hello');
+ input.value = 'world';
+ expect(updateCount).toBe(0);
+ return waitToRender(context);
+ }).then(() => {
+ editableText.content('action-button').dispatchEvent(new MouseEvent('mousedown'));
+ return new Promise((resolve) => setTimeout(resolve, 0));
+ }).then(() => {
+ editableText.content('text-field').blur();
+ editableText.content('action-button').dispatchEvent(new MouseEvent('mouseup'));
+ return waitToRender(context);
+ }).then(() => {
+ expect(editableText.content('text-field').offsetHeight).toBe(0);
+ expect(updateCount).toBe(1);
+ expect(editableText.editedText()).toBe('world');
+ });
+ });
+
+});
</ins></span></pre></div>
<a id="trunkWebsitesperfwebkitorgbrowsertestsindexhtml"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/browser-tests/index.html (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/browser-tests/index.html 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/browser-tests/index.html 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -15,6 +15,7 @@
</span><span class="cx"> <div id="mocha"></div>
</span><span class="cx"> <script src="component-base-tests.js"></script>
</span><span class="cx"> <script src="close-button-tests.js"></script>
</span><ins>+<script src="editable-text-tests.js"></script>
</ins><span class="cx"> <script>
</span><span class="cx">
</span><span class="cx"> afterEach(() => {
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentsbasejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/base.js (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/base.js 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/public/v3/components/base.js 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -45,7 +45,7 @@
</span><span class="cx"> {
</span><span class="cx"> const callback = this._actionCallbacks.get(actionName);
</span><span class="cx"> if (callback)
</span><del>- callback.apply(this, args);
</del><ins>+ return callback.apply(this, args);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> listenToAction(actionName, callback)
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentseditabletextjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/editable-text.js (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/editable-text.js 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/public/v3/components/editable-text.js 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -6,71 +6,71 @@
</span><span class="cx"> super('editable-text');
</span><span class="cx"> this._text = text;
</span><span class="cx"> this._inEditingMode = false;
</span><del>- this._startedEditingCallback = null;
- this._updateCallback = null;
</del><span class="cx"> this._updatingPromise = null;
</span><span class="cx"> this._actionLink = this.content().querySelector('.editable-text-action a');
</span><del>- this._actionLink.onclick = this._didClick.bind(this);
- this._actionLink.onmousedown = this._didClick.bind(this);
- this._textField = this.content().querySelector('.editable-text-field');
- this._textField.onblur = this._didBlur.bind(this);
</del><span class="cx"> this._label = this.content().querySelector('.editable-text-label');
</span><span class="cx"> }
</span><span class="cx">
</span><del>- editedText() { return this._textField.value; }
- setText(text) { this._text = text; }
</del><ins>+ didConstructShadowTree()
+ {
+ const button = this.content('action-button');
+ button.addEventListener('mousedown', this.createEventHandler(() => this._didClick()));
+ button.addEventListener('click', this.createEventHandler(() => this._didClick()));
+ this.element().addEventListener('blur',() => {
+ if (!this.content().activeElement)
+ this._endEditingMode();
+ });
+ }
</ins><span class="cx">
</span><del>- setStartedEditingCallback(callback) { this._startedEditingCallback = callback; }
- setUpdateCallback(callback) { this._updateCallback = callback; }
</del><ins>+ editedText() { return this.content('text-field').value; }
+ text() { return this._text; }
+ setText(text)
+ {
+ this._text = text;
+ this.enqueueToRender();
+ }
</ins><span class="cx">
</span><span class="cx"> render()
</span><span class="cx"> {
</span><del>- this._label.textContent = this._text;
- this._actionLink.textContent = this._inEditingMode ? (this._updatingPromise ? '...' : 'Save') : 'Edit';
- this._actionLink.parentNode.style.display = this._text ? null : 'none';
</del><ins>+ const label = this.content('label');
+ label.textContent = this._text;
+ label.style.display = this._inEditingMode ? 'none' : null;
</ins><span class="cx">
</span><ins>+ const textField = this.content('text-field');
+ textField.style.display = this._inEditingMode ? null : 'none';
+ textField.readOnly = !!this._updatingPromise;
+
+ this.content('action-button').textContent = this._inEditingMode ? (this._updatingPromise ? '...' : 'Save') : 'Edit';
+ this.content('action-button-container').style.display = this._text ? null : 'none';
+
</ins><span class="cx"> if (this._inEditingMode) {
</span><del>- this._textField.readOnly = !!this._updatingPromise;
- this._textField.style.display = null;
- this._label.style.display = 'none';
</del><span class="cx"> if (!this._updatingPromise)
</span><del>- this._textField.focus();
- } else {
- this._textField.style.display = 'none';
- this._label.style.display = null;
</del><ins>+ textField.focus();
</ins><span class="cx"> }
</span><del>-
- super.render();
</del><span class="cx"> }
</span><span class="cx">
</span><del>- _didClick(event)
</del><ins>+ _didClick()
</ins><span class="cx"> {
</span><del>- event.preventDefault();
- event.stopPropagation();
-
- if (!this._updateCallback || this._updatingPromise)
</del><ins>+ if (this._updatingPromise)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- if (this._inEditingMode)
- this._updatingPromise = this._updateCallback().then(this._didUpdate.bind(this));
- else {
</del><ins>+ if (this._inEditingMode) {
+ const result = this.dispatchAction('update');
+ if (result instanceof Promise)
+ this._updatingPromise = result.then(() => this._endEditingMode());
+ else
+ this._endEditingMode();
+ } else {
</ins><span class="cx"> this._inEditingMode = true;
</span><del>- this._textField.value = this._text;
- this._textField.style.width = (this._text.length / 1.5) + 'rem';
- if (this._startedEditingCallback)
- this._startedEditingCallback();
</del><ins>+ const textField = this.content('text-field');
+ textField.value = this._text;
+ textField.style.width = (this._text.length / 1.5) + 'rem';
+ this.enqueueToRender();
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _didBlur(event)
</del><ins>+ _endEditingMode()
</ins><span class="cx"> {
</span><del>- var self = this;
- if (self._inEditingMode && !self._updatingPromise && !self.hasFocus())
- self._didUpdate();
- }
-
- _didUpdate()
- {
</del><span class="cx"> this._inEditingMode = false;
</span><span class="cx"> this._updatingPromise = null;
</span><span class="cx"> this.enqueueToRender();
</span><span class="lines">@@ -79,10 +79,10 @@
</span><span class="cx"> static htmlTemplate()
</span><span class="cx"> {
</span><span class="cx"> return `
</span><del>- <span class="editable-text-container">
- <input type="text" class="editable-text-field">
- <span class="editable-text-label"></span>
- <span class="editable-text-action">(<a href="#">Edit</a>)</span>
</del><ins>+ <span id="container">
+ <input id="text-field" type="text">
+ <span id="label"></span>
+ <span id="action-button-container">(<a id="action-button" href="#">Edit</a>)</span>
</ins><span class="cx"> </span>`;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -89,11 +89,11 @@
</span><span class="cx"> static cssTemplate()
</span><span class="cx"> {
</span><span class="cx"> return `
</span><del>- .editable-text-container {
</del><ins>+ #container {
</ins><span class="cx"> position: relative;
</span><span class="cx"> padding-right: 2.5rem;
</span><span class="cx"> }
</span><del>- .editable-text-field {
</del><ins>+ #text-field {
</ins><span class="cx"> background: transparent;
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><span class="lines">@@ -100,11 +100,11 @@
</span><span class="cx"> color: inherit;
</span><span class="cx"> font-weight: inherit;
</span><span class="cx"> font-size: inherit;
</span><del>- width: 8rem;
</del><span class="cx"> border: none;
</span><span class="cx"> }
</span><del>- .editable-text-action {
</del><ins>+ #action-button-container {
</ins><span class="cx"> position: absolute;
</span><ins>+ right: 0;
</ins><span class="cx"> padding-left: 0.2rem;
</span><span class="cx"> color: #999;
</span><span class="cx"> font-size: 0.8rem;
</span><span class="lines">@@ -112,7 +112,7 @@
</span><span class="cx"> margin-top: -0.4rem;
</span><span class="cx"> vertical-align: middle;
</span><span class="cx"> }
</span><del>- .editable-text-action a {
</del><ins>+ #action-button {
</ins><span class="cx"> color: inherit;
</span><span class="cx"> text-decoration: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3mainjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/main.js (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/main.js 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/public/v3/main.js 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -7,12 +7,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function main() {
</span><del>- const requriedFeatures = {
</del><ins>+ const requiredFeatures = {
</ins><span class="cx"> 'Shadow DOM API': () => { return !!Element.prototype.attachShadow; },
</span><span class="cx"> };
</span><span class="cx">
</span><del>- for (let name in requriedFeatures) {
- if (!requriedFeatures[name]())
</del><ins>+ for (let name in requiredFeatures) {
+ if (!requiredFeatures[name]())
</ins><span class="cx"> return alert(`Your browser does not support ${name}. Try using the latest Safari or Chrome.`);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3pagesanalysistaskpagejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js (211195 => 211196)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js 2017-01-26 02:38:41 UTC (rev 211195)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/analysis-task-page.js 2017-01-26 04:00:41 UTC (rev 211196)
</span><span class="lines">@@ -62,9 +62,9 @@
</span><span class="cx"> this._analysisResultsViewer.setRangeSelectorLabels(['A', 'B']);
</span><span class="cx"> this._analysisResultsViewer.setRangeSelectorCallback(this._selectedRowInAnalysisResultsViewer.bind(this));
</span><span class="cx"> this._testGroupResultsTable = this.content().querySelector('test-group-results-table').component();
</span><ins>+
</ins><span class="cx"> this._taskNameLabel = this.content().querySelector('.analysis-task-name editable-text').component();
</span><del>- this._taskNameLabel.setStartedEditingCallback(this._didStartEditingTaskName.bind(this));
- this._taskNameLabel.setUpdateCallback(this._updateTaskName.bind(this));
</del><ins>+ this._taskNameLabel.listenToAction('update', () => this._updateTaskName());
</ins><span class="cx">
</span><span class="cx"> this.content().querySelector('.change-type-form').onsubmit = this._updateChangeType.bind(this);
</span><span class="cx"> this._taskStatusControl = this.content().querySelector('.change-type-form select');
</span><span class="lines">@@ -364,8 +364,7 @@
</span><span class="cx"> _createTestGroupListItem(group)
</span><span class="cx"> {
</span><span class="cx"> var text = new EditableText(group.label());
</span><del>- text.setStartedEditingCallback(() => { return text.enqueueToRender(); });
- text.setUpdateCallback(this._updateTestGroupName.bind(this, group));
</del><ins>+ text.listenToAction('update', () => this._updateTestGroupName(group));
</ins><span class="cx">
</span><span class="cx"> this._testGroupLabelMap.set(group, text);
</span><span class="cx"> return ComponentBase.createElement('li', {class: 'test-group-list-' + group.id()},
</span><span class="lines">@@ -418,11 +417,6 @@
</span><span class="cx"> this.enqueueToRender();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _didStartEditingTaskName()
- {
- this._taskNameLabel.enqueueToRender();
- }
-
</del><span class="cx"> _updateTaskName()
</span><span class="cx"> {
</span><span class="cx"> console.assert(this._task);
</span></span></pre>
</div>
</div>
</body>
</html>