Bug 1561118 - Creates error UI for about:certificate. r=johannh
authordleblanccyr <danielleleb12@gmail.com>
Thu, 11 Jul 2019 16:53:07 +0000
changeset 482467 fa3246642d51d1f32702445747e86a8fc2ccc0e7
parent 482466 224e533c8f87a037e388e18ef16611f784d3cb6c
child 482468 2d91aeed09f88d75460a11db687fcf9fa8c5cb66
push id36282
push userdvarga@mozilla.com
push dateFri, 12 Jul 2019 09:56:21 +0000
treeherdermozilla-central@cb2d564879e3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1561118
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1561118 - Creates error UI for about:certificate. r=johannh Differential Revision: https://phabricator.services.mozilla.com/D36674
toolkit/components/certviewer/content/components/certificate-section.js
toolkit/components/certviewer/content/components/error-section.css
toolkit/components/certviewer/content/components/error-section.js
--- a/toolkit/components/certviewer/content/components/certificate-section.js
+++ b/toolkit/components/certviewer/content/components/certificate-section.js
@@ -1,40 +1,51 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* globals certArray, updateSelectedItem, InfoGroup */
+/* globals certArray, updateSelectedItem, InfoGroup, ErrorSection */
 
 class CertificateSection extends HTMLElement {
   constructor() {
     super();
   }
 
   connectedCallback() {
     let template = document.getElementById("certificate-section-template");
     let templateHtml = template.content.cloneNode(true);
 
     this.attachShadow({ mode: "open" }).appendChild(templateHtml);
 
     document.l10n.connectRoot(this.shadowRoot);
 
     this.infoGroupsContainers = [];
-    this.createInfoGroupsContainers();
 
     this.render();
   }
 
   render() {
     let certificateTabs = this.shadowRoot.querySelector(".certificate-tabs");
 
     let title = this.shadowRoot.querySelector(".title");
     title.setAttribute("data-l10n-id", "certificate-section-title");
 
+    // TODO: Render based on certificate error.
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1560513
+    let error = true;
+
     this.infoGroupContainer = this.shadowRoot.querySelector(".info-groups");
+
+    if (error) {
+      title.classList.add("error");
+      certificateTabs.appendChild(new ErrorSection());
+      return;
+    }
+
+    this.createInfoGroupsContainers();
     for (let i = 0; i < certArray.length; i++) {
       let tab = document.createElement("button");
       tab.textContent = "tab" + i;
       tab.setAttribute("id", "tab" + i);
       tab.setAttribute("aria-controls", "panel" + i);
       tab.setAttribute("idnumber", i);
       tab.setAttribute("role", "tab");
       tab.classList.add("certificate-tab");
@@ -45,19 +56,19 @@ class CertificateSection extends HTMLEle
       // If it isn't the first tab, do not allow tab functionality,
       // as arrow functionality is implemented in certviewer.js.
       if (i === 0) {
         tab.classList.add("selected");
         tab.setAttribute("tabindex", 0);
       } else {
         tab.setAttribute("tabindex", -1);
       }
+      this.infoGroupsContainers[0].classList.add("selected");
     }
     this.setAccessibilityEventListeners();
-    this.infoGroupsContainers[0].classList.add("selected");
   }
 
   /* Information on setAccessibilityEventListeners() can be found
    * at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role */
   setAccessibilityEventListeners() {
     const tabs = this.shadowRoot.querySelectorAll('[role="tab"]');
     const tabList = this.shadowRoot.querySelector('[role="tablist"]');
 
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/error-section.css
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  background-image: url("chrome://browser/content/illustrations/error-malformed-url.svg");
+  min-height: 300px;
+  background-repeat: no-repeat;
+  padding-inline-start: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 auto;
+  max-width: 500px;
+  background-size: 30%;
+  background-position: left center;
+}
+
+h1 {
+  text-align: center;
+  font-size: 2.5em;
+  font-weight: lighter;
+}
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/error-section.js
@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+class ErrorSection extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    let template = document.getElementById("error-section-template");
+    let templateHtml = template.content.cloneNode(true);
+
+    this.attachShadow({ mode: "open" }).appendChild(templateHtml);
+
+    document.l10n.connectRoot(this.shadowRoot);
+    this.render();
+  }
+
+  render() {
+    let title = this.shadowRoot.querySelector(".title");
+    title.setAttribute("data-l10n-id", "certificate-viewer-error-title");
+
+    let errorMessage = this.shadowRoot.querySelector(".error");
+    errorMessage.setAttribute(
+      "data-l10n-id",
+      "certificate-viewer-error-message"
+    );
+  }
+}
+customElements.define("error-section", ErrorSection);