Commit 96a80e3e authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser 

Bug 41621: Tweak about:torconnect style.
parent a2eddaca

toolkit/components/torconnect/content/aboutTorConnect.css

+40 −50
Original line number Diff line number Diff line
@@ -7,7 +7,6 @@ 
:root {

  --onion-opacity: 1;

  --onion-color: var(--card-outline-color);

  --onion-radius: 75px;

}



input[type="checkbox"]:focus, select:focus {
@@ -231,34 +230,47 @@ input[type="checkbox"]:not(:disabled):active:checked { 
  }

}



#progressBar {

#progressBar:not([hidden]) {

  position: fixed;

  top: 0;

  inset-inline-start: 0;

  width: 0%;

  padding: 0;

  margin: 0;

  animation: progressAnimation 5s ease infinite;

  inset-block-start: 0;

  inset-inline: 0;

  display: grid;

  --progress-percent: 0%;

  --progress-animation: progressAnimation 5s ease infinite;

  --progress-bar-height: 7px;

}



#progressBar > * {

  grid-area: 1 / 1;

}



#progressBarBackground {

  width: 100%;

  height: var(--progress-bar-height);

  background: var(--in-content-box-info-background);

}



#progressBackground {

  z-index: 1;

  width: var(--progress-percent);

  height: 66px;

  margin-top: -26px;

  margin-block-start: -26px;

  background-image:

    linear-gradient(var(--progressbar-shadow-start), var(--in-content-page-background) 100%),

    var(--progressbar-gradient);

  background-position: inherit;

  animation: var(--progress-animation);

  filter: blur(5px);

  border-end-end-radius: 33px;

}



#progressSolid {

  position: absolute;

  top: 0;

  width: 100%;

  height: 7px;

  z-index: 2;

  width: var(--progress-percent);

  height: var(--progress-bar-height);

  border-start-end-radius: calc(var(--progress-bar-height) / 2);

  border-end-end-radius: calc(var(--progress-bar-height) / 2);

  background-image: var(--progressbar-gradient);

  background-position: inherit;

  animation: var(--progress-animation);

}



#progressBackground, #progressSolid {
@@ -295,8 +307,8 @@ input[type="checkbox"]:not(:disabled):active:checked { 
  max-width: 45em;

}



#quickstartCheckbox, #quickstartCheckboxLabel {

  vertical-align: middle;

#quickstartToggle {

  width: max-content;

}



/* mirrors p element spacing */
@@ -304,18 +316,25 @@ input[type="checkbox"]:not(:disabled):active:checked { 
  margin: 1em 0;

}



