Upstream version 9.37.197.0

[platform/framework/web/crosswalk.git] / src / chrome / browser / resources / ssl / roadblock.html
diff --git a/src/chrome/browser/resources/ssl/roadblock.html b/src/chrome/browser/resources/ssl/roadblock.html

index ea24420..af1c1a3 100644 (file)
--- a/src/chrome/browser/resources/ssl/roadblock.html
+++ b/src/chrome/browser/resources/ssl/roadblock.html
@@ -10,10 +10,6 @@
      height: 100%;
    }
  
-  html[dir='rtl'] #twisty-closed {
-    -webkit-transform: scaleX(-1);
-  }
-
    body {
      font-family: Helvetica, Arial, sans-serif;
      margin: 0;
@@ -34,10 +30,6 @@
      width: 80%;
    }
  
-  .icon {
-    position:absolute;
-  }
-
    .main {
      margin: 1em 80px;
    }
@@ -59,8 +51,11 @@
      text-decoration: underline;
    }
  
-  html[dir='rtl'] .test-image {
-    float: left;
+  #roadblock-icon {
+    background-image: url('images/roadblock.png');
+    height: 53px;
+    position: absolute;
+    width: 64px;
    }
  
    .title {
@@ -71,8 +66,8 @@
      margin: 0 77px 6pt;
    }
  
-  .twisty {
-    display: inline;
+  summary:focus {
+    outline: none;
    }
    </style>
    <script src="../../../../ui/webui/resources/js/assert.js"></script>
@@ -81,9 +76,7 @@
  </head>
  <body>
    <div class="box">
-    <div class="icon">
-      <img src="roadblock_icon.png" alt="SSL Error Icon" id="roadblock-icon">
-    </div>
+    <div class="icon" id="roadblock-icon"></div>
      <div class="title" i18n-content="headLine"></div>
      <div class="main" i18n-values=".innerHTML:description;dir:textdirection"></div>
      <div class="main" i18n-values=".innerHTML:reasonForNotProceeding"></div>
@@ -91,24 +84,14 @@
        <button i18n-content="proceed" id="proceed-button" hidden></button>
        <button i18n-content="exit" id="exit-button"></button>
      </div>
-    <div class="more" id="more-info-short">
-      <span class="more-link">
-        <img id="twisty-closed" class="twisty" src="twisty_closed.png"
-            border="0"><span i18n-content="moreInfoTitle" id="more-info-title"
-            class="show-more-info-title"></span>
-      </span>
-    </div>
-    <div class="more" id="more-info-long" hidden>
-      <span class="more-link">
-        <img class="twisty" src="twisty_open.png" border="0"><span
-            i18n-content="moreInfoTitle" class="more-info-title"></span>
-      </span>
+    <details class="more">
+      <summary><span class="more-link" i18n-content="moreInfoTitle" id="more-info-title"></span></summary>
        <p i18n-values=".innerHTML:moreInfo1"></p>
        <p i18n-values=".innerHTML:moreInfo2"></p>
        <p i18n-values=".innerHTML:moreInfo3"></p>
        <p i18n-values=".innerHTML:moreInfo4"></p>
        <p i18n-values=".innerHTML:moreInfo5"></p>
-    </div>
+    </details>
    </div>
  </table>
  </body>