Issue 5943 - Implement Updates Page for Adblock Plus extension

skin/updates.css

+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  src: local ("Ø"),
+  url(fonts/SourceSansPro-Regular.woff) format("woff");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-style: bold;
+  font-weight: 600;
+  font-stretch: normal;
+  src: local ("Ø"),
+  url(fonts/SourceSansPro-bold.woff) format("woff");
+}
+
+html
+{
+  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
+}
+
+body
+{
+  margin: 0;
+  padding: 0;
+}
+
+#container
+{
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.column
+{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+
+#graphic-column
+{
+  background-color: #8DC446;
+}
+
+.graphic-column
+{
+  background-color: #8DC446;
+}
+
+#content
+{
+  padding: 0 3em;
+  max-width: 760px;
+}
+
+#content a
+{
+  color: #C70D2C;
+  text-decoration: none;
+}
+
+#optionsPageLink
+{
+  color: red;
+}
+
+#content a:hover
+{
+  text-decoration: underline;
+  cursor: pointer;

[Thomas Greiner, 2017/11/27 16:15:48]

Detail: Why is this necessary? `<a>` elements have this style by default and I
don't see any other rules overriding it either.

[martin, 2017/12/05 14:37:31]

I *think* what's happening is that because the  "Settings page" has no "href"
the pointer reverts to "normal". I needed to include this rule to achieve the
expected behaviour. Let me know if there's a different solution for that.

[Thomas Greiner, 2017/12/11 12:11:08]

Makes sense. Generally, we add `href="#"` for such links so you could either add
that via JavaScript or add a comment here to explain why these styles are
necessary.

I just noticed, however, that you can also pass a function to `setLinks()` in
which case it'll set the "href" attribute as well as the click listener
automatically (see
https://hg.adblockplus.org/adblockplusui/file/tip/common.js#l36).

[martin, 2017/12/19 12:59:49]

Added a comment here to explain the styles.

On 2017/12/11 12:11:08, Thomas Greiner wrote:

+}
+
+#content header
+{
+  margin: 0 0 2em 5em;
+}
+
+html[dir="rtl"] #content header
+{
+  margin: 0 5em 2em 0;
+}
+
+#content header p {
+  margin: 0;
+  opacity: 0.5;
+  font-weight: 400;
+  font-size: 1.2em;
+}
+
+#content header h1
+{
+  margin: 0;
+}
+
+.custom-feature-entry
+{
+  margin-top: 2em;
+}
+
+.custom-feature-entry h2
+{
+  margin: 0 0 0 3.4em;
+}
+
+html[dir="rtl"] .custom-feature-entry h2
+{
+  margin: 0 3.4em 0 0;
+}
+
+.update-graphic-container
+{
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 560px;
+  height: 460px;
+  background-image: url(./updates/base-graphic.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.update-graphic-container img
+{
+  display: block;
+  width: 162px;
+  height: 162px;
+}
+
+.update-graphic-content
+{
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 65px;
+  left: 100px;
+}
+
+.version-details
+{
+  margin: 0 1em 0 1em;
+}
+
+.version-details h2
+{
+  margin: 0;
+}
+
+.feature-entry
+{
+  display: flex;
+  align-items: center;
+  padding: 0 1em;
+}
+
+.feature-entry img
+{
+  width: 50px;
+  height: 50px;

[Thomas Greiner, 2017/11/27 16:15:49]

Suggestion: I noticed that the content jumps when the page loads in Chrome
because the width of these images changes after they've been loaded.
I'd assume that this is a rendering issue with Chrome and we could work around
it by setting `min-width` and `min-height`.

In Firefox it's even worse but the only solution there might be to wait until
all strings have loaded before making the page visible so probably not worth the
effort and risk.

Therefore feel free to ignore this issue or add the mentioned workaround with a
comment on top of it to explain why it's necessary.

[martin, 2017/12/05 14:37:30]

I'm ignoring this issue for now.

+  display: block;
+  margin: 0 1em 0 0;
+}
+
+html[dir="rtl"] .feature-entry img
+{
+  margin: 0 0 0 1em;
+}
+
+#block-ads-text > strong
+{
+  text-decoration: line-through;
+  font-weight: normal;
+}
+
+.store-buttons
+{
+  height: 58px;
+  margin: 0 0 0 5em;
+}
+
+html[dir="rtl"] .store-buttons
+{
+  margin: 0 5em 0 0;
+}
+
+.store-button
+{
+  display: block;
+  height: 58px;
+  border-radius: 6px;
+  background-color: #000;
+  float: left;
+  margin-bottom: 1em;
+  overflow: hidden;

[Thomas Greiner, 2017/11/27 16:15:49]

Detail: What's the purpose of this? There shouldn't be anything overflowing from
what I see.

[martin, 2017/12/05 14:37:31]

Oops. Was playing around with something and forgot to delete the rule. It's gone
now.

+}
+
+html[dir="rtl"] .store-button
+{
+  float: right;
+}
+
+.store-button > img
+{
+  height: 100%;
+}
+
+.applestore-button
+{
+  margin-right: 1em;
+}
+
+html[dir="rtl"] .applestore-button
+{
+  margin-right: 0;
+  margin-left: 1em;
+}
+
+@media(max-width: 960px)
+{
+  #container
+  {
+    flex-direction: column;
+  }
+}
+
+@media(max-width: 480px)
+{
+  #content header
+  {
+    margin: 2em 0 2em 5em;
+  }
+
+  .column
+  {
+    align-items: flex-start;
+  }
+
+  html[dir="rtl"] .applestore-button
+  {
+    margin: 0 0 1em 0;
+  }
+}