Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 20:35:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1414169 - pt 8 - Refactor creating html elements for conciseness. r=ng

Browse Source 
MozReview-Commit-ID: 5naesMTOmtI

--HG--
extra : rebase_source : 998bd1fe6f2cf132a9d367576938264f1bdfad85
This commit is contained in:
Michael Froman 2017-12-06 11:23:02 -06:00
parent 7445e1ec24
commit a5b6ed41e4
1 changed files with 73 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
toolkit/content/aboutwebrtc/aboutWebrtc.js
View File

@ -79,18 +79,13 @@ function onClearStats() {
var ControlSet = { var ControlSet = {
render() { render() {
let controls = document.createElement("div"); let controls = renderElement("div", null, {className: "controls"});
let control = document.createElement("div"); this.controlSection = renderElement("div", null, {className: "control"});
let message = document.createElement("div"); this.messageSection = renderElement("div", null, {className: "message"});
controls.className = "controls"; controls.appendChild(this.controlSection);
control.className = "control"; controls.appendChild(this.messageSection);
message.className = "message";
controls.appendChild(control);
controls.appendChild(message);
this.controlSection = control;
this.messageSection = message;
return controls; return controls;
}, },
@ -303,12 +298,9 @@ var AboutWebRTC = {
this._setData(data); this._setData(data);
if (data.error) { if (data.error) {
let msg = document.createElement("h3"); parent.appendChild(renderElement("h3", getString("cannot_retrieve_log")));
msg.textContent = getString("cannot_retrieve_log"); parent.appendChild(
parent.appendChild(msg); renderElement("p", `${data.error.name}: ${data.error.message}`));
msg = document.createElement("p");
msg.textContent = `${data.error.name}: ${data.error.message}`;
parent.appendChild(msg);
return; return;
} }
@ -339,20 +331,15 @@ var AboutWebRTC = {
}, },
renderPeerConnections() { renderPeerConnections() {
let connections = document.createElement("div"); let connections = renderElement("div", null, {className: "stats"});
connections.className = "stats";
let heading = document.createElement("span"); let heading = renderElement("span", null, {className: "section-heading"});
heading.className = "section-heading"; heading.appendChild(renderElement("h3", getString("stats_heading")));
let elem = document.createElement("h3");
elem.textContent = getString("stats_heading");
heading.appendChild(elem);
elem = document.createElement("button"); heading.appendChild(renderElement("button", getString("stats_clear"), {
elem.textContent = getString("stats_clear"); className: "no-print",
elem.className = "no-print"; onclick: this._onClearStats
elem.onclick = this._onClearStats; }));
heading.appendChild(elem);
connections.appendChild(heading); connections.appendChild(heading);
if (!this._reports || !this._reports.length) { if (!this._reports || !this._reports.length) {
@ -370,19 +357,14 @@ var AboutWebRTC = {
}, },
renderConnectionLog() { renderConnectionLog() {
let content = document.createElement("div"); let content = renderElement("div", null, {className: "log"});
content.className = "log";
let heading = document.createElement("span"); let heading = renderElement("span", null, {className: "section-heading"});
heading.className = "section-heading"; heading.appendChild(renderElement("h3", getString("log_heading")));
let elem = document.createElement("h3"); heading.appendChild(renderElement("button", getString("log_clear"), {
elem.textContent = getString("log_heading"); className: "no-print",
heading.appendChild(elem); onclick: this._onClearLog
elem = document.createElement("button"); }));
elem.textContent = getString("log_clear");
elem.className = "no-print";
elem.onclick = this._onClearLog;
heading.appendChild(elem);
content.appendChild(heading); content.appendChild(heading);
if (!this._log || !this._log.length) { if (!this._log || !this._log.length) {
@ -395,9 +377,7 @@ var AboutWebRTC = {
}).render(); }).render();
for (let line of this._log) { for (let line of this._log) {
elem = document.createElement("p"); div.appendChild(renderElement("p", line));
elem.textContent = line;
div.appendChild(elem);
} }
content.appendChild(div); content.appendChild(div);
@ -411,8 +391,7 @@ function PeerConnection(report) {
PeerConnection.prototype = { PeerConnection.prototype = {
render() { render() {
let pc = document.createElement("div"); let pc = renderElement("div", null, {className: "peer-connection"});
pc.className = "peer-connection";
pc.appendChild(this.renderHeading()); pc.appendChild(this.renderHeading());
let div = new FoldableSection(pc).render(); let div = new FoldableSection(pc).render();
@ -437,16 +416,15 @@ PeerConnection.prototype = {
renderDesc() { renderDesc() {
let info = document.createElement("div"); let info = document.createElement("div");
let label = document.createElement("span");
let body = document.createElement("span");
label.className = "info-label"; info.appendChild(
label.textContent = `${getString("peer_connection_id_label")}: `; renderElement("span", `${getString("peer_connection_id_label")}: `), {
info.appendChild(label); className: "info-label"
});
body.className = "info-body"; info.appendChild(renderElement("span", this._report.pcid, {
body.textContent = this._report.pcid; className: "info-body"
info.appendChild(body); }));
return info; return info;
}, },
@ -460,6 +438,13 @@ PeerConnection.prototype = {
} }
}; };
function renderElement(elemName, elemText, options = {}) {
let elem = document.createElement(elemName);
elem.textContent = elemText || "";
Object.assign(elem, options);
return elem;
}
function SDPStats(report) { function SDPStats(report) {
this._report = report; this._report = report;
} }
@ -467,33 +452,20 @@ function SDPStats(report) {
SDPStats.prototype = { SDPStats.prototype = {
render() { render() {
let div = document.createElement("div"); let div = document.createElement("div");
let elem = document.createElement("h4"); div.appendChild(renderElement("h4", getString("sdp_heading")));
let localSdpHeading = getString("local_sdp_heading");
let remoteSdpHeading = getString("remote_sdp_heading");
let offerLabel = `(${getString("offer")})`; let offerLabel = `(${getString("offer")})`;
let answerLabel = `(${getString("answer")})`; let answerLabel = `(${getString("answer")})`;
let localSdpHeading =
`${getString("local_sdp_heading")} ${this._report.offerer ? offerLabel : answerLabel}`;
let remoteSdpHeading =
`${getString("remote_sdp_heading")} ${this._report.offerer ? answerLabel : offerLabel}`;
elem.textContent = getString("sdp_heading"); div.appendChild(renderElement("h5", localSdpHeading));
div.appendChild(elem); div.appendChild(renderElement("pre", this._report.localSdp));
elem = document.createElement("h5"); div.appendChild(renderElement("h5", remoteSdpHeading));
elem.textContent = div.appendChild(renderElement("pre", this._report.remoteSdp));
`${localSdpHeading} ${this._report.offerer ? offerLabel : answerLabel}`;
div.appendChild(elem);
elem = document.createElement("pre");
elem.textContent = this._report.localSdp;
div.appendChild(elem);
elem = document.createElement("h5");
elem.textContent =
`${remoteSdpHeading} ${this._report.offerer ? answerLabel : offerLabel}`;
div.appendChild(elem);
elem = document.createElement("pre");
elem.textContent = this._report.remoteSdp;
div.appendChild(elem);
return div; return div;
} }
@ -507,10 +479,7 @@ function RTPStats(report) {
RTPStats.prototype = { RTPStats.prototype = {
render() { render() {
let div = document.createElement("div"); let div = document.createElement("div");
let heading = document.createElement("h4"); div.appendChild(renderElement("h4", getString("rtp_stats_heading")));
heading.textContent = getString("rtp_stats_heading");
div.appendChild(heading);
this.generateRTPStats(); this.generateRTPStats();
@ -556,9 +525,7 @@ RTPStats.prototype = {
statsString += `${getString("jitter_buffer_delay_label")}: ${stats.mozJitterBufferDelay} ms`; statsString += `${getString("jitter_buffer_delay_label")}: ${stats.mozJitterBufferDelay} ms`;
} }
let line = document.createElement("p"); return renderElement("p", statsString);
line.textContent = statsString;
return line;
}, },
renderCoderStats(stats) { renderCoderStats(stats) {
@ -591,9 +558,7 @@ RTPStats.prototype = {
statsString = label + statsString; statsString = label + statsString;
} }
let line = document.createElement("p"); return renderElement("p", statsString);
line.textContent = statsString;
return line;
}, },
renderTransportStats(stats, typeLabel) { renderTransportStats(stats, typeLabel) {
@ -619,17 +584,12 @@ RTPStats.prototype = {
} }
} }
let line = document.createElement("p"); return renderElement("p", statsString);
line.textContent = statsString;
return line;
}, },
renderRTPStatSet(stats) { renderRTPStatSet(stats) {
let div = document.createElement("div"); let div = document.createElement("div");
let heading = document.createElement("h5"); div.appendChild(renderElement("h5", stats.id));
heading.textContent = stats.id;
div.appendChild(heading);
if (stats.MozAvSyncDelay || stats.mozJitterBufferDelay) { if (stats.MozAvSyncDelay || stats.mozJitterBufferDelay) {
div.appendChild(this.renderAvStats(stats)); div.appendChild(this.renderAvStats(stats));
@ -653,10 +613,7 @@ function ICEStats(report) {
ICEStats.prototype = { ICEStats.prototype = {
render() { render() {
let div = document.createElement("div"); let div = document.createElement("div");
let heading = document.createElement("h4"); div.appendChild(renderElement("h4", getString("ice_stats_heading")));
heading.textContent = getString("ice_stats_heading");
div.appendChild(heading);
div.appendChild(this.renderICECandidateTable()); div.appendChild(this.renderICECandidateTable());
// add just a bit of vertical space between the restart/rollback // add just a bit of vertical space between the restart/rollback
@ -673,15 +630,13 @@ ICEStats.prototype = {
}, },
renderICECandidateTable() { renderICECandidateTable() {
let caption = document.createElement("caption"); let caption = renderElement("caption", null, {className: "no-print"});
let captionSpan1 = document.createElement("span"); caption.appendChild(
captionSpan1.textContent = `${getString("trickle_caption_msg")} `; renderElement("span", `${getString("trickle_caption_msg")} `));
let captionSpan2 = document.createElement("span"); caption.appendChild(
captionSpan2.textContent = getString("trickle_highlight_color_name"); renderElement("span", getString("trickle_highlight_color_name"), {
captionSpan2.className = "trickled"; className: "trickled"
caption.appendChild(captionSpan1); }));
caption.appendChild(captionSpan2);
caption.className = "no-print";
let stats = this.generateICEStats(); let stats = this.generateICEStats();
// don't use |stat.x || ""| here because it hides 0 values // don't use |stat.x || ""| here because it hides 0 values
@ -741,9 +696,8 @@ ICEStats.prototype = {
renderRawICECandidateSection() { renderRawICECandidateSection() {
let section = document.createElement("div"); let section = document.createElement("div");
let heading = document.createElement("h4"); section.appendChild(
heading.textContent = getString("raw_candidates_heading"); renderElement("h4", getString("raw_candidates_heading")));
section.appendChild(heading);
let div = new FoldableSection(section, { let div = new FoldableSection(section, {
showMsg: getString("raw_cand_show_msg"), showMsg: getString("raw_cand_show_msg"),
@ -782,16 +736,14 @@ ICEStats.prototype = {
renderIceMetric(labelName, value) { renderIceMetric(labelName, value) {
let info = document.createElement("div"); let info = document.createElement("div");
let label = document.createElement("span");
let body = document.createElement("span");
label.className = "info-label"; info.appendChild(
label.textContent = `${getString(labelName)}: `; renderElement("span", `${getString(labelName)}: `, {
info.appendChild(label); className: "info-label"
}));
info.appendChild(
renderElement("span", value, {className: "info-body"}));
body.className = "info-body";
body.textContent = value;
info.appendChild(body);
return info; return info;
}, },
@ -869,8 +821,9 @@ ICEStats.prototype = {
function FoldableSection(parentElement, options = {}) { function FoldableSection(parentElement, options = {}) {
this._foldableElement = document.createElement("div"); this._foldableElement = document.createElement("div");
if (parentElement) { if (parentElement) {
let sectionCtrl = document.createElement("div"); let sectionCtrl = renderElement("div", null, {
sectionCtrl.className = "section-ctrl no-print"; className: "section-ctrl no-print"
});
let foldEffect = new FoldEffect(this._foldableElement, options); let foldEffect = new FoldEffect(this._foldableElement, options);
sectionCtrl.appendChild(foldEffect.render()); sectionCtrl.appendChild(foldEffect.render());
parentElement.appendChild(sectionCtrl); parentElement.appendChild(sectionCtrl);
@ -895,9 +848,7 @@ SimpleTable.prototype = {
let elemType = (header ? "th" : "td"); let elemType = (header ? "th" : "td");
for (let elem of list) { for (let elem of list) {
let cell = document.createElement(elemType); row.appendChild(renderElement(elemType, elem));
cell.textContent = elem;
row.appendChild(cell);
} }
return row; return row;
@ -936,9 +887,8 @@ FoldEffect.prototype = {
render() { render() {
this._target.classList.add("fold-target"); this._target.classList.add("fold-target");
let ctrl = document.createElement("div"); let ctrl = renderElement("div", null, {className: "fold-trigger"});
this._trigger = ctrl; this._trigger = ctrl;
ctrl.className = "fold-trigger";
ctrl.addEventListener("click", this.onClick.bind(this)); ctrl.addEventListener("click", this.onClick.bind(this));
this.close(); this.close();