body {

  padding: 0px !important;

body.aboutTorConnect {

  justify-content: space-between;

  background-color: var(--in-content-page-background);

  background:

    local

    url("chrome://global/content/torconnect/onion-pattern.svg")

    center bottom

    repeat-x;

  /* Always reserve 150px for the background, plus 15px padding with content. */

  padding-block-end: 175px;

}



.title {

body.aboutTorConnect .title {

  background-image: url("chrome://global/content/torconnect/tor-connect.svg");

  -moz-context-properties: stroke, fill, fill-opacity;

  fill-opacity: var(--onion-opacity);

  fill: var(--onion-color);

  stroke: var(--onion-color);

  /* Make sure there is no padding between the title and #breadcrumbs. */

  padding-block-start: 0;

}



.title.offline {
@@ -330,32 +349,3 @@ body { 
  background-image: url("chrome://global/content/torconnect/connection-location.svg");

  stroke: var(--warning-color);

}
 


.onion-pattern-container {

  flex: auto;           /* grow to consume remaining space on the page */

  display: flex;

  margin: 0 auto;

  width: 100%;

  /* two onions tall, 4x the radius */

  height: calc(4 * var(--onion-radius));

  max-height: calc(4 * var(--onion-radius));

  min-height: calc(4 * var(--onion-radius));

  direction: ltr;

}



.onion-pattern-crop {

  height: 100%;

  width: 100%;



  -moz-context-properties: fill;

  fill: var(--onion-color, currentColor);

  /* opacity of the entire div, not context-opacity */

  opacity: var(--onion-opacity, 1);



  background-image: url("chrome://global/content/torconnect/onion-pattern.svg");

  background-repeat: repeat;

  background-attachment: local;

  background-position: center;

  /* svg source is 6 onions wide and 2 onions tall */

  background-size: calc(6 * 2 * var(--onion-radius)) calc(2 * 2 * var(--onion-radius));;

}

toolkit/components/torconnect/content/aboutTorConnect.html

+10 −8
Original line number Diff line number Diff line
@@ -12,11 +12,17 @@ 
      type="text/css"

      media="all"

    />



    <script

      type="module"

      src="chrome://global/content/elements/moz-toggle.mjs"

    ></script>

  </head>

  <body>

    <div id="progressBar">

      <div id="progressBackground"></div>

  <body class="aboutTorConnect">

    <div id="progressBar" hidden="hidden">

      <div id="progressSolid"></div>

      <div id="progressBackground"></div>

      <div id="progressBarBackground"></div>

    </div>

    <div id="connectPageContainer" class="container">

      <div id="breadcrumbs" class="hidden">
@@ -55,8 +61,7 @@ 
        <button id="viewLogButton"></button>



        <div id="quickstartContainer">

          <input id="quickstartCheckbox" type="checkbox" />

          <label id="quickstartCheckboxLabel" for="quickstartCheckbox"></label>

          <moz-toggle id="quickstartToggle" label-align-after=""></moz-toggle>

        </div>



        <div id="connectButtonContainer" class="button-container">
@@ -72,9 +77,6 @@ 
        </div>

      </div>

    </div>

    <div class="onion-pattern-container">

      <div class="onion-pattern-crop"></div>

    </div>

    <script src="chrome://global/content/torconnect/aboutTorConnect.js"></script>

  </body>

</html>

toolkit/components/torconnect/content/aboutTorConnect.js

+13 −12
Original line number Diff line number Diff line
@@ -60,8 +60,7 @@ class AboutTorConnect { 
    },

    quickstart: {

      container: "div#quickstartContainer",

      checkbox: "input#quickstartCheckbox",

      label: "label#quickstartCheckboxLabel",

      toggle: "#quickstartToggle",

    },

    buttons: {

      restart: "button#restartButton",
@@ -116,10 +115,7 @@ class AboutTorConnect { 
    quickstartContainer: document.querySelector(

      this.selectors.quickstart.container

    ),

    quickstartCheckbox: document.querySelector(

      this.selectors.quickstart.checkbox

    ),

    quickstartLabel: document.querySelector(this.selectors.quickstart.label),

    quickstartToggle: document.querySelector(this.selectors.quickstart.toggle),

    restartButton: document.querySelector(this.selectors.buttons.restart),

    configureButton: document.querySelector(this.selectors.buttons.configure),

    cancelButton: document.querySelector(this.selectors.buttons.cancel),
@@ -310,7 +306,10 @@ class AboutTorConnect { 
    this.elements.progressDescription.textContent = description;

    if (visible) {

      this.show(this.elements.progressMeter);

      this.elements.progressMeter.style.width = `${percent}%`;

      this.elements.progressMeter.style.setProperty(

        "--progress-percent",

        `${percent}%`

      );

    } else {

      this.hide(this.elements.progressMeter);

    }
@@ -407,7 +406,7 @@ class AboutTorConnect { 
  updateUI(state) {

    // calls update_$state()

    this[`update_${state.State}`](state);

    this.elements.quickstartCheckbox.checked = state.QuickStartEnabled;

    this.elements.quickstartToggle.pressed = state.QuickStartEnabled;

  }



  /* Per-state updates */
@@ -759,12 +758,14 @@ class AboutTorConnect { 
      RPMSendAsyncMessage("torconnect:view-tor-logs");

    });



    this.elements.quickstartCheckbox.addEventListener("change", () => {

      const quickstart = this.elements.quickstartCheckbox.checked;

    this.elements.quickstartToggle.addEventListener("toggle", () => {

      const quickstart = this.elements.quickstartToggle.pressed;

      RPMSendAsyncMessage("torconnect:set-quickstart", quickstart);

    });

    this.elements.quickstartLabel.textContent =

      TorStrings.settings.quickstartCheckbox;

    this.elements.quickstartToggle.setAttribute(

      "label",

      TorStrings.settings.quickstartCheckbox

    );



    this.elements.restartButton.textContent =

      TorStrings.torConnect.restartTorBrowser;

toolkit/components/torconnect/content/onion-pattern.svg

+29 −21

File changed.

Preview size limit exceeded, changes collapsed.